Skip to content

Instantly share code, notes, and snippets.

@iansu
Last active Mar 1, 2021
Embed
What would you like to do?
Create React App 4.0 Alpha Testing

Create New App

JavaScript Template

npx create-react-app@next --scripts-version=@next --template=cra-template@next my-js-app

TypeScript Template

npx create-react-app@next --scripts-version=@next --template=typescript@next my-ts-app

Update Existing 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

Changes

You can see a list of all the changes in the 4.0 release here

@kentcdodds

This comment has been minimized.

Copy link

@kentcdodds kentcdodds commented Aug 5, 2020

First!

J/k, this is great! I'm so grateful to everyone who's worked so hard on this! I just updated one of my workshop apps and fast refresh is SWEET. Having the latest version of jest/jsdom is fabulous. So far everything's going great here! Thanks 👏

@maniator

This comment has been minimized.

Copy link

@maniator maniator commented Aug 5, 2020

Cool

@CyrusZei

This comment has been minimized.

Copy link

@CyrusZei CyrusZei commented Aug 5, 2020

I don't know why I get more excited when I see updates on React, React-Native, and CRA then anything else in my life :D love it guys and keep up the good work. If you ever need somebody to design and code the "hello world" on your CRA just ping me.

@magoo-magoo

This comment has been minimized.

Copy link

@magoo-magoo magoo-magoo commented Aug 5, 2020

Very good news! Thank you! 🎉

@ipenywis

This comment has been minimized.

Copy link

@ipenywis ipenywis commented Aug 5, 2020

Nice! It just works the way its expected to be.
FAST REFRESH is really making a difference loving it!

@ancs21

This comment has been minimized.

Copy link

@ancs21 ancs21 commented Aug 6, 2020

Awesome!

@nikitavoloboev

This comment has been minimized.

Copy link

@nikitavoloboev nikitavoloboev commented Aug 6, 2020

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?

@nikitavoloboev

This comment has been minimized.

Copy link

@nikitavoloboev nikitavoloboev commented Aug 6, 2020

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.
@iansu

This comment has been minimized.

Copy link
Owner Author

@iansu iansu commented Aug 6, 2020

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.

@iansu

This comment has been minimized.

Copy link
Owner Author

@iansu iansu commented Aug 6, 2020

npm issue with installing scoped packages: https://twitter.com/npmstatus/status/1291296875572629504?s=21

@Daniel-Griffiths

This comment has been minimized.

Copy link

@Daniel-Griffiths Daniel-Griffiths commented Aug 6, 2020

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.
@Daniel-Griffiths

This comment has been minimized.

Copy link

@Daniel-Griffiths Daniel-Griffiths commented Aug 6, 2020

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 🙂

@jijothic

This comment has been minimized.

Copy link

@jijothic jijothic commented Aug 6, 2020

There was an ongoing issue affecting the installation of scoped packages. The issue is now fixed 😊😊

@asumaran

This comment has been minimized.

Copy link

@asumaran asumaran commented Aug 10, 2020

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.
@iansu

This comment has been minimized.

Copy link
Owner Author

@iansu iansu commented Aug 11, 2020

Please report any problems by opening an issue on GitHub

@Tevinthuku

This comment has been minimized.

Copy link

@Tevinthuku Tevinthuku commented Aug 12, 2020

I tried it out and I found that it works for both new projects & existing projects that I've been working on 👍

@asumaran

This comment has been minimized.

Copy link

@asumaran asumaran commented Aug 12, 2020

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.

@kentcdodds

This comment has been minimized.

Copy link

@kentcdodds kentcdodds commented Aug 21, 2020

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

@kentcdodds

This comment has been minimized.

Copy link

@kentcdodds kentcdodds commented Aug 21, 2020

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

@kentcdodds

This comment has been minimized.

Copy link

@kentcdodds kentcdodds commented Aug 21, 2020

Made an issue to track this: facebook/create-react-app#9520

@kentcdodds

This comment has been minimized.

Copy link

@kentcdodds kentcdodds commented Aug 22, 2020

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.

@FredyC

This comment has been minimized.

Copy link

@FredyC FredyC commented Aug 24, 2020

I am getting a somewhat cryptic error.

image

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.

@hoangbkit

This comment has been minimized.

Copy link

@hoangbkit hoangbkit commented Sep 17, 2020

Awesome 🎉 can't wait to try!

@schemburkar

This comment has been minimized.

Copy link

@schemburkar schemburkar commented Sep 17, 2020

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

@tuucan

This comment has been minimized.

Copy link

@tuucan tuucan commented Sep 17, 2020

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' */

@jrr

This comment has been minimized.

Copy link

@jrr jrr commented Sep 17, 2020

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?

@iansu

This comment has been minimized.

Copy link
Owner Author

@iansu iansu commented Sep 17, 2020

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

@wunnle

This comment has been minimized.

Copy link

@wunnle wunnle commented Sep 23, 2020

So excited about this! Can't wait to use Fast Refresh and new JSX transform ⚛️

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment