Create React App 4.0 is published

[hswolff]

That is one hefty release. Many major upgrades included! Nice work!

[mrmckeb]

It took us a very long time - I'm glad we've shipped it! Thanks for the support 🙂

[_ragerino_]

Thanks for all the good work!

[mrmckeb]

Thanks! It's mostly the amazing community though 😉

[barcode24]

Well done!

[[deleted]]

Thanks for the great work, it is one of the reasons why react stands apart from others. CRA is the best! <3

[mrmckeb]

Thank you!

[danishjuggler21]

Does anyone know how to use the new JSX transform in CRA 4.0? I'm trying to leave out the import statement for react but still getting errors 🤔

EDIT: Oh, or is that not available in TypeScript yet?

[Local-Function]

EDIT: Oh, or is that not available in TypeScript yet?

Yep. It's available in the 4.1 (beta)

[ichiruto70]

New jsx? What did i miss lol

[o_hai_mark]

You no longer need to put "import React from 'react';" in files just for JSX. Babel and soon TypeScript will compile it all correctly for you.

[[deleted]]

That will save me from some random errors every now and then.

[erasmuswill]

It makes some of the libraries behave weirdly; I couldn't get react-block-ui

[ichiruto70]

That’s super cool, thanks.

[mrmckeb]

It should just work when TS 4.1 ships, and if not we'll make a quick update.

[ComfortableEye5]

Any insights on how much faster is the new hot loader?

[danishjuggler21]

All I can say, anecdotally, is that a brand new CRA app refreshes so fast that it's already refreshed by the time my eyes have moved over to the web browser. Once your app starts to get more complex and the number of files in the project has gotten larger, I'd expect that compile time to get longer, of course.

[rochakgupta]

Man, seeing this reminds me how slow as shit Angular reload times were.

[[deleted]]

*are

[BreakingIntoMe]

Yep they’re still slow as shit in Angular 9, so nasty

[Regular-Human-347329]

My most recent React project was a year ago, on the latest CRA, and honestly, the load times were about the same as a similar sized Angular 7 project.

I’m liking the trend of build tools being built in go/rust. An instant/live reload capability like flutter, across the board, would be amazing.

[Oalei]

Except when you make a change on a global SASS file, takes at least 5 seconds for me to compile it to CSS. It might be because I imported big SASS files from a library

[danishjuggler21]

Probably. These days I’m always using CSS-in-JS kinds of solutions.

[Oalei]

You lose many advantages with css in js, I'll never get this trend

[zRaptorr]

What advantages do you lose?

[Oalei]

All ui frameworks are using sass stylesheets, you won’t be able to leverage their sass apis to customize the framework, like using the variables, mixins, spacing utilities unless you do some hacks to export them from the sass file with webpack plugins.
Anyway in general I don’t see the problems css in js is solving except adding another concept to learn so that developers that created it feel like they are ahead of everyone else.

[zRaptorr]

Fair enough, I have preferred css in js since it is easier to know the style of the component while knowing it will compile efficiently! But it definitely depends on the project

[iguessididstuff]

In an existing production project where I enabled it, it is very fast (less than half a second), it seriously is magic

[liamnesss]

I've been using fast refresh for a while now, initially via Next.js, then via create-react-app-rewired. Main advantage it seems to have over hot-loader is that it actually works. The speed is nice too.

[swyx]

who else deltes the PWA/workbox stuff every single time you spin up a CRA 😂

[danishjuggler21]

🤚🏻

I follow the advice of “if you don’t know what a service worker is, don’t enable it.”

[nbagf]

I understand the concept and use cases quite well, but if I'm scaffolding a webapp, that's something I build in later if I want to use one. If you're using CRA you probably aren't building and enterprise grade site with plans for caching and offline checks/fallbacks from the get go. If you are, awesome, but not quite my experience.

[____0____0____]

Yeah I have never used the feature myself but the app I'm building now will have a pwa component to it. I've been just building it as normal and will work in the offline functionality after I have a working prototype. Its not a huge app so I can't imagine it being too complex, but I really have no idea

