Nuxt 在heroku 上部署錯誤無法從“/ app”中找到模塊“defu”

Question

第一個關於 StackOverflow 的問題，所以請原諒我對代碼和這里的無知。 所以我正在嘗試將一個 nuxt 應用程序部署到 heroku。 到目前為止，我有一個可以工作的版本，但是經過許多本地更改后，新的部署不起作用。 我使用 npm run build 在本地運行應用程序，然后使用 npm run start，它運行良好。 但是當我部署時

git push heroku development:master

到heroku，該頁面不起作用，日志顯示以下內容：

2022-06-06T16:10:53.395913+00:00 app[web.1]:  ERROR  Cannot find module 'defu' from '/app'
2022-06-06T16:10:53.395914+00:00 app[web.1]: 
2022-06-06T16:10:53.395915+00:00 app[web.1]:   at Function.resolveSync [as sync] (node_modules/resolve/lib/sync.js:111:15)
2022-06-06T16:10:53.395915+00:00 app[web.1]:   at node_modules/vue-server-renderer/build.prod.js:1:77905
2022-06-06T16:10:53.395916+00:00 app[web.1]:   at Object.<anonymous> (webpack:/external "defu":1:0)
2022-06-06T16:10:53.395916+00:00 app[web.1]:   at __webpack_require__ (webpack/bootstrap:25:0)
2022-06-06T16:10:53.395916+00:00 app[web.1]:   at Module.<anonymous> (server.js:5594:22)
2022-06-06T16:10:53.395917+00:00 app[web.1]:   at __webpack_require__ (webpack/bootstrap:25:0)
2022-06-06T16:10:53.395917+00:00 app[web.1]:   at Object.<anonymous> (server.js:1940:18)
2022-06-06T16:10:53.395917+00:00 app[web.1]:   at __webpack_require__ (webpack/bootstrap:25:0)
2022-06-06T16:10:53.395918+00:00 app[web.1]:   at server.js:118:18
2022-06-06T16:10:53.395918+00:00 app[web.1]:   at Object.<anonymous> (server.js:121:10)

我無法找到與此相關的任何內容，因此將不勝感激。 謝謝

編輯如果有幫助，這是我的 package.json 和 nuxt.config.js

{
  "name": "rutero-front",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.1.1",
    "@fortawesome/free-brands-svg-icons": "^6.1.1",
    "@fortawesome/free-solid-svg-icons": "^6.1.1",
    "@fortawesome/vue-fontawesome": "^2.0.6",
    "@nuxtjs/auth-next": "5.0.0-1648802546.c9880dc",
    "@nuxtjs/axios": "^5.13.6",
    "@nuxtjs/fontawesome": "^1.1.2",
    "bootstrap": "^4.6.1",
    "bootstrap-vue": "^2.22.0",
    "core-js": "^3.19.3",
    "node-sass": "^6.0.1",
    "nuxt": "^2.15.8",
    "v-calendar": "^2.4.1",
    "vue": "^2.6.14",
    "vue-burger-menu": "^2.0.5",
    "vue-feather-icons": "^5.1.0",
    "vue-flux": "^6.4.0",
    "vue-iframes": "^0.0.19",
    "vue-server-renderer": "^2.6.14",
    "vue-smooth-reflow": "^0.1.12",
    "vue-star-rating": "^1.7.0",
    "vue-template-compiler": "^2.6.14",
    "vue2-google-maps": "^0.10.7",
    "webpack": "^4.46.0"
  },
  "devDependencies": {
    "@nuxt/postcss8": "^1.1.3",
    "@nuxtjs/style-resources": "^1.2.1",
    "autoprefixer": "10.4.5",
    "fibers": "^5.0.1",
    "node-sass": "^6.0.1",
    "postcss": "^8.4.12",
    "sass-loader": "^10.2.1",
    "tailwindcss": "^3.0.24"
  }
}

export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'rutero-front',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.png' }
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    '@/assets/css/main.css',
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    { src: '~plugins//vue-burger-menu', mode: 'client' },
    { src: '~/plugins/star-rating.js', mode: 'client'},
    { src: '~/plugins/vue-google-maps.js' },
    { src: '~plugins/v-calendar.js', mode: 'client' },
    { src: '~/plugins/vue-iframes.js', mode: 'client' },
    '@/plugins/bootstrap-vue',
    { src: '~/node_modules/vue-flux', mode: 'client' }
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    '@nuxtjs/fontawesome',
    '@nuxt/postcss8',

  ],

  fontawesome: {
    component: 'fa',
    icons:{
     solid:true,
     brands:true
    }
   },

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    '@nuxtjs/auth-next'
  ],
  


  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    // Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308

    baseURL: "http://localhost:8080",
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    postcss: {
      plugins: {
        'tailwindcss/nesting': {},
        tailwindcss: './tailwind.config.js',
        autoprefixer: {},
      },
    },
    transpile: [/^vue2-google-maps($|\/)/],
  }
}

Answer 1

好的，所以如果有人遇到同樣的問題，這更像是一種解決方法。 顯然這與引導程序有關。 我在 package.json 文件中對 bootstrap-vue 和 bootstrap 進行了奇怪的配置。

我設法部署到heroku，當我刪除與bootstrap有關的所有內容時，錯誤沒有出現，只是保留了bootstrap-vue對package.json的依賴，這行'bootstrap-vue/nuxt'在 nuxt.config.js 的模塊部分。

刪除 .nuxt、package-lock.json 和 node-modules 文件夾並運行 npm install。 一些使用 bootstrap 的組件現在看起來很糟糕，但至少該應用程序可以在 heroku 和本地部署。

還添加了環境變量 NPM_CONFIG_PRODUCTION 並在 heroku 上將其設置為 false，因為引導程序的一些依賴項（光纖、自動前綴等）在 devDependencies 中，我認為引導程序-vue 也需要它們。

我仍然會玩，看看問題是什么。 但是，是的，它的引導程序。

希望這可以幫助某人。