[未解決]Nuxt3で色々エラー
2時間くらい色々やって、解決しないので記録していく。
発端：
yarn devでテストし終わって、NODE_OPTIONS="--max-old-space-size=8096" yarn generateしようとしたら、file-saverが無いというエラーが出た。
なんか色々やってたら違うエラーから違うエラーにハマり、謎にNuxt2からNuxt3に移行しようとしたりして、出口がなくなっている。
16:20
現在のエラー
% yarn dev
⚡️ Nuxt Generation CLI Experience (nuxi v3.11.1) 4:25:48 PM
USAGE nuxi add|analyze|build-module|build|cleanup|_dev|dev|devtools|generate|info|init|module|prepare|preview|start|test|typecheck|upgrade
COMMANDS
add Create a new template file.
analyze Build nuxt and analyze production bundle (experimental)
build-module Helper command for using @nuxt/module-builder
build Build Nuxt for production deployment
cleanup Clean up generated Nuxt files and caches
_dev Run Nuxt development server (internal command to start child process)
dev Run Nuxt development server
devtools Enable or disable devtools in a Nuxt project
generate Build Nuxt and prerender all routes
info Get information about Nuxt project
init Initialize a fresh project
module Manage Nuxt modules
prepare Prepare Nuxt for development/build
preview Launches Nitro server for local testing after nuxi build.
start Launches Nitro server for local testing after nuxi build.
test Run tests
typecheck Runs vue-tsc to check types throughout your app.
upgrade Upgrade Nuxt
Use nuxi <command> --help for more information about a command.
ERROR No command specified. % yarn build
Nuxt 3.11.2 with Nitro 2.9.6 4:26:27 PM
ERROR Cannot read properties of undefined (reading 'hook') 4:26:28 PM
at nuxtBootstrapVue (node_modules/bootstrap-vue/nuxt/index.js:34:13)
at installModule (node_modules/@nuxt/kit/dist/index.mjs:2415:101)
at async initNuxt (node_modules/nuxt/dist/index.mjs:4233:7)
at async loadNuxt (node_modules/nuxt/dist/index.mjs:4331:5)
at async Module.loadNuxt (node_modules/@nuxt/kit/dist/index.mjs:2570:19)
at async Object.run (node_modules/nuxi/dist/chunks/build.mjs:70:18)
at async runCommand$1 (node_modules/nuxi/dist/shared/nuxi.9edf0930.mjs:1648:16)
at async runCommand$1 (node_modules/nuxi/dist/shared/nuxi.9edf0930.mjs:1639:11)
at async runMain$1 (node_modules/nuxi/dist/shared/nuxi.9edf0930.mjs:1777:7) yarn devは無いと言われる。yarn buildではhookとやらが無いと言われる。
% yarn dev devやってみたら、yarn buildと同じエラーが出た。
なんで% yarn devはできなくなって% yarn dev devというのができるようになってるのか。わからない。
Cannot read properties of undefined (reading 'hook')
このエラーから解決していきたい。
https://zenn.dev/sukezane/scraps/7f0eefc2971ae4
効かない：package-lock.json, node_modulesを消してyarn install
% yarn dev dev
Nuxt 3.11.2 with Nitro 2.9.6 4:33:41 PM
4:33:41 PM
➜ Local: http://localhost:3000/
➜ Network: use --host to expose
ERROR Cannot start nuxt: Cannot read properties of undefined (reading 'hook') bootstrap-vueはvue3では動かないらしい。
% yarn remove bootstrap-vue
% yarn add bootstrap-vue-next
次のエラー
ERROR Cannot restart nuxt: Cannot read properties of undefined (reading 'options') 4:39:14 PM
at axiosModule (node_modules/@nuxtjs/axios/lib/module.js:12:13)axiosは元から使ってなかったので、消しちゃう。
% yarn remove @nuxtjs/axios
Nuxt.config.jsからも関連部分を削除。
次のエラー
ERROR Cannot start nuxt: Cannot destructure property 'nuxt' of 'this' as it is undefined. 4:42:29 PM
at pwa (node_modules/@nuxtjs/pwa/dist/pwa.js:733:10)pwaも使ってないので消しちゃう。
% yarn remove @nuxtjs/pwa
Nuxt.config.jsからも関連部分を削除。
次のエラー
ERROR Cannot start nuxt: Cannot read properties of undefined (reading 'dev') 4:44:32 PM
at module.exports (node_modules/@nuxt/content/lib/index.js:15:18)@nuxt/content内のエラーらしい。使ってないから消しちゃう。
% yarn remove @nuxt/content
Nuxt.config.js,tsconfig.jsonからも関連部分を削除。
次のエラー
ERROR Cannot start nuxt: Cannot find module '/Users/tenna/Desktop/Customers/HajimeNavi/manageWeb/hajimenavi_manage/@nuxtjs/firebase'nuxt.config.jsのmodulesの@nuxtjs/firebaseをfirebaseに置き換え。
意味なし。
modulesじゃなくてnitroを使ってみると解決
次のエラー
ERROR Cannot restart nuxt: Cannot read properties of undefined (reading 'fontawesome') 4:53:32 PM
at module (node_modules/nuxt-fontawesome/lib/module.js:9:56)modulesにnuxt-fontawesomeいらないようだから消す
次のエラー
../plugins/fontawesome.js has no default export and will be ignored at build time. Add export default defineNuxtPlugin(() => {}) to your plugin.
..plugins/vue2-google-maps.js has no default export and will be ignored at build time. Add export default defineNuxtPlugin(() => {}) to your plugin.
../plugins/persistedstate.js is not wrapped in defineNuxtPlugin. It is advised to wrap your plugins as in the future this may enable enhancements.vue2-google-mapsはvue2-google-mapsに置き換え
% yarn remove vue2-google-maps
% yarn add vue3-google-maps
vue2-google-maps.jsは消して、htmlも一部書き換え
fontawesome.jsをvue3用に書き換え。
vuex-persistedstateはもうサポートされてないので@pinia-plugin-persistedstate/nuxtを使う。
% yarn dev dev
エラーがなくなった！！
17:10
次のエラー
% yarn build
Nuxt 3.11.2 with Nitro 2.9.6 5:13:12 PM
ℹ Building client... 5:13:14 PM
ℹ vite v5.2.12 building for production... 5:13:14 PM
ℹ ✓ 63 modules transformed. 5:13:14 PM
ERROR x Build failed in 438ms 5:13:14 PM
[5:13:14 PM] ERROR Nuxt Build Error: [vite]: Rollup failed to resolve import "vuex" from "/Users/.../pages/new_records.vue".nuexはpiniaに置き換えられるらしい
https://zenn.dev/aoken/articles/43358392ffcc77
頑張って移行。
次のエラー
ERROR Pre-transform error: Missing "./types/options" specifier in "vue" package Vue.extendからdefineComponentに移行。
次のエラー
ERROR Nuxt Build Error: [commonjs--resolver] Missing "./types" specifier in "vue" packagevue3に対応してないパッケージがある？
node-sass と sass-loaderはdeprecatedらしい。
sassは奇跡的に使ってなかったので、削除しちゃう。
eslintも消しちゃう。
18:00
export default {をexport default defineNuxtConfig({に置き換え
ると
Package subpath './types' is not defined by "exports"import { defineNuxtConfig } from 'vue/types';じゃ無くてimport { defineNuxtConfig } from 'nuxt/config'だった
しかしMissing "./types" specifierエラーは消えないので、
nuxt.config.jsに以下を追加
vite: {
resolve: {
alias: {
'@': '/absolute/path/to/your/src',
'vue': 'vue/dist/vue.esm-bundler.js'
}
}
}yarn dev devなんていう変なのを使ってたのは、"script"->"dev"がおかしかったからだ。
修正。
"dev": "NODE_OPTIONS=--max_old_space_size=8096 nuxt dev",
yarn buildをしてみるとどうやら無限ループに陥ってMacが固まった。
ではyarn devをやってみる。localhostに最新のコードが反映されないので、publicフォルダ内を消してみると、このエラー
Importing binding name 'DocumentData' is not found.19:20
ここでエラーが起きてるぽい
import { DocumentData } from "firebase/firestore";
ChatGPTに質問しても解決しなかったので、チケットを挙げちゃう。
https://github.com/firebase/firebase-js-sdk/issues/8273
Geminiに聞いてみたら、allowJsをfalseにしろ、tsconfig.jsonを消せと言われた。
すると新しくこのエラーが出てきた。
[uncaughtException] proxyReq.appendHeader is not a function
20:30
もう新しいプロジェクトを作って移行しちゃおうと思う。半日無駄にした。
20:50
改めてプロジェクトを作り始めて、
npx nuxi@latest init projectname
クリーンなプロジェクトで
npm run devやってみると
500
undefined is not an object (evaluating 'route.meta')
run@http://localhost:3000/_nuxt/node_modules/.cache/vite/client/deps/chunk-6LRXACK2.js:435:21
...何これ。。。
エラー地獄からは逃げられないの。。。
21:10
元のプロジェクトに戻って足掻いたりしてみた。
nodeを何回18.17.0にアップグレードしても17.0.0に戻っちゃうので、再度アップグレード。
するとエラーが変わった。
'text/html' is not a valid JavaScript MIME type.
これでもなんのこっちゃわからないので、Issueを挙げちゃう。
https://github.com/nuxt/nuxt/issues/27403
この記事が気に入ったらサポートをしてみませんか？