Open n4an opened 3 years ago
Hello, same pb with nuxt3
Cannot restart nuxt: options is not defined
i got same problem
we can try but same problem again
I got a same problem. I tryed to add this setting to my nuxt config. This solved this problem but a new error occurred on the client side.
modules: [
"@nuxtjs/axios"
],
axios: {
baseURL: 'http://localhost:4000',
options: {
headers: {}
}
},
I think "@nuxtjs/axios" is not required. because useFetch instead it. although useFetch has some bugs.
@xiongsongsong
Thank you. I didn't know that it is possible to use useFetch
.
I'll watch for that some bug. π
@xiongsongsong Thank you. I didn't know that it is possible to use
useFetch
. I'll watch for that some bug. π
There seems to be no other better solution
I set it as below and updated nuxt3(3.0.0-27247485.fb4359e) and it worked.
modules: [
['@nuxtjs/axios',{proxyHeaders:false}],
],
The reason I set proxyHeaders to false is because I get an error that serializer is not defined
https://github.com/nuxt-community/axios-module/blob/main/lib/plugin.js#L210-L219
However, I don't think this has solved it.
Cannot restart nuxt: serialize is not defined
Same problem
You can temporary turn off proxyHeaders in nuxt.config.ts
modules: ["@nuxtjs/axios"],
axios: {
proxyHeaders: false,
},
In my case I needed to add baseUrl config to get it to work
publicRuntimeConfig: {
axios: {
baseURL: '......'
}
},
modules: [
['@nuxtjs/axios',{proxyHeaders:false}]
],
I get an error like this, I don't know how to solve it.
Nuxt version v3.0.0-27324955.23397e6
I get an error like this, I don't know how to solve it.
Nuxt version v3.0.0-27324955.23397e6
please check my answer above, you need to provide baseURL
I get an error like this, I don't know how to solve it. Nuxt version v3.0.0-27324955.23397e6
please check my answer above, you need to provide baseURL
I've add the baseURL to the config, but still got the error
modules: ["@nuxtjs/axios", {proxyHeaders: false}], publicRuntimeConfig: { axios: { baseURL: process.env.AXIOS_BASE_URL || 'http://localhost:3000/api' } }
@imamnf
Did you include the following commit?
Without this commit, even the client will try to get the baseURL on the server side. Because process.browser is returning false.
@imamnf
Did you include the following commit?
Without this commit, even the client will try to get the baseURL on the server side. Because process.browser is returning false.
how to include that? I don't know where the file is
Sorry.
This hasn't been released yet :bow:
In my case I am using patch-package
to modify node_modules/@nuxtjs/axios/lib/plugin.js
files
$cat patches/@nuxtjs+axios+5.13.6.patch
diff --git a/node_modules/@nuxtjs/axios/lib/module.js b/node_modules/@nuxtjs/axios/lib/module.js
index 36d41dd..e6f6b96 100755
--- a/node_modules/@nuxtjs/axios/lib/module.js
+++ b/node_modules/@nuxtjs/axios/lib/module.js
@@ -38,9 +38,9 @@ function axiosModule (_moduleOptions) {
}
// Transpile defu (IE11)
- if (nuxt.options.build.transpile /* nuxt 1 */) {
- nuxt.options.build.transpile.push(({ isClient }) => isClient && 'defu')
- }
+ // if (nuxt.options.build.transpile /* nuxt 1 */) {
+ // nuxt.options.build.transpile.push(({ isClient }) => isClient && 'defu')
+ // }
// Default prefix
const prefix = process.env.API_PREFIX || moduleOptions.prefix || '/'
diff --git a/node_modules/@nuxtjs/axios/lib/plugin.js b/node_modules/@nuxtjs/axios/lib/plugin.js
index fc4493e..b5388b7 100644
--- a/node_modules/@nuxtjs/axios/lib/plugin.js
+++ b/node_modules/@nuxtjs/axios/lib/plugin.js
@@ -193,9 +193,10 @@ export default (ctx, inject) => {
// runtimeConfig
const runtimeConfig = ctx.$config && ctx.$config.axios || {}
// baseURL
- const baseURL = process.browser
- ? (runtimeConfig.browserBaseURL || runtimeConfig.browserBaseUrl || runtimeConfig.baseURL || runtimeConfig.baseUrl || '<%= options.browserBaseURL || '' %>')
- : (runtimeConfig.baseURL || runtimeConfig.baseUrl || process.env._AXIOS_BASE_URL_ || '<%= options.baseURL || '' %>')
+ const baseURL = '<%= options.baseURL || '' %>'
+ // const baseURL = process.browser
+ // ? (runtimeConfig.browserBaseURL || runtimeConfig.browserBaseUrl || runtimeConfig.baseURL || runtimeConfig.baseUrl || '<%= options.browserBaseURL || '' %>')
+ // : (runtimeConfig.baseURL || runtimeConfig.baseUrl || process.env._AXIOS_BASE_URL_ || '<%= options.baseURL || '' %>')
// Create fresh objects for all default header scopes
// Axios creates only one which is shared across SSR requests!
Hmm the issue you are talking about should already be fixed by this PR nuxt/framework#516 but there haven't been any releases of the this module since June.
@pi0 is there are reason why changes haven't been released?
I think nuxt/framework#516 only fixes the problem with the baseURL.
I think there are at least three problems.
The baseURL problem happens because process.browser and process.env are undefined in client. We can see this in console.log
Regarding the third, it happens in the following place at build time.
https://github.com/nuxt-community/axios-module/blob/main/lib/module.js#L41-L43
So nuxt/framework#516 will fix the baseURL problem and this issue itself will not be fixed.
Auth module depends on axios, so that package can't have nuxt 3 support until axios is fixed: https://github.com/nuxt-community/auth-module/issues/1520
I'm not familiar with what this plugin does, but for someone trying to get axios
working quickly with Nuxt 3, you can add a quick plugin, like:
And then you can access it like:
This works with both SSR and client-side as far as I can tell.
Here's a small module u can use to replicate this module while you guys wait for an update.
You need to install axios
, @nuxtjs/proxy
, consola
, and defu
as devDependencies or dependencies for it to work.
I got the proxy plugin working but you have to use it a bit differently, for it to work the same you need to set axios.proxy
as true
then add a proxy
object outside of the axios object with your proxy config (like you would when installing just the proxy module.)
Fixed.
I can testify, @bcspragu's proposal works like a charm !
Either way, some other community modules such as the nuxt-community/auth-module are waiting for this update to start migrating to Nuxt 3 themselves. Would love to see @Teranode's fix tested, and hopefully included.
Sorry.
This hasn't been released yet π
In my case I am using
patch-package
to modifynode_modules/@nuxtjs/axios/lib/plugin.js
files
$cat patches/@nuxtjs+axios+5.13.6.patch
diff --git a/node_modules/@nuxtjs/axios/lib/module.js b/node_modules/@nuxtjs/axios/lib/module.js index 36d41dd..e6f6b96 100755 --- a/node_modules/@nuxtjs/axios/lib/module.js +++ b/node_modules/@nuxtjs/axios/lib/module.js @@ -38,9 +38,9 @@ function axiosModule (_moduleOptions) { } // Transpile defu (IE11) - if (nuxt.options.build.transpile /* nuxt 1 */) { - nuxt.options.build.transpile.push(({ isClient }) => isClient && 'defu') - } + // if (nuxt.options.build.transpile /* nuxt 1 */) { + // nuxt.options.build.transpile.push(({ isClient }) => isClient && 'defu') + // } // Default prefix const prefix = process.env.API_PREFIX || moduleOptions.prefix || '/' diff --git a/node_modules/@nuxtjs/axios/lib/plugin.js b/node_modules/@nuxtjs/axios/lib/plugin.js index fc4493e..b5388b7 100644 --- a/node_modules/@nuxtjs/axios/lib/plugin.js +++ b/node_modules/@nuxtjs/axios/lib/plugin.js @@ -193,9 +193,10 @@ export default (ctx, inject) => { // runtimeConfig const runtimeConfig = ctx.$config && ctx.$config.axios || {} // baseURL - const baseURL = process.browser - ? (runtimeConfig.browserBaseURL || runtimeConfig.browserBaseUrl || runtimeConfig.baseURL || runtimeConfig.baseUrl || '<%= options.browserBaseURL || '' %>') - : (runtimeConfig.baseURL || runtimeConfig.baseUrl || process.env._AXIOS_BASE_URL_ || '<%= options.baseURL || '' %>') + const baseURL = '<%= options.baseURL || '' %>' + // const baseURL = process.browser + // ? (runtimeConfig.browserBaseURL || runtimeConfig.browserBaseUrl || runtimeConfig.baseURL || runtimeConfig.baseUrl || '<%= options.browserBaseURL || '' %>') + // : (runtimeConfig.baseURL || runtimeConfig.baseUrl || process.env._AXIOS_BASE_URL_ || '<%= options.baseURL || '' %>') // Create fresh objects for all default header scopes // Axios creates only one which is shared across SSR requests!
its still not working
Any news on this? Maybe someone can review the @Teranode pull request.
@pi0 could you please assist (not sure who to tag)?
nuxt/auth is dependent on this, and it's quite a pain to rewrite that authentication package in nuxt 3.
@tntsoft You could try using these packages until they update theirs: https://github.com/Teranode/nuxt-module-alternatives
create plugins/axios.js and add this code inside
`import axios from 'axios'
export default () => { return { provide: { axios: axios.default } } } `
then you can use this.$axios
Seems like the upgrade is quite straightforward according to @Teranode, @bcspragu or @paleacci.
A first step could be to create a "next" branch that would allow axios-dependent projects to start migrating to Nuxt 3 ?
You don't really need that package anymore, ohmyfetch
is the recommended approach anyway: https://v3.nuxtjs.org/api/utils/$fetch#fetch
I had the same issue and fixed it by building my own plugin using the normal axios npm module (advantage: you can build multiple plugins for multiple APIs and defining interceptors is pretty straight forward) I have described the steps you need in this article I hope that helps.
This module does not work with Nuxt 3 (see discussion in #562). It seems that the author is not interested in making a real Nuxt 3 version of this module and is instead recommending the use of $fetch.
@robertpatrick here is my answer: https://stackoverflow.com/a/74966587/8816585
Basically, you don't need to use it anymore because it's included + lightweight (and with better support) because part of the unJS ecosystem. ππ»
not work with nuxt 3