Nuxt.jsで@nuxtjs/composition-api
をimportしてComposition APIを使おうと思ったら下記のようなエラーが発生してしまった
ERROR in ./node_modules/@nuxt/utils/node_modules/fs-extra/lib/index.js
Module not found: Error: Can't resolve 'fs' in '..../node_modules/@nuxt/utils/node_modules/fs-extra/lib'
ERROR in ./node_modules/@nuxt/utils/node_modules/jsonfile/index.js
Module not found: Error: Can't resolve 'fs' in '..../node_modules/@nuxt/utils/node_modules/jsonfile'
ERROR in ./node_modules/fs-extra/lib/index.js
Module not found: Error: Can't resolve 'fs' in '..../node_modules/fs-extra/lib'
ERROR in ./node_modules/graceful-fs/graceful-fs.js
Module not found: Error: Can't resolve 'fs' in '..../node_modules/graceful-fs'
ERROR in ./node_modules/jsonfile/index.js
Module not found: Error: Can't resolve 'fs' in '..../node_modules/jsonfile'
試したこと
下記記事を参考に、nuxt.config.jsのbuildにfs: "empty"
を追加した
さっきのようなCan't resolve 'fs'
エラーは起きなくなったが、代わりに以下のようなエラーが起きるようになってしまった
client.js?06a0:96 TypeError: Cannot read property 'native' of undefined
at eval (index.js?ec2f:126)
at Object../node_modules/fs-extra/lib/fs/index.js (index.js:700)
at __webpack_require__ (runtime.js:854)
at fn (runtime.js:151)
at eval (index.js?83ef:5)
at Object../node_modules/fs-extra/lib/index.js (index.js:712)
at __webpack_require__ (runtime.js:854)
at fn (runtime.js:151)
at Object.eval (index.js?f544:6)
at eval (index.js:853)
原因と解決策
nuxt.config.jsのbuildModules
に下記を追加していなかった
nuxt.config.js
export default {
// 省略
buildModules: [
'@nuxtjs/composition-api'
],
}
公式ドキュメントのQuick startに思いっきり書いてあるのに、それを読まず@vue/composition-api
と同じようなやり方でやろうとしたのが原因…
「まずは公式ドキュメントを確認しろ」なんて散々言われてるのに、それを怠ったばっかりに数時間躓いてしまって惨めな気持ちになりました
まずは公式ドキュメントを確認しましょう!!!!