Q&A
フォルダの構成に問題がある気がします。シェルで以下のコマンドを実行した際の出力を教えていただけませんか？
sh -c 'pwd; ls -A | head'
実現したいこと
$ yarn start
とコマンドを叩くことで、localhost:9000にアクセスでき「/index.htmlです。」と表示させたい
発生している問題・エラーメッセージ
ERROR
1 2ERROR in multi (webpack)-dev-server/client?http://localhost:8080 ./src 3Module not found: Error: Can't resolve './src' in '/Users/shouminotaku' 4 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src main[1]エラーメッセージ
該当のソースコード
package.json
1{ 2 "name": "01", 3 "version": "1.0.0", 4 "main": "index.js", 5 "license": "MIT", 6 "dependencies": { 7 "ejs-compiled-loader": "1.1.0", 8 "html-webpack-plugin": "3.2.0", 9 "webpack": "4.46.0", 10 "webpack-cli": "3.3.12", 11 "webpack-dev-server": "3.10.1" 12 }, 13 "scripts": { 14 "start": "webpack-dev-server --mode development --watch" 15 } 16} 17
試したこと
yarn addでバージョンを指定してNPMパッケージをインストールする
（参考 https://qiita.com/suin/items/6faea73b5b16d31d990a）
yarn add [パッケージ名]@[バージョン指定]
package.json:7
"ejs-compiled-loader": "1.1.0", "html-webpack-plugin": "3.2.0", "webpack": "4.46.0", "webpack-cli": "3.3.12", "webpack-dev-server": "3.10.1"
完了！
yarn startしてみる
$ yarn start yarn run v1.22.19 $ webpack-dev-server --mode development --watch ℹ ｢wds｣: Project is running at http://localhost:8080/ ℹ ｢wds｣: webpack output is served from / ℹ ｢wds｣: Content not from webpack is served from /Users/shouminotaku node:internal/crypto/hash:71 this[kHandle] = new _Hash(algorithm, xofLen); ^ Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:71:19) at Object.createHash (node:crypto:140:10) at module.exports (/Users/shouminotaku/node_modules/webpack/lib/util/createHash.js:135:53) at NormalModule._initBuildHash (/Users/shouminotaku/node_modules/webpack/lib/NormalModule.js:417:16) at handleParseError (/Users/shouminotaku/node_modules/webpack/lib/NormalModule.js:471:10) at /Users/shouminotaku/node_modules/webpack/lib/NormalModule.js:503:5 at /Users/shouminotaku/node_modules/webpack/lib/NormalModule.js:358:12 at /Users/shouminotaku/node_modules/loader-runner/lib/LoaderRunner.js:373:3 at iterateNormalLoaders (/Users/shouminotaku/node_modules/loader-runner/lib/LoaderRunner.js:214:10) at Array.<anonymous> (/Users/shouminotaku/node_modules/loader-runner/lib/LoaderRunner.js:205:4) { opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ], library: 'digital envelope routines', reason: 'unsupported', code: 'ERR_OSSL_EVP_UNSUPPORTED' } Node.js v19.5.0 error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
コマンドの実行に失敗し、終了コード 1 が表示された
ということでリンク先を見てみる
https://classic.yarnpkg.com/en/docs/cli/run
よくわからないが、
$ yarn run ~
.xmlで指定されたスクリプトの〜が実行されるようだ
とりあえず実行時に
$yarn run
実行時にスクリプトを表示させてみる
$ yarn run yarn run v1.22.19 info Commands available from binary scripts: acorn, ansi-html, atob, ew _Hash(algorithm, xofLen); ^ ・ ・ ・ ・ Node.js v19.5.0 error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
とりあえずstartは使用できるようだ。
もしかするとエラーの原因は、node.jsのバージョンが新しすぎることかもしれない。
https://ki-hi-ro.com/what-is-nuxt-js/
参考にするも、実際にどうしたらいいのかわからない。
エラーを突っ込んでそのまま検索してみる
Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:71:19) at Object.createHash (node:crypto:140:10) at module.exports . .
Node.js v16にダウングレードしてOpenSSL プロバイダーを有効にすることで問題が解決するようだ。
https://gyazo.com/e0679ef39fe32007058cfa6f3e824264
OpenSSL プロバイダーを有効にする
$ export NODE_OPTIONS=--openssl-legacy-provider
再び
$ yarn start node: --openssl-legacy-provider is not allowed in NODE_OPTIONS
リトライ！
$ yarn start yarn run v1.22.19 $ webpack-dev-server --mode development --watch ℹ ｢wds｣: Project is running at http://localhost:8080/ ℹ ｢wds｣: webpack output is served from / ℹ ｢wds｣: Content not from webpack is served from /Users/shouminotaku ✖ ｢wdm｣: Hash: dac425af1070646b7cc5 . . . ERROR in Entry module not found: Error: Can't resolve './src' in '/Users/shouminotaku' ERROR in multi (webpack)-dev-server/client?http://localhost:8080 ./src Module not found: Error: Can't resolve './src' in '/Users/shouminotaku' @ multi (webpack)-dev-server/client?http://localhost:8080 ./src main[1]
同じようなエラーログがないかググってみる
https://teratail.com/questions/220103
$yarn run
ではなく試しに
$npm run build
をコマンドて打つ
・・しかし
ERROR in Entry module not found: Error: Can't resolve './src' in '/Users/shouminotaku' ERROR in multi (webpack)-dev-server/client?http://localhost:8080 ./src Module not found: Error: Can't resolve './src' in '/Users/shouminotaku' @ multi (webpack)-dev-server/client?http://localhost:8080 ./src main[1]
↓日本語にしてみる
ERROR in Entry module not found: Error: /Users/shouminotaku' 内の './src' を解決できません。 ERROR in multi (webpack)-dev-server/client?http://localhost:8080 ./src モジュールが見つかりません。Error: /Users/shouminotaku' にある './src' を解決できません。
/Users/shouminotaku' 内に'./src'フォルダはあるのにどういうことだろうか
https://gyazo.com/d21e4755aaa8c42abcea6d1c3029e5a8
https://stackoverflow.com/questions/69394632/webpack-build-failing-with-err-ossl-evp-unsupported
どうやらNode.js17以降のバージョンではOpenSSLの関係でWebpack 4.xは動作できなくなっているようだ。
NODE_OPTIONS=--openssl-legacy-provider
Node.js 18.14.0でやってみることにしよう
https://nodejs.org/ja/download/releases/
Node.js 18.14.0 をダウンロードしてみる
This package has installed: • Node.js v18.14.0 to /usr/local/bin/node • npm v9.3.1 to /usr/local/bin/npm Make sure that /usr/local/bin is in your $PATH.
上記記事の手順を参考にやってみました。
$ yarn start yarn run v1.22.19 $ webpack-dev-server --mode development --watch ℹ ｢wds｣: Project is running at http://localhost:8080/ ℹ ｢wds｣: webpack output is served from / ℹ ｢wds｣: Content not from webpack is served from /Users/shouminotaku node:internal/crypto/hash:71 this[kHandle] = new _Hash(algorithm, xofLen); ^ Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:71:19) at Object.createHash (node:crypto:133:10) at module.exports (/Users/shouminotaku/node_modules/webpack/lib/util/createHash.js:135:53) at NormalModule._initBuildHash (/Users/shouminotaku/node_modules/webpack/lib/NormalModule.js:417:16) at handleParseError (/Users/shouminotaku/node_modules/webpack/lib/NormalModule.js:471:10) at /Users/shouminotaku/node_modules/webpack/lib/NormalModule.js:503:5 at /Users/shouminotaku/node_modules/webpack/lib/NormalModule.js:358:12 at /Users/shouminotaku/node_modules/loader-runner/lib/LoaderRunner.js:373:3 at iterateNormalLoaders (/Users/shouminotaku/node_modules/loader-runner/lib/LoaderRunner.js:214:10) at Array.<anonymous> (/Users/shouminotaku/node_modules/loader-runner/lib/LoaderRunner.js:205:4) { opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ], library: 'digital envelope routines', reason: 'unsupported', code: 'ERR_OSSL_EVP_UNSUPPORTED' } Node.js v18.14.0 error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
エラーは変わらず、nodeのダウングレードをしてみる
export NODE_OPTIONS=--openssl-legacy-provider
↑こちらをターミナルに打ってみるもエラーは変わらず
Node.js 18.14.0をNode.js v16にダウングレードしてみる
$ yarn start yarn run v1.22.19 $ webpack-dev-server --mode development --watch ℹ ｢wds｣: Project is running at http://localhost:8080/ ℹ ｢wds｣: webpack output is served from / ℹ ｢wds｣: Content not from webpack is served from /Users/shouminotaku ✖ ｢wdm｣: Hash: 7a5d982e4ec988dd06b4 ・ ERROR in Entry module not found: Error: Can't resolve './src' in '/Users/shouminotaku' ERROR in multi (webpack)-dev-server/client?http://localhost:8080 ./src Module not found: Error: Can't resolve './src' in '/Users/shouminotaku' @ multi (webpack)-dev-server/client?http://localhost:8080 ./src main[1]
エラーの内容がかわった（元に戻った）
https://speakerdeck.com/tomof/webpackgahe-gu-bi-yao-de-he-gu-fen-kariduraifalseka?slide=36
webpackのentryを指定してみる
webpack.config.js
{ "name": "01", "version": "1.0.0", "main": "./src/index.js",//修正箇所 "license": "MIT", "dependencies": { "ejs-compiled-loader": "1.1.0", "html-webpack-plugin": "3.2.0", "webpack": "4.46.0", "webpack-cli": "3.3.12", "webpack-dev-server": "3.10.1" }, "scripts": { "start": "react-scripts start" } }
node_modulesを消してyarn.lockを削除して
$yarn startするも
エラーは変わらず・・
ありがとうございます。
以下の通りです。
```
$ sh -c 'pwd; ls -A | head'
/Users/shouminotaku/Frontend.Basic/1-EJS/01
package.json
src
webpack.config.js
```
srcフォルダの中身は
```
$ sh -c 'pwd; ls -A | head'
/Users/shouminotaku/Frontend.Basic/1-EJS/01/src
.bash_profile
index.ejs
index.js
```
でした
回答後に質問を重ねてしまい恐縮ですが、例でご使用のパッケージのバージョンが全体的にかなり古いのには何か理由がありますか？
パッケージのセキュリティをテストする `yarn audit` を実行してみたところ、提示していただいている `package.json` からは19件の脆弱性が見つかり、うち4件は重大度が致命的（遠隔地から任意のコードを実行できるレベルのもの）でした。
もし主に参考にしているサイトやブログなどがあれば、教えていただきたいです。
回答1件
0
再現
完全な情報をいただいていないため正確な相違点はわかりませんが、私のMacでは以下の構成で想定通りの動作をしました。
console
1$ yarn install # "package.json" に書かれたパッケージのインストール 2yarn install v1.22.19 3# 実行メッセージ中略 4✨ Done in 50.54s. 5 6$ yarn webpack # コンパイル 7yarn run v1.22.19 8# 実行メッセージ中略 9✨ Done in 1.10s. 10 11$ yarn start # "package.json" > "scripts" > "start" をスタート 12yarn run v1.22.19 13# 実行メッセージ中略 14ℹ ｢wdm｣: Compiled successfully.
フォルダ構成
tree
1. 2├── package.json 3├── src 4│ ├── index.ejs // `<p>/index.htmlです。</p>` と書かれたファイル 5│ └── index.js // 空のjsファイル 6├── webpack.config.js 7└── yarn.lock 8 92 directories, 5 files
ファイル内容
json
1{ 2 "name": "teratail-dbu3qztuqpgply", 3 "version": "1.0.0", 4 "main": "index.js", // この行はコンパイルには無関係 5 "license": "MIT", 6 "devDependencies": { // 本番サーバーで呼び出さないパッケージは `dependencies` ではなく `devDependencies` に書くことが推奨される 7 "ejs-compiled-loader": "1.1.0", 8 "html-webpack-plugin": "3.2.0", 9 "webpack": "4.46.0", 10 "webpack-cli": "3.3.12", 11 "webpack-dev-server": "3.10.1" 12 }, 13 "scripts": { 14 "start": "webpack-dev-server --mode development --watch" 15 } 16}
js
1const HtmlWebpackPlugin = require("html-webpack-plugin"); 2 3module.exports = { 4 plugins: [ 5 new HtmlWebpackPlugin({ 6 filename: "./index.html", 7 template: "./src/index.ejs", 8 }), 9 ], 10 module: { 11 rules: [ 12 { 13 test: /\.ejs$/, 14 use: "ejs-compiled-loader", 15 }, 16 ], 17 }, 18 devServer: { 19 compress: true, 20 contentBase: "./dist", // この行を追加すると http://localhost:9000/ で表示されるフォルダが ./dist 下の index.html になる 21 port: 9000, 22 }, 23};
実行環境
Nodeのバージョンは19です。
console
1$ node -v 2v19.6.0
Yarnのバージョンは1.22.19です。
console
1$ yarn -v 21.22.19
投稿2023/02/09 17:57
編集2023/02/09 18:25総合スコア248
あなたの回答
tips
プレビュー
