前提
Nuxt.jsでウェブサイトを作成しております。
今回、WebGLを導入したいと考えており、
three.jsをインストールしました。
記事①をコピペして進めておりましたが、
vert,freg拡張子を読み込めなかったため、
記事②を参考にraw-loaderを導入しました。
- 記事①:https://qiita.com/misaki_mofu/items/145ac26d600b429a6f8a
- 記事②:https://blog.h3y6e.com/posts/webpack-ts-three-js-glsl/
しかし、以下エラー文から進めず質問させていただきました。
(WebGL導入前はサイトは正常に動作していました。)
実現したいこと
記事①の「サンプル」作品をサイトに表示させたい。
発生している問題・エラーメッセージ
shell
1FATAL Cannot read properties of undefined (reading 'startsWith') 2 3 at Resolver.jiti [as _require] (node_modules/jiti/dist/jiti.js:1:110196) 4 at Resolver.requireModule (node_modules/@nuxt/core/dist/core.js:381:29) 5 at ModuleContainer.addModule (node_modules/@nuxt/core/dist/core.js:182:38) 6 at node_modules/@nuxt/utils/dist/utils.js:639:43 7 at async ModuleContainer.ready (node_modules/@nuxt/core/dist/core.js:55:5) 8 at async Nuxt._init (node_modules/@nuxt/core/dist/core.js:478:5) 9
該当のソースコード
エラーに出ているソースです。
すべて貼り付けることができないため一部となります。
ファイル:core.js
javascript
1 2 // Try to require 3 try { 4 requiredModule = this._require(resolvedPath); // エラー表示箇所 381:29 5 } catch (e) { 6 lastError = e; 7 } 8 9 // Resolve handler 10 if (!handler) { 11 try { 12 handler = this.nuxt.resolver.requireModule(src, { paths }); //エラー表示箇所 182:38 13 // pnp support 14 try { (global.__NUXT_PATHS__ || []).push(this.nuxt.resolver.resolvePath(src, { paths })); } catch (_err) {} 15 } catch (error) { 16 if (error.code !== 'MODULE_NOT_FOUND') { 17 throw error 18 }
エラー発生時
nuxt.config.jsに以下コードを記載し、
npm run buildすると該当エラーになった次第です。
記事①(modules部分)と②(build部分)が合わさった形になっております。
ファイル:nuxt.config.js
javascript
1const path = require('path'); 2 3-- 略 -- 4 5 modules: [ 6 { 7 rules: [ 8 { 9 test: /.(ts|tsx|js)$/, 10 use: 'ts-loader', 11 include: [path.resolve(__dirname, 'components')], 12 exclude: /node_modules/ 13 }, 14 { 15 test: /.(vert|frag)$/, 16 use: 'raw-loader', 17 include: [path.resolve(__dirname, 'components')], 18 exclude: /node_modules/ 19 } 20 ] 21 } 22 ], 23 24build: { 25 extend(config, ctx) { 26 if (!!config.module) { 27 config.module.rules.push({test: /\.(vert|frag)$/i, use: ["raw-loader"]}); 28 } 29 }, 30}
試したこと
nuxt.config.jsの該当箇所を削除して、
再度ビルドしても以下エラーになります。
nuxt.config.js
shell
1 FATAL Rule can only have one resource source (provided resource and test + include + exclude) in { 2 "use": [ 3 { 4 "loader": "/mnt/d/Project/***/node_modules/babel-loader/lib/index.js", 5 "options": { 6 "configFile": false, 7 "babelrc": false, 8 "cacheDirectory": false, 9 "envName": "client", 10 "presets": [ 11 [ 12 "/mnt/d/Project/***/node_modules/@nuxt/babel-preset-app/src/index.js", 13 { 14 "corejs": { 15 "version": 3 16 } 17 } 18 ] 19 ] 20 }, 21 "ident": "clonedRuleSet-4.use[0]" 22 } 23 ] 24} 25 26 "use": [ 27 { 28 "loader": "node_modules/babel-loader/lib/index.js", 29 "options": { 30 "configFile": false, 31 "babelrc": false, 32 "cacheDirectory": false, 33 "envName": "client", 34 "presets": [ 35 [ 36 "node_modules/@nuxt/babel-preset-app/src/index.js", 37 { 38 "corejs": { 39 "version": 3 40 } 41 } 42 ] 43 ] 44 }, 45 "ident": "clonedRuleSet-4.use[0]" 46 } 47 ] 48 } 49 at checkResourceSource (node_modules/@nuxt/webpack/node_modules/webpack/lib/RuleSet.js:167:11) 50 at Function.normalizeRule (node_modules/@nuxt/webpack/node_modules/webpack/lib/RuleSet.js:198:4) 51 at node_modules/@nuxt/webpack/node_modules/webpack/lib/RuleSet.js:110:20 52 at Array.map (<anonymous>) 53 at Function.normalizeRules (node_modules/@nuxt/webpack/node_modules/webpack/lib/RuleSet.js:109:17) 54 at new RuleSet (node_modules/@nuxt/webpack/node_modules/webpack/lib/RuleSet.js:104:24) 55 at new NormalModuleFactory (node_modules/@nuxt/webpack/node_modules/webpack/lib/NormalModuleFactory.js:115:18) 56 at Compiler.createNormalModuleFactory (node_modules/@nuxt/webpack/node_modules/webpack/lib/Compiler.js:636:31) 57 at Compiler.newCompilationParams (node_modules/@nuxt/webpack/node_modules/webpack/lib/Compiler.js:653:30) 58 at Compiler.compile (node_modules/@nuxt/webpack/node_modules/webpack/lib/Compiler.js:661:23) 59
補足情報(FW/ツールのバージョンなど)
バージョンの不具合のような感じがしていますが情報が出てこず確信が持てません。
依存関係は以下のとおりです。
package.json
javascript
1{ 2 "private": true, 3 "scripts": { 4 "dev": "nuxt", 5 "build": "nuxt build", 6 "start": "nuxt start", 7 "generate": "nuxt generate" 8 }, 9 "dependencies": { 10 "@nuxtjs/markdownit": "^2.0.0", 11 "buefy": "^0.8.20", 12 "core-js": "^3.24.1", 13 "glslify-loader": "^2.0.0", 14 "highlight.js": "^11.6.0", 15 "markdown-it": "^13.0.1", 16 "markdown-it-emoji": "^2.0.2", 17 "nuxt": "^2.15.8", 18 "nuxt-buefy": "^0.4.23", 19 "sass-loader": "^13.0.2", 20 "three": "^0.143.0", 21 "vue": "^2.7.8", 22 "vue-server-renderer": "^2.5.8", 23 "vue-template-compiler": "^2.7.8", 24 "webpack": "^5.74.0" 25 },
解決方法
試しにthree.jsを使ってみたいだけだったので、
three.js及びraw-loaderなどにこだわってはおりません。
あなたの回答
tips
プレビュー