Create React App 4.0 Alpha Testing

README.md

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

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 ⚛️