[解決済み] npm run build` コマンドを実行すると、エラー `TypeError: MiniCssExtractPlugin はコンストラクタではありません`。
2022-03-03 09:52:12
質問
reactを使ってアプリを作っているのですが、以下のような環境で正常に動作します。
npm start
しかし、アプリをビルドしようとすると、以下のエラーが表示されます。
PS D:\ ****\ **\*\profile> npm run build
> [email protected] build
> react-scripts build
D:\ ****\ **\profile\node_modules\react-scripts\config\webpack.config.js:664
new MiniCssExtractPlugin({
^
TypeError: MiniCssExtractPlugin is not a constructor
at module.exports (D:\Documents\Project\React\profile\node_modules\react-scripts\config\webpack.config.js:664:9)
at Object.<anonymous> (D:\Documents\Project\React\profile\node_modules\react-scripts\scripts\build.js:58:16)
at Module._compile (node:internal/modules/cjs/loader:1101:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
at node:internal/main/run_main_module:17:47
を使っています。
<テーブル
パッケージ名
バージョン
ノード
16.13.2
npm
8.1.2
npx
8.1.2
これは私の
package.json
ファイルを作成します。
{
"name": "profile",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
また、nodeパッケージ全体を再インストールしようとしましたが、何度もこのエラーが発生します。
どうすればいいですか?
mini-css-extract-pluginのバージョン2.5.0にアップデートがあります。で追加して一時的に直しました。
package.json
:
"overrides": {
"mini-css-extract-plugin": "2.4.5"
}
を使用します。
npm
のバージョンに初挑戦します。
npm i -D --save-exact [email protected]
関連
-
[解決済み] リソースの読み込みに失敗しました: net::ERR_CONNECTION_REFUSED : Nodejs
-
[解決済み】Express.js req.bodyが未定義です。
-
[解決済み】モジュール '@babel/core' が見つかりません。
-
[解決済み】passport.js passport.initialize() ミドルウェアが使用されていません。
-
[解決済み】POSTできない/expressを使用するとエラーが発生する
-
[解決済み] ブラウザで動作しているURLで「connect ETIMEDOUT」エラーが発生する原因は何ですか?
-
[解決済み] Node.jsで「btoaが定義されていない」エラーが発生する
-
[解決済み] npm install エラー - ローカルの発行者証明書を取得できません。
-
[解決済み] Npmエラー - Windows NT - 解決方法
-
[解決済み] node.jsのセットアップウィザードが途中で終了してしまう
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Nodejs: Errorを解決する方法。ENOENT: そのようなファイルまたはディレクトリがありません
-
[解決済み】AWS STS AssumeRoleへのアクセスを可能にする方法
-
[解決済み】Node.jsのエラーECONNRESETをデバッグするにはどうすればよいですか?
-
[解決済み】ENOENT, そのようなファイルまたはディレクトリがありません。
-
[解決済み】MongoDBでコレクションを日付で並べ替えるには?
-
[解決済み】モジュール '@babel/core' が見つかりません。
-
[解決済み] Node.jsで「btoaが定義されていない」エラーが発生する
-
[解決済み] S3 Bucket に何かを送信しようとすると、AWS Missing credentials が表示される (Node.js)
-
[解決済み] nvm は npm config の "prefix" オプションと互換性がありません。
-
[解決済み] MongoNetworkError: 最初の接続でサーバー [localhost:27017] への接続に失敗 [MongoNetworkError: connect ECONNREFUSED 127.0.0.1:27017] 。