vuejs3 - Error is previewing the build of Nuxt 3 Project project recently - Stack Overflow

admin管理员组

文章数量:1391937

We have a Nuxt 3 based website. We were able to run the website in dev mode, build as well as preview it.

Recently after a clean installation of the project with dependencies it is able to run on dev model as well as build. However when we run the preview command, we encounter following error.

      internalBinding('errors').triggerUncaughtException(
                                ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/var/www/html/Phaeton/.output/server/node_modules/vue/index.mjs' imported from /var/www/html/Phaeton/.output/server/index.mjs
Did you mean to import [email protected]/dist/vue.cjs.prod.js?
    at new NodeError (node:internal/errors:406:5)
    at finalizeResolution (node:internal/modules/esm/resolve:233:11)
    at moduleResolve (node:internal/modules/esm/resolve:845:10)
    at defaultResolve (node:internal/modules/esm/resolve:1043:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:383:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:352:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:228:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:85:39)
    at link (node:internal/modules/esm/module_job:84:36) {
  url: 'file:///var/www/html/Phaeton/.output/server/node_modules/vue/index.mjs',
  code: 'ERR_MODULE_NOT_FOUND'
}

Node.js v20.9.0

Following is the package.json file:

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "@nuxtjs/robots": "4.1.11",
    "@nuxtjs/sitemap": "7.2.4",
    "@vueform/slider": "^2.1.10",
    "lodash.debounce": "^4.0.8",
    "nuxt": "~3.12.0",
    "nuxt-easy-lightbox": "^1.0.2",
    "nuxt-og-image": "^3.1.1",
    "nuxt-schema-": "4.0.0",
    "nuxt-seo-utils": "6.0.8",
    "sweetalert2": "^11.15.10",
    "typesense-instantsearch-adapter": "^2.8.0",
    "usebootstrap": "3.5.59",
    "vue": "3.3.13",
    "vue-instantsearch": "^4.19.5",
    "vue-router": "latest",
    "vue-select": "^4.0.0-beta.6",
    "vue3-carousel-nuxt": "1.1.3",
    "vue3-observe-visibility": "^1.0.2"
  },
  "devDependencies": {
    "@iconify-json/bx": "^1.2.1",
    "dotenv": "^16.4.5",
    "vite-plugin-cjs-interop": "^2.1.4"
  }
}

nuxt.config.ts

// 
export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: [
    "usebootstrap",
    "nuxt-easy-lightbox",
    "vue3-carousel-nuxt",
    "@nuxtjs/sitemap",
    "@nuxtjs/robots",
    "nuxt-seo-utils",
    "nuxt-og-image",
    "nuxt-schema-",
  ],
  css: [
    "usebootstrap/scss/usebootstrap",
    "vue-select/dist/vue-select.css",
    "vue3-carousel/dist/carousel.css",
  ],
  sitemap: {
    enabled: true,
    debug: false,
    sitemapsPathPrefix: "/",
    autoLastmod: true,
    sitemaps: {
      pages: {
        includeGlobalSources: true,
        includeAppSources: true,
        // ...
      },
    },
  },
  schemaOrg: {
    defaults: false
  },
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `
          @import "@/assets/scss/_navbar.scss";
           @import "@/assets/scss/_variables.scss";
           @import "@/assets/scss/_custom.scss";
           `,
        },
      },
    },
  },
  compatibilityDate: "2024-10-07",
});

Following solutions that I have tried are :

1. Fixing the versions of the packages in package.json. This did not work.

2. Tried on new machine. It did not work.

3. I tried to compare it with the package-lock.json with the machine where it was already installed and working. [email protected] is present in both as deep dependency and not an issue in the older machine where we are able to preview it.

4. I tried to put vue in the transpile option. This was able to run preview with 500 error internal server error. No further logs where there so i couldn't proceed.

Since I don't have much experience with vite or nuxt prior. It is hard for me to understand the issue.

I am guessing this is caused by one of the deep dependencies of the dependencies that we are using in our project.

I would appreciate if anyone could help me make sense of this issue and guidance on how to resolve this.

Node Version : 20.9.0 NPM Version: 10.1.0

EDIT: Issue seems to be most likely with vite. I was able to get it working either by increasing the version of vue to 3.5.13 or replacing the vue package on the .output/server/node_module path with 3.3.13 as defined in the package manager.

I am still trying to figure out a better solution.

EDIT: Root cause seems to be the update of nitropack underneath which relies of Vue 3.5.13 a different version of Vue. So to resolve the issue we need to add the last version of nitropack when it was working properly. In my case adding "nitropack": "2.10.4", fixed the issue.

本文标签： vuejs3Error is previewing the build of Nuxt 3 Project project recentlyStack Overflow