axios-module
axios-module copied to clipboard
nuxt-community
Nuxt3: serialize is not defined
What's happening
Axios does not seem to work with Nuxt3. Anytime a build is run, it will fail because of an undefined field.
Steps to reproduce
- Create a simple Nuxt3 project
-
npm add @nuxtjs/axios - Add '@nuxtjs/axios' to modules of
nuxt.config.js -
npm run build
Output
ERROR serialize is not defined
at eval (eval at <anonymous> (node_modules\lodash.template\index.js:1550:12), <anonymous>:52:1)
at compileTemplate (/C:/Users/Hugo/Documents/Development/scriptio/node_modules/@nuxt/kit/dist/index.mjs:429:45)
at async /C:/Users/Hugo/Documents/Development/scriptio/node_modules/nuxt3/dist/index.mjs:1092:22
at async Promise.all (index 13)
at async generateApp (/C:/Users/Hugo/Documents/Development/scriptio/node_modules/nuxt3/dist/index.mjs:1091:3)
at async build (/C:/Users/Hugo/Documents/Development/scriptio/node_modules/nuxt3/dist/index.mjs:1128:3)
at async Object.invoke (/C:/Users/Hugo/Documents/Development/scriptio/node_modules/nuxi-edge/dist/chunks/build.mjs:33:5)
at async _main (/C:/Users/Hugo/Documents/Development/scriptio/node_modules/nuxi-edge/dist/chunks/index.mjs:384:7)
Here is an issue that might be related: #536.
Getting same issue -
ERROR Cannot start nuxt: serialize is not defined 13:28:49
at eval (eval at <anonymous> (node_modules\lodash.template\index.js:1550:12), <anonymous>:52:1)
at compileTemplate (/D:/try-out/nuxt-app/node_modules/@nuxt/kit/dist/index.mjs:505:45)
at async /D:/try-out/nuxt-app/node_modules/nuxt/dist/index.mjs:1581:22
at async Promise.all (index 13)
at async generateApp (/D:/try-out/nuxt-app/node_modules/nuxt/dist/index.mjs:1580:3)
at async _applyPromised (/D:/try-out/nuxt-app/node_modules/perfect-debounce/dist/index.mjs:54:10)
same issue
[log] Nuxt CLI v3.0.0-rc.2 Error: Error compiling template: *** src: '/home/runner/work/okcc-web/okcc-web/node_modules/@nuxtjs/toast/plugin.js', ssr: false, fileName: 'toast.js', options: *** register: [], toastOptions: *** position: 'top-center' *** ***, filename: 'toast.js', dst: '/home/runner/work/okcc-web/okcc-web/.nuxt/toast.js' *** Error: serialize is not defined at eval (eval at
(node_modules/lodash.template/index.js:1550:12), :7:1) at compileTemplate (node_modules/@nuxt/kit/dist/index.mjs:505:45) at async node_modules/nuxt/dist/index.mjs:1581:22 at async Promise.all (index 13) at async generateApp (node_modules/nuxt/dist/index.mjs:1580:3) at async _applyPromised (node_modules/perfect-debounce/dist/index.mjs:54:10) error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. Error: Process completed with exit code 1.
First time using Nuxt 3, same issue.
My Config:
// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'
export default defineNuxtConfig({
modules: [
'@nuxtjs/axios',
'@nuxtjs/auth-next'
],
router: {
middleware: ['auth']
},
auth: {
strategies: {
google: {
clientId: '...'
},
}
}
})
// tsconfig.json
{
"extends": "./.nuxt/tsconfig.json",
"compilerOptions": {
"types": [
"@nuxtjs/auth-next",
]
},
}
Error:
Nuxt CLI v3.0.0-rc.2 21:45:01
21:45:01
> Local: http://localhost:3000/
> Network: http://192.168.1.26:3000/
> Network: http://192.168.192.1:3000/
> Network: http://172.24.0.1:3000/
ERROR Error compiling template: { 21:45:09
src: 'C:\\Users\\Berkin Akkaya\\Desktop\\timeline\\node_modules\\@nuxtjs\\axios\\lib\\plugin.js',
fileName: 'axios.js',
options: {
baseURL: 'http://localhost:3000/',
browserBaseURL: 'http://localhost:3000/',
credentials: false,
debug: false,
progress: true,
proxyHeaders: true,
proxyHeadersIgnore: [
'accept',
'cf-connecting-ip',
'cf-ray',
'content-length',
'content-md5',
'content-type',
'host',
'x-forwarded-host',
'x-forwarded-port',
'x-forwarded-proto'
],
proxy: false,
retry: false,
https: false,
headers: {
common: [Object],
delete: {},
get: {},
head: {},
post: {},
put: {},
patch: {}
},
globalName: 'nuxt'
},
filename: 'axios.js',
dst: 'C:/Users/Berkin Akkaya/Desktop/timeline/.nuxt/axios.js'
}
ERROR Cannot start nuxt: serialize is not defined 21:45:09
at eval (eval at <anonymous> (node_modules\lodash.template\index.js:1550:12), <anonymous>:52:1)
at compileTemplate (/C:/Users/Berkin%20Akkaya/Desktop/timeline/node_modules/@nuxt/kit/dist/index.mjs:505:45)
at async /C:/Users/Berkin%20Akkaya/Desktop/timeline/node_modules/nuxt/dist/index.mjs:1581:22
at async Promise.all (index 13)
at async generateApp (/C:/Users/Berkin%20Akkaya/Desktop/timeline/node_modules/nuxt/dist/index.mjs:1580:3)
at async _applyPromised (/C:/Users/Berkin%20Akkaya/Desktop/timeline/node_modules/perfect-debounce/dist/index.mjs:54:10)
ERROR [unhandledRejection] serialize is not defined 21:45:09
at eval (eval at <anonymous> (node_modules\lodash.template\index.js:1550:12), <anonymous>:52:1)
at compileTemplate (/C:/Users/Berkin%20Akkaya/Desktop/timeline/node_modules/@nuxt/kit/dist/index.mjs:505:45)
at async /C:/Users/Berkin%20Akkaya/Desktop/timeline/node_modules/nuxt/dist/index.mjs:1581:22
at async Promise.all (index 13)
at async generateApp (/C:/Users/Berkin%20Akkaya/Desktop/timeline/node_modules/nuxt/dist/index.mjs:1580:3)
at async _applyPromised (/C:/Users/Berkin%20Akkaya/Desktop/timeline/node_modules/perfect-debounce/dist/index.mjs:54:10)
I've got the same problem with serialize is not defined
// nuxt.config.js
import { defineNuxtConfig } from "nuxt3";
export default defineNuxtConfig({
env: {
baseUrl,
},
axios: {
proxy: true,
},
proxy: {
"/api": {
target: baseUrl,
pathRewrite: { "^/api/": "api/" },
},
},
modules: ["@nuxtjs/axios", "@nuxtjs/proxy"],
})
My solution
It's helped to add { proxyHeaders: false } to the modules fom this comment:
modules: [["@nuxtjs/axios", { proxyHeaders: false }], "@nuxtjs/proxy"],
and also baseURL to the axios publicRuntimeConfig from this comment:
publicRuntimeConfig: {
axios: {
baseURL: baseUrl,
},
},
modules: [["@nuxtjs/axios", { proxyHeaders: false }], "@nuxtjs/proxy"],
shoot I am having the same issue as well
yarn install v1.22.19
[1/4] Resolving packages...
success Already up-to-date.
$ nuxt prepare
Nuxi 3.0.0-rc.9 18:14:54
ERROR Error compiling template: { 18:14:58
src: 'D:\\Projects\\_PersonalProjects\\Believers Sword Project\\believers-sword-web-new\\node_modules\\@nuxtjs\\axios\\lib\\plugin.js',
fileName: 'axios.js',
options: {
baseURL: 'http://localhost:3000/',
browserBaseURL: 'http://localhost:3000/',
credentials: false,
debug: false,
progress: true,
proxyHeaders: true,
proxyHeadersIgnore: [
'accept',
'cf-connecting-ip',
'cf-ray',
'content-length',
'content-md5',
'content-type',
'host',
'x-forwarded-host',
'x-forwarded-port',
'x-forwarded-proto'
],
proxy: false,
retry: false,
https: false,
headers: {
common: [Object],
delete: {},
get: {},
head: {},
post: {},
put: {},
patch: {}
},
globalName: 'nuxt'
},
filename: 'axios.js',
dst: 'D:/Projects/_PersonalProjects/Believers Sword Project/believers-sword-web-new/.nuxt/axios.js'
}
ERROR serialize is not defined 18:14:58
at eval (eval at <anonymous> (node_modules\lodash.template\index.js:1550:12), <anonymous>:52:1)
at compileTemplate (/D:/Projects/_PersonalProjects/Believers%20Sword%20Project/believers-sword-web-new/node_modules/@nuxt/kit/dist/index.mjs:558:45)
at async /D:/Projects/_PersonalProjects/Believers%20Sword%20Project/believers-sword-web-new/node_modules/nuxt/dist/index.mjs:1841:22
at async Promise.all (index 16)
at async generateApp (/D:/Projects/_PersonalProjects/Believers%20Sword%20Project/believers-sword-web-new/node_modules/nuxt/dist/index.mjs:1840:3)
at async _applyPromised (/D:/Projects/_PersonalProjects/Believers%20Sword%20Project/believers-sword-web-new/node_modules/perfect-debounce/dist/index.mjs:54:10)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
npm install @nuxtjs/axios
And added this to my nuxt.config.ts:
modules: [ ['@nuxtjs/axios',{proxyHeaders:false}], "@nuxtjs/proxy", ]
Gave me this error:
Nuxt CLI v3.0.0-rc.8 12:35:04
12:35:08
> Local: http://localhost:3000/
> Network: http://192.168.1.77:3000/
ℹ Using Tailwind CSS from ~/assets/css/tailwind.css nuxt:tailwindcss 12:35:08
ℹ Tailwind Viewer: http://localhost:3000/_tailwind/ nuxt:tailwindcss 12:35:08
ℹ Vite client warmed up in 682ms 12:35:09
WARN [SSR] Error transforming /home/adrian56/Desktop/Acquisition_Simplicity/VendorLibraryNuxt/node_modules/nuxt/dist/app/entry: filename.split is not a function 12:35:09
at normalizePath (node_modules/vite/dist/node/chunks/dep-74663fff.js:11471:21)
at getMatcherString (node_modules/vite/dist/node/chunks/dep-74663fff.js:11476:16)
at Object.test (node_modules/vite/dist/node/chunks/dep-74663fff.js:11495:33)
at result (node_modules/vite/dist/node/chunks/dep-74663fff.js:11511:25)
at node_modules/vite/dist/node/chunks/dep-74663fff.js:38118:38
at node_modules/vite/dist/node/chunks/dep-74663fff.js:38134:41
at shouldExternalizeForSSR (node_modules/vite/dist/node/chunks/dep-74663fff.js:38061:12)
at TransformContext.transform (node_modules/vite/dist/node/chunks/dep-74663fff.js:40365:34)
at async Object.transform (node_modules/vite/dist/node/chunks/dep-74663fff.js:35537:30)
at async loadAndTransform (node_modules/vite/dist/node/chunks/dep-74663fff.js:39883:29)
✔ Vite server built in 128ms 12:35:09
ℹ Vite server warmed up in 180ms 12:35:09
✔ Nitro built in 381 ms nitro 12:35:10
[nuxt] [request error] [unhandled] [500] _createApp is not a function
at Object.renderToString (./node_modules/vue-bundle-renderer/dist/runtime.mjs:172:25)
at async ./.nuxt/dev/index.mjs:714:21
at async ./.nuxt/dev/index.mjs:106:22
at async ./node_modules/h3/dist/index.mjs:492:19
at async Server.nodeHandler (./node_modules/h3/dist/index.mjs:438:7)
[nitro] Error while generating error response FetchError: 500 (/__nuxt_error?url=/&statusCode=500&statusMessage=Internal+Server+Error&message=_createApp+is+not+a+function&description=%3Cpre%3E%3Cspan+class=%22stack+internal%22%3Eat+Object.renderToString+(./node_modules/vue-bundle-renderer/dist/runtime.mjs:172:25)%3C/span%3E%0A%3Cspan+class=%22stack%22%3Eat+async+./.nuxt/dev/index.mjs:714:21%3C/span%3E%0A%3Cspan+class=%22stack%22%3Eat+async+./.nuxt/dev/index.mjs:106:22%3C/span%3E%0A%3Cspan+class=%22stack+internal%22%3Eat+async+./node_modules/h3/dist/index.mjs:492:19%3C/span%3E%0A%3Cspan+class=%22stack+internal%22%3Eat+async+Server.nodeHandler+(./node_modules/h3/dist/index.mjs:438:7)%3C/span%3E%3C/pre%3E&data)
at async Object.errorhandler [as onError] (file:///home/adrian56/Desktop/Acquisition_Simplicity/VendorLibraryNuxt/.nuxt/dev/index.mjs:354:16)
at async Server.nodeHandler (file:///home/adrian56/Desktop/Acquisition_Simplicity/VendorLibraryNuxt/node_modules/h3/dist/index.mjs:445:9)
I am having the same issue in a fresh nuxt 3 installation. Just added @nuxtjs/axios. Here is a minimal repro: https://stackblitz.com/edit/nuxt-starter-9xp8kl?file=nuxt.config.ts,package.json
I've got the same problem with
serialize is not defined// nuxt.config.js import { defineNuxtConfig } from "nuxt3"; export default defineNuxtConfig({ env: { baseUrl, }, axios: { proxy: true, }, proxy: { "/api": { target: baseUrl, pathRewrite: { "^/api/": "api/" }, }, }, modules: ["@nuxtjs/axios", "@nuxtjs/proxy"], })My solution
It's helped to add
{ proxyHeaders: false }to the modules fom this comment:modules: [["@nuxtjs/axios", { proxyHeaders: false }], "@nuxtjs/proxy"],and also
baseURLto the axios publicRuntimeConfig from this comment:publicRuntimeConfig: { axios: { baseURL: baseUrl, }, }, modules: [["@nuxtjs/axios", { proxyHeaders: false }], "@nuxtjs/proxy"],
This allowed it to run without errors, but it is causing an error when accessing the actual 'http://localhost:3000'.
- issues
Can reproduce with @nuxtjs/google-analytics
Nuxi 3.0.0-rc.12-27736489.2e080c2 09:49:09
Nuxt 3.0.0-rc.11 with Nitro 0.5.4 09:49:09
ERROR Error compiling template: { 09:49:11
ssr: false,
src: '/root/Bots/Ayako-VueJS/frontend/node_modules/@nuxtjs/google-analytics/lib/plugin.js',
fileName: 'google-analytics.js',
options: {
dev: true,
debug: {
sendHitTask: true
},
id: 'G-VL2J918CLL'
},
filename: 'google-analytics.js',
dst: '/root/Bots/Ayako-VueJS/frontend/.nuxt/google-analytics.js'
}
ERROR serialize is not defined 09:49:11
at eval (eval at <anonymous> (node_modules/lodash.template/index.js:1550:12), <anonymous>:7:1)
at compileTemplate (node_modules/nuxt3/node_modules/@nuxt/kit/dist/index.mjs:565:45)
at async node_modules/nuxt3/dist/index.mjs:1897:22
at async Promise.all (index 16)
at async generateApp (node_modules/nuxt3/dist/index.mjs:1896:3)
at async _applyPromised (node_modules/perfect-debounce/dist/index.mjs:54:10)
my nuxt config:
// https://v3.nuxtjs.org/api/configuration/nuxt.config
import { defineNuxtConfig } from "nuxt/config";
export default defineNuxtConfig({
target: "static",
nitro: {
preset: "nitro-prerender",
},
css: ["@/assets/main.css"],
buildModules: ["@nuxtjs/google-analytics"],
googleAnalytics: {
id: 'G-VL2J918CLL'
}
});
I also get the same error.
// package.json
{
"private": true,
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
},
"devDependencies": {
"nuxt": "3.0.0-rc.11"
},
"dependencies": {
"@nuxtjs/auth-next": "5.0.0-1648802546.c9880dc",
"@nuxtjs/axios": "^5.13.6"
}
}
// nuxt.config.ts
export default defineNuxtConfig({
modules: [
'@nuxtjs/axios',
'@nuxtjs/auth-next'
],
auth: {
strategies: {
auth0: {
domain: 'domain.auth0.com',
clientId: '....',
audience: 'https://my-api-domain.com/'
}
}
},
})
How to fix this ???
anyone who meet following https://github.com/nuxt-community/axios-module/issues/560#issuecomment-1280476142 same kind error.
HERE SOME TRICKS https://github.com/nuxt-community/axios-module/issues/536#issuecomment-1021757560 which resolved by @bcspragu
you can use this axios as sparate plugin of nuxt.config.ts
/plugin/axios.ts
// files ~/plugin/axios.ts
import { defineNuxtPlugin } from '#app'
import axios from 'axios'
export default defineNuxtPlugin(() => {
return {
provide: {
axios: () => {
return axios.create({
// any axios option here
baseURL: 'https://example.com/api',
})
}
}
}
})
then use them in your vue files
// files ~/pages/example.vue
<script setup lang="ts">
import { useNuxtApp } from '#app'
let { $axios } = useNuxtApp()
const axios = $axios()
axios.get('/req/path/123').then((response) => {
/* do things with response and response.data */
})
</script>
HERE https://github.com/nuxt-community/axios-module/pull/561#issue-1121439478 SOME OPTIONAL WAY if you want to use axios as part of nuxt.config.ts modules
as a said:
-
open
node_modules/@nuxtjs/axios/lib/plugins.jsgo to line214then give following changesfor (const h of <%= serialize(options.proxyHeadersIgnore) %>) {tofor (const h of <%= JSON.stringify(options.proxyHeadersIgnore) %>) {please check this out https://github.com/nuxt-community/axios-module/pull/561/commits/a33d99b2b201272cfd267e4bc5b8268cd70757df
-
and for the last one
node_modules/@nuxtjs/axios/lib/module.jsgo to line41-42then give following changes same as https://github.com/nuxt-community/axios-module/pull/561/commits/6782b3613aba6473e8f9c6294f51d9b990ea8440
-
for
nuxt.config.ts
modules: [
'@nuxtjs/axios', // yarn add @nuxtjs/axios
// '@nuxtjs/proxy', // yarn add @nuxtjs/proxy # if you use axios within proxy
]
,
publicRuntimeConfig: {
axios: {
baseURL: 'https://example.com',
// proxy: true // if using proxy
},
// proxy: {
// here proxy configuration
// baseURL: 'https://example.com/api',
// }
},
AND FINALLY WE DO THE TRICKS
// files ~/pages/example.vue
<script setup lang="ts">
import { useNuxtApp } from '#app'
let { $axios } = useNuxtApp()
// const axios = $axios() // if you not comment this line and still have ~/plugins/axios.ts. will be expected redefine $axios
$axios.get('/users/mapbox').then((response) => {
console.log(response)
})
</script>
FINAL RESULT
HORRAY
