3.0.0 (April 22, 2019)
Create React App 3.0 brings some exciting new features including support for Hooks!
Thanks to all the maintainers and contributors who worked so hard on this release! 🎉
Highlights
- Jest 24: #6278
- Hooks support: #5997
- TypeScript linting: #6513
browserslist
support in @babel/preset-env: #6608- Absolute imports using
jsconfig.json
/tsconfig.json
: #6656
Migrating from 2.1.x to 3.0.0
Inside any created project that has not been ejected, run:
npm install --save --save-exact react-scripts@3.0.0
or
yarn add --exact react-scripts@3.0.0
If you previously ejected but now want to upgrade, one common solution is to find the commits where you ejected (and any subsequent commits changing the configuration), revert them, upgrade, and later optionally eject again. It’s also possible that the feature you ejected for is now supported out of the box.
Breaking Changes
Like any major release, react-scripts@3.0.0
contains a few breaking changes. We expect that they won't affect every user, but we recommend you look over this section to see if something is relevant to you. If we missed something, please file a new issue.
Jest 24
We've updated from Jest 23 to get the latest improvements in Jest 24. We've noticed some differences in snapshot serialization in Jest 24, so you may need to adjust your tests slightly once you update. You can read more about what's changed in the Jest 24 blog post.
Hooks support
We now enforce Rules of Hooks with eslint-plugin-react-hooks
. If you are breaking any of the rules of Hooks this will cause your build to fail.
TypeScript linting
We now lint TypeScript files. You can see the list of rules we enforce to check if your project is compatible. If you're using Visual Studio Code you can follow our guide to setup up your editor to display lint warnings.
browserslist
support in @babel/preset-env
The browserslist
config in your package.json
is now used to control the output of your JavaScript files. You can use separate configuration for development
and production
. See here for a good starting point which gives a good development experience, especially when using language features such as async/await, but still provides high compatibility with many browsers in production
Remove --no-watch flag
We've removed the --no-watch
flag from the start
script in favor of Jest's own --watchAll=false
.
New structure in asset-manifest.json
All asset paths have been moved under the files
key in asset-manifest.json
.
New Features
using jsconfig.json
/tsconfig.json
We now support setting baseUrl
in jsconfig.json
and tsconfig.json
. To configure baseUrl
to point to the src
directory in your JavaScript project, create a jsconfig.json
file in your project root:
```json
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
```
If you have a TypeScript project you can configure baseUrl
the same way in your tsconfig.json
.
Currently the only supported options for baseUrl
are node_modules
(the default) and src
.
PostCSS Normalize
You can now include a version of Normalize.css in your project that will use your browserslist
setting to generate the appropriate styles for your target browsers. To include it simply add @import-normalize
at the top of one of your CSS files.
Detailed Changelog
🚀 New Feature
react-scripts
- #6656 Set baseUrl from jsconfig.json/tsconfig.json (@rovansteen)
- #5810 Adds PostCSS Normalize (@mrchief)
babel-plugin-named-asset-import
,confusing-browser-globals
,react-dev-utils
,react-error-overlay
,react-scripts
eslint-config-react-app
,react-scripts
- #6513 Add TypeScript linting support (@ianschmitz)
babel-preset-react-app
,eslint-config-react-app
,react-scripts
babel-preset-react-app
,react-dev-utils
,react-scripts
- #6608 Support browserslist in @babel/preset-env (@ianschmitz)
💥 Breaking Change
react-scripts
- #6848 Remove no-watch flag in favor of watchAll=false (@bugzpodder)
- #6821 Add custom function to generate asset manifest (@iansu)
- #6750 change NODE_ENV and PUBLIC_URL into readonly (@xiaoxiangmoe)
- #4176 Remove --coverage + --watch workaround for the test command (@stipsan)
- #6615 Allow .json type checking (@ianschmitz)
- #6821 Add custom function to generate asset manifest (@iansu)
babel-preset-react-app
,react-app-polyfill
- #6769 Update to core-js@3 (@ianschmitz)
babel-plugin-named-asset-import
,confusing-browser-globals
,react-dev-utils
,react-error-overlay
,react-scripts
eslint-config-react-app
,react-scripts
- #6513 Add TypeScript linting support (@ianschmitz)
babel-preset-react-app
,eslint-config-react-app
,react-scripts
babel-preset-react-app
,react-dev-utils
,react-scripts
- #6608 Support browserslist in @babel/preset-env (@ianschmitz)
🐛 Bug Fix
react-dev-utils
- #6735 InlineChunkHtmlPlugin works with empty publicPath (@ItalyPaleAle)
react-scripts
- #6732 fix: terser-webpack-plugin hanging on WSL (@endiliey)
- #6610 Convert JSON.stringify \n to os.EOL (@MikeBeaton)
create-react-app
- #6759 Fix unlogged yarn pnp message (@heyimalex)
💅 Enhancement
react-scripts
- #6845 Change CRA version in
react-scripts
eject warning. (@lffg) - #6821 Add custom function to generate asset manifest (@iansu)
- #6580 Fix react-scripts peer-deps link local issue (@transitive-bullshit)
- #6746 Replace deprecated SFC with FunctionComponent in react-app.d.ts (@iamandrewluca)
- #6160 Suggests that tsconfig.json is incorrect only when SyntaxError is caught (@Andarist)
- #6696 Enable futureEmitAssets in webpack config (@iansu)
- #6669 Remove unnecessary shrink-to-fit=no meta data (@abdelrahmanrifai)
- #5686 Add empty mock for http2 (@kjin)
- #5960 add command to add files to staging after eject (@clickclickonsal)
- #6615 Allow .json type checking (@ianschmitz)
- #6451 change class component to function component (@xiaoxiangmoe)
- #6845 Change CRA version in
babel-plugin-named-asset-import
,babel-preset-react-app
,confusing-browser-globals
,create-react-app
,eslint-config-react-app
,react-app-polyfill
,react-dev-utils
,react-error-overlay
,react-scripts
- #6826 Add directory details to packages/* package.json (@feelepxyz)
babel-preset-react-app
,react-app-polyfill
- #6769 Update to core-js@3 (@ianschmitz)
create-react-app
- #6770 Warn when using react-scripts-ts (@ianschmitz)
react-dev-utils
- #5821 Add wait: false to options object for opn (@evalexpr)
- #6502 Enable click to go to error in console part 2! (@johnnyreilly)
📝 Documentation
- Other
- #6847 Add baseUrl documentation (@ianschmitz)
- #6801 Copy fixes in adding Bootstrap docs (@panckreous)
- #6820 Fix docs about minimum React version for SVG component support (@iansu)
- #6817 Add link to TypeScript page in Getting Started (@ianschmitz)
- #6786 Clarify production build output files documentation (@bakuzan)
- #6783 Add SVG support dependency note (@pnarielwala)
- #6772 Update link to React Testing Library docs (@fjoshuajr)
- #6695 Add Render deployment section (@anurag)
- #6082 Add explanation for adding everything as dependencies to docs (@mikeattara)
- #5481 Document .graphql and .gql file loading with graphql.macro (@petetnt)
- #6491 Update advanced-configuration.md (@stephengodderidge)
- #6208 Add deployment instructions with AWS Amplify (@swaminator)
- #6374 Add note about npx caching and link to #6119 (@TaylorBriggs)
- #6386 Revert removal of newlines from html in docs (@JBallin)
react-scripts
- #6848 Remove no-watch flag in favor of watchAll=false (@bugzpodder)
- #6775 Fix code comment typo (@bestseob93)
🏠 Internal
- Other
- #6829 Upgrade to Lerna v3 (@iansu)
- #6762 Add temporary workaround for Babel dependency issues in kitchensink-eject test suite (@iansu)
- #6757 Add temporary workaround for Babel dependency issues in installs test suite (@iansu)
- #6700 Kill verdaccio in CI tasks cleanup (@santoshyadav198613)
- #6690 Remove duplicate url key in siteConfig (@charpeni)
react-scripts
- #6313 Update testMatch to also be compatible with Jest 24 (@ngbrown)
- #4176 Remove --coverage + --watch workaround for the test command (@stipsan)
- #6655 Change app component declaration from arrow function to regular function (@iansu)
- #6625 change named import into default import (@xiaoxiangmoe)
- #6621 make compiler a const not a let (@Primajin)
babel-plugin-named-asset-import
,confusing-browser-globals
,react-dev-utils
,react-error-overlay
,react-scripts
- #6654 Cleanup Jest config (@ianschmitz)
react-dev-utils
- #6674 Remove unused eslint comment (@mohitsinghs)
eslint-config-react-app
🔨 Underlying Tools
react-scripts
- #6843 Update fsevents dependency version (@FrancoisRmn)
- #6725 Update to workbox-webpack-plugin v4 (@r0ughnex)
- #6361 Updating html-webpack-plugin dep (@Aftabnack)
- #6483 Update webpack-dev-server to 3.2.1 (@ThePrez)
babel-plugin-named-asset-import
,babel-preset-react-app
,confusing-browser-globals
,create-react-app
,eslint-config-react-app
,react-app-polyfill
,react-dev-utils
,react-error-overlay
,react-scripts
- #6840 Relax ESLint version range (@ianschmitz)
babel-preset-react-app
- #6780 Remove unused babel-loader from babel-preset-react-app (@tlrobinson)
babel-preset-react-app
,react-dev-utils
,react-error-overlay
,react-scripts
- #6767 Update dependency versions (@ianschmitz)
react-dev-utils
eslint-config-react-app
- #6701 Remove project property from @typescript-eslint/parser options (@jackwilsdon)
eslint-config-react-app
,react-scripts
babel-preset-react-app
,eslint-config-react-app
,react-scripts
babel-preset-react-app
,create-react-app
,react-app-polyfill
,react-dev-utils
,react-error-overlay
,react-scripts
- #6614 Upgrade dependencies (@ianschmitz)
Committers: 49
- Abdelrahman Rifai (@abdelrahmanrifai)
- Aftab Khan (@Aftabnack)
- Alessandro (Ale) Segala (@ItalyPaleAle)
- Alex Guerra (@heyimalex)
- Andrew Luca (@iamandrewluca)
- Anurag Goel (@anurag)
- Cody Olsen (@stipsan)
- Dalci de Jesus Bagolin (@dalcib)
- Dan (@panckreous)
- Eivind Arvesen (@eivind88)
- Endilie Yacop Sucipto (@endiliey)
- Francisco Joshua (@fjoshuajr)
- Hrusikesh Panda (@mrchief)
- Ian Schmitz (@ianschmitz)
- Ian Sutherland (@iansu)
- JBallin (@JBallin)
- Jack Wilsdon (@jackwilsdon)
- Jack Zhao (@bugzpodder)
- Jannis Hell (@Primajin)
- John Reilly (@johnnyreilly)
- Kelvin Jin (@kjin)
- Lorenzo Rapetti (@loryman)
- Luiz Felipe Gonçalves (@lffg)
- Mateusz Burzyński (@Andarist)
- Mike Beaton (@MikeBeaton)
- Mike Perry Y Attara (@mikeattara)
- Mohit Singh (@mohitsinghs)
- Nathan Brown (@ngbrown)
- Nicolas Charpentier (@charpeni)
- Nikhil Swaminathan (@swaminator)
- Parth Narielwala (@pnarielwala)
- Pete Nykänen (@petetnt)
- Philip Harrison (@feelepxyz)
- Pradeep Sekar (@r0ughnex)
- Raphael.dev (@bestseob93)
- Robert van Steen (@rovansteen)
- Romain François (@FrancoisRmn)
- Salvador Hernandez (@clickclickonsal)
- Santosh Yadav (@santoshyadav198613)
- Stephen Godderidge (@stephengodderidge)
- Taylor Briggs (@TaylorBriggs)
- Tom Crockett (@pelotom)
- Tom Robinson (@tlrobinson)
- Travis Fischer (@transitive-bullshit)
- Wilkins (@evalexpr)
- ZHAO Jinxiang (@xiaoxiangmoe)
- @ThePrez
- @bakuzan
- @frederikhors