Why does webpack not like React.StrictMode

Question

When I run npx webpack-cli --analyze --node-env development I get an error about it not liking <React.StrictMode>:

Webpack Bundle Analyzer is started at http://127.0.0.1:8888
Use Ctrl+C to close it
Hash: 24852f2f5b5cef02cfe2
Version: webpack 4.42.0
Time: 57ms
Built at: 08/11/2021 2:53:12 PM
  Asset      Size  Chunks             Chunk Names
main.js  4.09 KiB    main  [emitted]  main
Entrypoint main = main.js
[./src/index.js] 316 bytes {main} [built] [failed] [1 error]

ERROR in ./src/index.js 9:2
Module parse failed: Unexpected token (9:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| ReactDOM.render(
>   <React.StrictMode>
|     <App />
|   </React.StrictMode>,

I am using the default config from .\node_modules\react-scripts\config\webpack.config.js. Why does webpack not like React.StrictMode?

@Sun If I remove the `` tags, then it has the exact same error on `` then. — Randy, Aug 14 '21 at 21:07
Yes, because it can't parse JSX at all. It can't parse the syntax (JSX), which isn't standard JavaScript syntax. I don't know about webpack-bundle-analyzer, you'd have to make it use Babel or TS so it can transpile JSX into normal JS, and then the usual logic can follow. — Sun, Aug 14 '21 at 21:11

score 0 · Accepted Answer · answered Aug 14 '21 at 20:45

I found an answer, just use source-map-explorer instead:

"scripts": {
    "start": "rimraf ./build && react-scripts start",
    "build": "react-scripts build",
    "analyze": "source-map-explorer 'build/static/js/*.js'",
    "test": "cross-env CI=true react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "lint": "eslint ./src/"
  },

Why does webpack not like React.StrictMode

1 Answers1