라라벨에 react 설치 시 온갓 에러 정리

오늘 하루 종일 에러와 함께 했다.
어쪄다 보니 결국 해결 했지만...정확히 어떻게 고친지는 모르겠다.
그래도 나중을 위해 기록한다.

블로그와 유튜브를 보면서 laravel에 react 설치 했다.

처음은 블로그를 보고 했는데 run dev에서 에러가 났다.
1. 첫번째 에러는 아마

[webpack-cli] Error: Unknown option '--hide-modules'
...

이였다.
구글링을 하니 이게 먼저 나와서 vote가 가장 많은 걸로 똑같이 따라 했지만...안됐다.
나중에 보니...오히려 바꾼게 더 문제가 되서 다시 원상 복구했다.

2. 두번째 에러는 아마

Error: mix.react() is now a feature flag

지금 보면 이 에러는

//webpack.mix.js 파일

mix.js('resources/js/app.js', 'public/js')
    .react();

이렇게만 바꿔주면 됐다.
그리고 여기에 답들도 그렇게 하라고 했는데 다른 2곳에서 같은 말을 한 이상한 답에 포커스를 맞춰 미스가 났다.
미스 1

rm -rf node_modules
rm package-lock.json yarn.lock
npm cache clear --force
npm install

노드 패케지들도 다시 다 설치 해보고

미스 2 같은말 하길래 다시 해보고

laravel 공식 다큐도 다시 살펴보고

package.json 파일에 "dependencies":{ "webpack": "^5.70.0"} 넣었다가 "devDependencies": { "webpack": "^5.70.0"} 로도 옴겨 봤다가...결국 원상 복구하고

그러다가...

3. 세번째 에러가 났다.

[webpack-cli] Invalid configuration object. Webpack has been initialised

지금 보니 왜 그랬는 지 모르지만
여기를 따라했다. 그래서 laravel-mix도 업데이트 해봤다. 그러나 해결 되지 않았다.

4. 4번째 에러

laravel react Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

여기 가보니 이친구도 어찌저찌 하다가 고쳤는데 어떻게 고친지 모르겟으나 webpack 쪽을 건드려야 한다는 힌트를 줬다.

5. 5번째 에러는 webpack을 건드리다가 생겼다.

Error: spawn node_modules/webpack/bin/webpack.js ENOENT

6. 6번째 에러는 webpack을 dependency에 넣었다가 생겼다.

conflicting peer dependency: webpack@4.46.0 npm WARN node_modules/webpack npm WARN peer webpack@"^4.0.0" from friendly-errors-webpack-plugin@2.0.0-beta.2

7. 7번째 에러는 npm은 최신화 하는 과정에서 접근 권한 에러가 떴다.

npm install npm@latest -g npm ERR! code EACCES npm ERR! syscall rename npm ERR! path /usr/local/lib/node_modules/npm npm ERR! dest /usr/local/lib/node_modules/.npm-i9nnxROI npm ERR! errno -13

이건 간단히 sudo npm install npm@latest -g 로 고쳤다.

어찌져지 하다 보니,
다시 세번째 에러로 돌아왔다.

[webpack-cli] Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.output.chunkFilename should be a string.
   -> The filename of non-entry chunks as relative path inside the `output.path` directory.
 - configuration.stats has an unknown property 'preset'. These properties are valid:
   object { all?, assets?, assetsSort?, builtAt?, cached?, cachedAssets?, children?, chunkGroups?, chunkModules?, chunkOrigins?, chunks?, chunksSort?, colors?, context?, depth?, entrypoints?, env?, errorDetails?, errors?, exclude?, excludeAssets?, excludeModules?, hash?, logging?, loggingDebug?, loggingTrace?, maxModules?, moduleAssets?, moduleTrace?, modules?, modulesSort?, nestedModules?, optimizationBailout?, outputPath?, performance?, providedExports?, publicPath?, reasons?, source?, timings?, usedExports?, version?, warnings?, warningsFilter? }

여기 까지 와서

여기서 아래와 같이 해보라고 해서

npm uninstall webpack
npm install webpack
npm audit fix

하니 마법같이 모든 에러가 사라지고 found 0 vulnerabilities가 떴다.

이번에도 안되겠지... 하고
npm run dev를 하니...

✔ Mix
  Compiled successfully in 6.87s

됐다...!