質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

WebGL

WebGL(ウェブジーエル)は、ウェブブラウザで 3次元コンピュータグラフィックスを表示させるための標準仕様です。

Q&A

0回答

596閲覧

【Nuxt.js、three.js】vert,fregファイルが読み込めない|raw-loader

igaramu

総合スコア17

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

WebGL

WebGL(ウェブジーエル)は、ウェブブラウザで 3次元コンピュータグラフィックスを表示させるための標準仕様です。

0グッド

0クリップ

投稿2022/08/08 03:07

前提

Nuxt.jsでウェブサイトを作成しております。

今回、WebGLを導入したいと考えており、
three.jsをインストールしました。

記事①をコピペして進めておりましたが、
vert,freg拡張子を読み込めなかったため、
記事②を参考にraw-loaderを導入しました。

しかし、以下エラー文から進めず質問させていただきました。
(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などにこだわってはおりません。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問