Nuxt3で「Uncaught (in promise) ReferenceError: require is not defined」
今回はNuxt.jsでrequireを使ったときに下記のようなエラーが起きたときの対処法についてご紹介していきます。
|
1 2 3 4 5 6 7 8 9 10 11 |
test.vue:2 Uncaught (in promise) ReferenceError: require is not defined at setup (logo.vue:2:17) at callWithErrorHandling (runtime-core.esm-bundler.js:199:19) at setupStatefulComponent (runtime-core.esm-bundler.js:7768:25) at setupComponent (runtime-core.esm-bundler.js:7729:36) at mountComponent (runtime-core.esm-bundler.js:5084:7) at processComponent (runtime-core.esm-bundler.js:5050:9) at patch (runtime-core.esm-bundler.js:4568:11) at mountChildren (runtime-core.esm-bundler.js:4800:7) at mountElement (runtime-core.esm-bundler.js:4723:7) at processElement (runtime-core.esm-bundler.js:4688:7) |
Nuxt.jsのバージョンは3.11.2となります。
Nuxt3で「Uncaught (in promise) ReferenceError: require is not defined」
結論から言うとrequireはNuxt3やVue3の標準環境ではサポートされていないため、require()の代わりにimportを使う必要があります。
例えば、下記のようなsample1.vueを使っていた場合はsample2.vueのような表現に変えましょう。
・sample1.vue
|
1 2 3 4 5 6 7 8 9 10 11 |
<script setup> const testSrc = require('@/assets/img/test.png') const testSrc2x = require('@/assets/img/test@2x.png') </script> <template> <v-img :src="testSrc" :srcset="`${testSrc2x} 2x`" /> </template> |
・sample2.vue
|
1 2 3 4 5 6 7 8 9 10 11 |
<script setup> import testSrc from '@/assets/img/test.png' import testSrc2x from '@/assets/img/test@2x.png' </script> <template> <v-img :src="testSrc" :srcset="`${testSrc2x} 2x`" /> </template> |
終わりに
今回はNuxt.jsでrequireを使ったときに冒頭のようなエラーが起きたときの対処法についてご紹介いたしました。