Nuxt3: serialize is not defined

nuxt-community / axios-module

Secure and easy axios integration for Nuxt 2

https://axios.nuxtjs.org

MIT License

1.19k stars 246 forks source link

Nuxt3: serialize is not defined #560

Open Lycoon opened 2 years ago

Lycoon commented 2 years ago

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.

ranjanngc commented 2 years ago

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)

bizliaoyuan commented 2 years ago

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.

BerkinAKKAYA commented 2 years ago

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)

alisaliso commented 2 years ago

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"],

JenuelDev commented 2 years ago

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.

ghost commented 2 years ago

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)

DenFin commented 2 years ago

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

jsleemaster commented 2 years ago

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"],

This allowed it to run without errors, but it is causing an error when accessing the actual 'http://localhost:3000'.

issues

Larsundso commented 2 years ago

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'
  }
});

pramitsawant commented 2 years ago

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/'
            }
          }
      },
})

Screenshot 2022-10-17 at 1 52 20 PM

How to fix this ???

sandikodev commented 2 years ago

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.js go to line 214 then give following changes for (const h of <%= serialize(options.proxyHeadersIgnore) %>) { to for (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.js go to line 41-42 then 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

iheqi commented 1 year ago

wtf nuxt