webpackで、下記のエラーメッセージが表示された場合の対応方法です。
結論としては、laravel-mix のバージョンによって、書き方を変更する必要があります。
この場合のエラーでは、 laravel-mix 6 の書き方に変更すれば解決します。
エラーメッセージ
|
1 2 3 4 5 6 7 8 9 10 11 |
[webpack-cli] Error: mix.react() is now a feature flag. Use mix.js(source, destination).react() instead at React.register (/home/sample.jp/public_html/dev/node_modules/laravel-mix/src/components/React.js:45:19) at Object.components.<computed> [as react] (/home/sample.jp/public_html/dev/node_modules/laravel-mix/src/components/ComponentRegistrar.js:163:49) at Object.<anonymous> (/home/sample.jp/public_html/dev/webpack.mix.js:7:4) at Module._compile (node:internal/modules/cjs/loader:1103:14) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1155:10) at Module.load (node:internal/modules/cjs/loader:981:32) at Function.Module._load (node:internal/modules/cjs/loader:822:12) at Module.require (node:internal/modules/cjs/loader:1005:19) at require (node:internal/modules/cjs/helpers:102:18) at module.exports (/home/sample.jp/public_html/dev/node_modules/laravel-mix/setup/webpack.config.js:11:5) |
package.json
package.json に定義されている laravel-mix のバージョンを確認します。
|
1 2 3 4 5 6 7 8 |
"devDependencies": { "@babel/preset-react": "^7.18.6", "cross-env": "^7.0.3", "laravel-mix": "^6.0.49", "resolve-url-loader": "^5.0.0", "sass": "^1.58.0", "sass-loader": "^12.6.0" } |
laravel-mixのバージョンが 6 になっていることを確認します。
変更前
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
let mix = require('laravel-mix'); Mix.manifest.refresh = () => {}; mix.setPublicPath('./webroot') .react('resources/js/app.js', 'webroot/js') .combine([ 'resources/css/base.css', 'resources/css/foundation-icons.css', 'resources/css/style.css', ], 'webroot/css/main.css') .copyDirectory('resources/css/foundation-icons', 'webroot/css/foundation-icons') .version(); |
変更後
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
let mix = require('laravel-mix'); Mix.manifest.refresh = () => {}; mix.setPublicPath('./webroot') .js('resources/js/app.js', 'webroot/js') .react() .combine([ 'resources/css/base.css', 'resources/css/foundation-icons.css', 'resources/css/style.css', ], 'webroot/css/main.css') .copyDirectory('resources/css/foundation-icons', 'webroot/css/foundation-icons') .version(); |
参考サイト
こちらの記事を参考にさせていただきました。
Laravel6.2で「Hello React!」を表示するまで躓いた話
https://qiita.com/maegya527/items/8a9adfad4a7a15506c73
