npx create-react-app@next --scripts-version=@next --template=cra-template@next my-js-app
npx create-react-app@next --scripts-version=@next --template=typescript@next my-ts-app
To update an existing app you can change the react-scripts version in package.json to next and then run yarn or npm install
You can see a list of all the changes in the 4.0 release here
If I delete node_modules and run again I get:
error Couldn't find package "@pmmmwh/react-refresh-webpack-plugin@0.4.1" required by "react-scripts@next" on the "npm" registry.
I've been getting some similar npm errors in the last few minutes on unrelated projects. I think they might be having an issue. Rerunning yarn or npm seems to have fixed it for me. Hopefully this is just a temporary problem.
npm issue with installing scoped packages: https://twitter.com/npmstatus/status/1291296875572629504?s=21
Installing v4 on a fairly large project didnt work for me, I got the following error.
/home/x/app/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:210
appTsConfig.compilerOptions[option] = suggested;
^
TypeError: Cannot add property noFallthroughCasesInSwitch, object is not extensible
at verifyTypeScriptSetup (/home/x/app/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:210:45)
at Object.<anonymous> (/home/x/app/node_modules/react-scripts/scripts/start.js:31:1)
at Module._compile (internal/modules/cjs/loader.js:1138:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
at Module.load (internal/modules/cjs/loader.js:986:32)
at Function.Module._load (internal/modules/cjs/loader.js:879:14)
at Module.require (internal/modules/cjs/loader.js:1026:19)
at require (internal/modules/cjs/helpers.js:72:18)
at Object.<anonymous> (/home/x/app/node_modules/react-app-rewired/scripts/start.js:35:1)
at Module._compile (internal/modules/cjs/loader.js:1138:30)
error Command failed with exit code 1.
For anyone else who comes across this there is a temporary fix here: facebook/create-react-app#9429
Going to revert back to 3.x for the meantime. Looking forward to fast refresh though 🙂
There was an ongoing issue affecting the installation of scoped packages. The issue is now fixed 😊😊
the app is getting deleted because of the following error:
error @typescript-eslint/eslint-plugin@3.8.0: The engine "node" is incompatible with this module. Expected version "^10.12.0 || >=12.0.0". Got "11.14.0"
error Found incompatible module.
Please report any problems by opening an issue on GitHub
I tried it out and I found that it works for both new projects & existing projects that I've been working on 👍
the app is getting deleted because of the following error:
error @typescript-eslint/eslint-plugin@3.8.0: The engine "node" is incompatible with this module. Expected version "^10.12.0 || >=12.0.0". Got "11.14.0" error Found incompatible module.
In case helps someone. After reading the error message again. I noticed I was using node 11.14. The package in mention must be incompatible with that version of node. I switched to node 12
% nvm use 12
Now using node v12.16.3 (npm v6.14.4)
And now I was able to create a new app with typescript support.
I have one app that's started having very odd behavior in tests with the upgrade. I'll put together a repro asap.
It's this one: https://github.com/kentcdodds/react-performance
Alrighty, I've got an extremely minimal reproduction. I hope it helps. I'm a bit baffled TBH...
https://github.com/kentcdodds/react-scripts-test-upgrade-bug
Made an issue to track this: facebook/create-react-app#9520
Found another issue. This one with hot reloading. It's a little complicated unfortunately.
With this file: https://github.com/kentcdodds/react-fundamentals/blob/master/src/exercise/01.html
In v3, editing that file would trigger a reload. In v4 it does not. I'll try to dig into that a bit.
I am getting a somewhat cryptic error.
I tracked down it's coming from https://github.com/webpack/webpack/blob/65710679fbb46534ada2ea93257bbfea573fc288/lib/Template.js#L221 but I wasn't able to find out in what cases undefined happens there.
It should be probably improved on webpack side, but it's weird because 4.0 bumped webpack by a minor version only and this part hasn't changed. Hence I assume it's caused by some change in CRA config.
Awesome 🎉 can't wait to try!
Installing v4 on a fairly large project didnt work for me, I got the following error.
/home/x/app/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:210 appTsConfig.compilerOptions[option] = suggested; ^ TypeError: Cannot add property noFallthroughCasesInSwitch, object is not extensible at verifyTypeScriptSetup (/home/x/app/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:210:45) at Object.<anonymous> (/home/x/app/node_modules/react-scripts/scripts/start.js:31:1) at Module._compile (internal/modules/cjs/loader.js:1138:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10) at Module.load (internal/modules/cjs/loader.js:986:32) at Function.Module._load (internal/modules/cjs/loader.js:879:14) at Module.require (internal/modules/cjs/loader.js:1026:19) at require (internal/modules/cjs/helpers.js:72:18) at Object.<anonymous> (/home/x/app/node_modules/react-app-rewired/scripts/start.js:35:1) at Module._compile (internal/modules/cjs/loader.js:1138:30) error Command failed with exit code 1.
I hit this too, the solution in facebook/create-react-app#9429 (comment) helped resolve it
I've got an error referencing images from public folder in css files. It was working fine in the latest stable version. Are there any configurations I should change?
background: url("/assets/arrow.svg"); /* Compile error: Can't resolve '/assets/arrow.svg' */
Tried out 4.0.0-next.98 today (coming from 3.4.3) in a medium-sized typescript monorepo. Our app builds and runs just fine.
Unfortunately some of our Jest tests broke. It looks like ts-jest is no longer getting used. Previously (with CRA3) we were able to specify a transform in the jest section of package.json like this:
"transform": {
"^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/ts-jest"
},This allowed us to use TypeScript features not supported by Babel (like emitDecoratorMetadata for TypeORM).
Looking at the v3.4.1...master diff, I'm not sure what broke it. Perhaps something about Jest 26?
Please do not report issues here. Open an issue in the repo so we can address them properly: https://github.com/facebook/create-react-app/issues
So excited about this! Can't wait to use Fast Refresh and new JSX transform ⚛️
Does anyone else get
Couldn't find package "@rollup/plugin-node-resolve@^7.1.1" required by "workbox-build@^5.1.3" on the "npm" registry.as error?