React-app-rewired: Cannt find module react-scripts-ts/config/webpack.config

[ZhenlyChen]

$ npm start

> react-app-rewired start --scripts-version react-scripts-ts

internal/modules/cjs/loader.js:589
    throw err;
    ^

Error: Cannot find module 'D:\my_project\node_modules\react-scripts-ts/config/webpack.config'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:587:15)
    at Function.Module._load (internal/modules/cjs/loader.js:513:25)
    at Module.require (internal/modules/cjs/loader.js:643:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.<anonymous> (D:\my_project\node_modules\react-app-rewired\scripts\start.js:18:23)
    at Module._compile (internal/modules/cjs/loader.js:707:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:718:10)
    at Module.load (internal/modules/cjs/loader.js:605:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:544:12)
    at Function.Module._load (internal/modules/cjs/loader.js:536:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `react-app-rewired start --scripts-version react-scripts-ts`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\...\AppData\Roaming\npm-cache\_logs\2019-01-19T10_56_58_751Z-debug.log

There are no webpack.config Inreact-scripts-ts/config/:

/node_modules/react-scripts-ts/config/
.
├── env.js
├── jest
│   ├── babelTransform.js
│   ├── cssTransform.js
│   ├── fileTransform.js
│   └── typescriptTransform.js
├── paths.js
├── polyfills.js
├── webpack.config.dev.js
├── webpack.config.prod.js
└── webpackDevServer.config.js

[gino8080]

same here

[TinyDurk]

How to solve it?

[dawnmist]

This has been caused by recent changes to CRA (2.1.2) where they merged the webpack.config.dev.js and webpack.config.prod.js into a single file webpack.config.js. See https://github.com/timarney/react-app-rewired/issues/343 and https://github.com/timarney/react-app-rewired/issues/345 for more details on the change.

The adjustment to paths made in react-app-rewired in order to continue to be able to be used with CRA looks for a react-scripts version number greater than or equal to 2.1.2. The react-scripts-ts version number has been higher than that for the last ~18 months, so react-app-rewired is treating it according to the merged webpack config instead of the split one.

To solve it, you'll need to install an older version of react-app-rewired that doesn't have this change. I believe the last version of react-app-rewired that will be compatible with react-scripts-ts is version 1.6.2. The versions for 2.x have the breaking change to support CRA 2.1.2 and beyond that is misfiring on react-scripts-ts.

Use yarn add [email protected] or npm install [email protected] to step back to the last of the 1.x versions of react-app-rewired - it will install the older version and lock the version number to exactly that version so that it doesn't get upgraded to a newer version accidentally in future.

[TinyDurk]

@dawnmist Thank you:)

[myadzel]

Same problem.

[dawnmist]

@myadzel As described 2 comments above yours, use a 1.x version of react-app-rewired instead of a 2.x version to solve the problem.

yarn add [email protected] or npm install [email protected]

[myadzel]

Yes, I have seen these comments. In my case, I just found a way to stop using rewired.

[Flui]

@myadzel do you want to share your way with us?

[Justin-lu]

@Flui You can try customize-cra for CRA 2.0

[greggbjensen]

Any update on a fix for this? The react-app-rewired is a great library, but support for TypeScript is important for us.

[dawnmist]

Please note: I also use react-scripts-ts and react-app-rewired, with all 3 options for modifying webpack, devServer and jest. I haven't migrated to CRA 2.x as there are still things that I actively use from react-scripts-ts that are not yet supported.

The "fix" for this is as I have already stated twice in this thread - _downgrade to react-app-rewired 1.6.2_.

React-scripts-ts provides typescript support for CRA 1.x, and is now deprecated/no longer being maintained. This means that changes in react-app-rewired to support CRA 2.x using a different version of Webpack _do not apply to react-scripts-ts and are frequently not compatible with the version of Webpack that react-scripts-ts uses_.

For typescript support, you have 2 choices:

• If you migrate to CRA 2.x's typescript support, use react-app-rewired 2.x, which is designed to be compatible with Webpack 4 & CRA 2.x.
• If you stay with react-scripts-ts (which provides typescript support for CRA 1.x) use react-app-rewired 1.6.2, which was designed to be compatible with Webpack 3 & CRA 1.x.

The webpack configuration changes between CRA 2.x and CRA 1.x/react-scripts-ts are not compatible.

The new plugins for CRA 2.x are based on Webpack 4 - which react-scripts-ts _does not use_. This means that using those can often cause problems with react-scripts-ts's Webpack 3 configuration.

The plugins that are compatible with react-app-rewired 1.x _are_ still compatible with react-scripts-ts Webpack 3 configuration, as they are based on Webpack 3.

You are not losing any functionality by downgrading to react-app-rewired 1.6.2 - you are instead using the version that is compatible with react-scripts-ts's build system.