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

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

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

Q&A

1回答

2426閲覧

パスは通っているはずだが$ yarn startできない ERROR in Entry module not found: Error: Can't resolve './src' in

-kiritorimasen-

総合スコア0

0グッド

0クリップ

投稿2023/02/07 06:29

実現したいこと

$ 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 . .

どうやら
https://stackoverflow.com/questions/69692842/error-message-error0308010cdigital-envelope-routinesunsupported

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

https://stackoverflow.com/questions/72866798/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.

参考記事
https://qiita.com/yoshiwo/items/06be0d5f6d6b77acf0ee#%E3%83%90%E3%82%B0%E4%BF%AE%E6%AD%A3%E3%81%A7%E3%82%84%E3%81%A3%E3%81%9F%E3%81%93%E3%81%A8

その元記事
https://qiita.com/yoshiwo/items/06be0d5f6d6b77acf0ee#%E3%83%90%E3%82%B0%E4%BF%AE%E6%AD%A3%E3%81%A7%E3%82%84%E3%81%A3%E3%81%9F%E3%81%93%E3%81%A8

上記記事の手順を参考にやってみました。

$ 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のダウングレードをしてみる

https://stackoverflow.com/questions/69692842/error-message-error0308010cdigital-envelope-routinesunsupported

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するも

エラーは変わらず・・

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

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

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

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

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

itepechi

2023/02/07 11:34

フォルダの構成に問題がある気がします。シェルで以下のコマンドを実行した際の出力を教えていただけませんか? sh -c 'pwd; ls -A | head'
-kiritorimasen-

2023/02/08 00:41 編集

ありがとうございます。 以下の通りです。 ``` $ 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 ``` でした
itepechi

2023/02/09 18:05

回答後に質問を重ねてしまい恐縮ですが、例でご使用のパッケージのバージョンが全体的にかなり古いのには何か理由がありますか? パッケージのセキュリティをテストする `yarn audit` を実行してみたところ、提示していただいている `package.json` からは19件の脆弱性が見つかり、うち4件は重大度が致命的(遠隔地から任意のコードを実行できるレベルのもの)でした。 もし主に参考にしているサイトやブログなどがあれば、教えていただきたいです。
guest

回答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
itepechi

総合スコア248

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問