React-app-rewired: for react-scripts 2.1.5, webpack.config.dev.js does not exit

[lcyuhe]

Hi, I upgrade "react-scripts" from 1.1.4 to 2.1.5. There is not a file called "webpack.config.dev.js" in "/node_modules/react-scripts/config/webpack.config.dev". Only "webpack.config.js". What should I do now?

[dawnmist]

If you are using CRA 1.x, or react-scripts-ts, you need to remain with the 1.6.2 release of react-app-rewired. To downgrade, type npm install [email protected] or yarn add [email protected].

There were changes in CRA 2.x that included merging the webpack.config.dev.js and webpack.config.prod.js files into a single file webpack.config.js. While react-app-rewired _tries_ to verify which version of CRA you're using and to fallback to the separate files for older versions, that test only works properly with CRA itself - not with alternative versions of react-scripts like react-scripts-ts.

Note for below: by "customised scripts", I mean things like "react-scripts-ts".

Basic compatibility:

• If the version of react-scripts that you are using or that the customised scripts is based on is for CRA 1.x, use react-app-rewired 1.x branch (last release was 1.6.2).
• If the version of react-scripts that you are using or that the customised scripts is based on is for CRA 2.x, use the react-app-rewired 2.x branch.
• If you are using a customised version of react-scripts that was based on CRA 2.x, ask the people providing the customised version to pull in the CRA 2.1.2 change to the webpack config scripts that merged them together so that you can use the react-app-rewired branch 2.x properly.

[lcyuhe]

It works for me. Thank you very much!

[navono]

@dawnmist What you mean is CRA 2.x with react-scripts-ts also not compatible with react-app-rewired 2.x? like this:

  "scripts": {
    "start": "react-app-rewired start --scripts-version react-scripts-ts",
    "build": "react-app-rewired build --scripts-version react-scripts-ts",
    "test": "react-scripts-ts test --env=jsdom",
    "eject": "react-scripts-ts eject"
  },
  "dependencies": {
    "antd": "^3.15.2",
    "customize-cra": "^0.2.12",
    "react": "^16.8.5",
    "react-dom": "^16.8.5",
    "react-app-rewired":"^2.1.1",
    "react-scripts-ts": "3.1.0"
  },

[dawnmist]

@navono react-scripts-ts from create-react-app-typescript is based on CRA 1.x. Not CRA 2.x. If you're running with --scripts-version react-scripts-ts, you're NOT using CRA 2.x's build system at all (even if you originally installed with CRA 2.x, by running react-scripts-ts for start/build/test you are _no longer_ using CRA 2.x's build system).

There was an attempt to update react-scripts-ts to CRA 2.x, and a couple of test packages published (versions 4.x). The merge request that those packages were based on - https://github.com/wmonk/create-react-app-typescript/pull/409 - was eventually closed unmerged, and those test packages had several reported issues and never passed to "stable" release. The project itself is now archived, so it will not receive any future updates.

CRA 2.1.2 merged the dev and prod version of the webpack config files together, so that instead of webpack.config.dev.js and webpack.config.prod.js they only had webpack.config.js. The code in react-app-rewired checks if the version number in the scripts being used is >= 2.1.2. Unfortunately, it doesn't also check if you're using the official react-scripts package when it checks that. This means that since react-scripts-ts has a version number greater than 2.1.2, it is mis-identified as needing to use the merged webpack config file. But react-scripts-ts does not HAVE a merged config - it still uses the older separate dev + prod config files - and thus any version of react-app-rewired that contains the compatibility fix for CRA 2.1.2 or later will throw errors for react-scripts-ts and fail to run the start or build scripts.

That compatibility fix was released in react-app-rewired 2.0.

The other complication is that react-scripts-ts also does _not_ use Webpack 4 either - it uses webpack 3.8.1. That causes other related issues. Most of the new rewire packages released for react-app-rewired 2.x expect to be used with Webpack 4, and the chance of incompatibilities is very high as a result. The original list of rewires for react-app-rewired were all written with Webpack 2/3 in mind - which mean that those match up with the build system used in react-scripts-ts.

All of these issues are already documented in this thread, in the react-app-rewired Readme, and in the original react-scripts-ts thread that was created when react-app-rewired 2.0 was originally released.

[navono]

@dawnmist Thanks for the detailed explain. Looks like should give up on react-scripts-ts.