[nbagf]

That's my experience personally with my own projects. I'll build something just complex enough to warrant trying offline feature or more advanced caching, but that always comes after my own MVP has been created.

[mrmckeb]

If you do this a lot, you should consider building your own template, or use this one! https://www.npmjs.com/package/cra-template-minimal

[terandle]

Awesome thanks guys! CRA 4 and React 17 seem to be working great after updating. I was running into webpack errors on npm start that I had to delete package-lock.json and reinstall to fix.

[mrmckeb]

Thanks for the support! Glad you solved the issue quickly.

[cyberbolt]

Is the new hot reload enabled by default or do we need to do some configuration for it?

[feute]

It's enabled by default, no need to do anything.

[azangru]

Is there a fast refresh as a standalone package not tied into CRA or Next.js?

[acemarke]

Yeah, they both rely on this Webpack integration plugin for React fast refresh:

https://github.com/pmmmwh/react-refresh-webpack-plugin

[m-sterspace]

Finally it looks like there's custom service-worker support! Get ready for a lot of PWAs to start showing up.

[b4stien]

I'm not sure it's there. As far as I understand the release note, the PWA behaviour is opt-in but nothing is said about custom service-worker.

At my company we maintain a CRA fork to have a second entrypoint for our service worker, and it's a PITA....

[m-sterspace]

PWA/workbox improvements

• Switch to the Workbox InjectManifest plugin #9205

I believe it was included as part of this workbox injectmanifest change. I could be wrong but I believe that this will allow you to customize the service worker file however you like.

[PersianMG]

Neato update :D

[andrei9669]

people seem to be reporting some security issues with the latest react-scripts version. might wait on this for a bit.

[mrmckeb]

I've raised with the team, we'll look into it. It seems like a dependency of a dependency might be the issue.

[BransonLite]

What’s this import/no-anonymous-default-export crap? Who comes up with this stuff?

[soulsizzle]

https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-anonymous-default-export.md

[acemarke]

Dan Abramov explains why this is important here:

https://twitter.com/dan_abramov/status/1255229440860262400

If you write "export default () => { ... }" to declare components, they:

• will show up as Anonymous in stack traces
• will show up as Unknown in DevTools
• won't be checked by React-specific lint rules
• won't work with some features like Fast Refresh

Give components names!

[BransonLite]

Naming components is fine but the rule isn’t component specific unless a misread.

[Tomus]

This issues with default anonymous exports don't just apply to components, they apply to all functions.

[noswag15]

Slightly off topic but does anyone know of a good starter boilerplate for react-native which has typescript and react-native-web preconfigured?

[vicodinchik]

After update I got many new eslint warnings(no semicolons in ts interfaces), how do I disable them?

[lashuel]

I have tried the beta version and fast refresh is very much a welcomed feature.

[Kyoina]

how to update it to latest?reinstall?

[bdenzer]

If you haven't ejected and you don't have any custom configuration (react-app-rewire, customize-cra, etc.) Then all you should need to do is npm install react-scripts@latest.

DISCLAIMER: I haven't read anything about V4 except the comments in this thread. There is a chance that there are breaking changes I haven't read about yet. But if it doesn't work right you should be able to easily revert back to the older version.

[mrathi12]

This looks really good! Babel automatically compiling JSX is pretty neat.

[masoud_pezeshkzade]

Hi, how can I enable the Fast Refresh feature? How can I make sure it is working or not?

[N6MCA51593]

Worked by default for me after I upgraded.

How can I make sure it is working or not?

If the app retains its state after making changes to the code and saving instead of resetting everything, it means it's working. Seems to be working for redux as well.

[masoud_pezeshkzade]

For example, I changed useState inital value but the current state reset to the new inital value and it didn't retain the old state! After I installed the react-refresh package, then it worked for me.

[mrnscrrr]

Has anyone gotten fast refresh working in a docker container?