The version 1.0.0 is not covered by your current version range.
Without accepting this pull request your project will work just like it did before. There might be a bunch of new features, fixes and perf improvements that the maintainers worked on for you though.
I recommend you look into these changes and try to get onto the latest version of react-scripts.
Given that you have a decent test suite, a passing build is a strong indicator that you can take advantage of these changes by merging the proposed change into your project. Otherwise this branch is a great starting point for you to work on the update.
Release Notesv1.0.0
1.0.0 (March 18, 2017)
We’ve been working on this release for the past few months, and there are many big impovements, from migrating to webpack 2 to a brand new runtime error overlay and built-in support for Progressive Web Apps.
So instead of just enumerating them here, we decided to write a blog post about all the new features.
Check it out: What’s New in Create React App.
Have you read it? Now let's see how to update your app to the latest version.
Migrating from 0.9.5 to 1.0.0
First, ensure you are using the latest Node 6 LTS or newer. In 1.0.0, we have dropped support for Node 4 and NPM 2.
Inside any created project that has not been ejected, run:
You may also optionally update the global command-line utility for bug fixes:
npm install -g create-react-app
Ensure application and test files reside in src/
We've never supported importing files from outside src/, nor have we supported running tests outside of src/.
We also never explicitly forbid doing so, which caused confusion when things didn't work like they should.
When running or building your application, you may see a message like so:
You attempted to import ... which falls outside of the project src/ directory.
To remedy this, simply move any files that you import within src/ and update your relative imports accordingly. This enforces that files that import each other stay in src/, and other folders serve different purposes (e.g. the public/ folder just gets served from the root).
If you used relative imports outside the project directory as a way to share code with another project, consider using a monorepo instead, so that other projects are symlinked to your project's node_modules/. Then you can import them as a Node modules.
While running npm test, you may notice some of your tests are missing. Please move any top-level test directory (i.e. __test__, __spec__) or files (i.e. *.test.js, *.spec.js) into src/. Conversely, if you have some similarly named files that you don’t want Jest to run, move them outside of src/.
Import required locales for Moment.js
Moment.js locales are now purposely excluded from the bundle unless explicitly depended on.
You can no longer import a file and expect to receive its contents as an encoded string.
This behavior was confusing and inconsistent depending on the file size.
Importing files with unknown extensions will now always include them into the build and return a valid URL.
If you'd like to import a file's contents as a string, consider contributing to #1944.
For the time being, you must embed assets within an export:
// sample.txtexportdefault`i wantthis data as a string`;
You can then import this as so:
importsampleTextfrom'./sample.txt';
// ...
Confusing window globals can no longer be used without window qualifier
Please prefix any global method with window., you may experience this with methods such as confirm.
Simply update references from confirm to window.confirm.
Note that this new lint error will likely uncover legitimate accidental uses of global variables where you meant to define a local variable instead.
Why is my import erroring out?
You can no longer use AMD import syntax, nor define an import anywhere other than the top of the file.
This is to reduce confusion around import statements, which do not allow you to evaluate code between them.
I see many accessibility warnings
We have enabled a new set of rules to help make applications more accessible, please take time to learn about the errors and fix them.
You can search for every lint rule name in the right column and read its description on the web. The fixes are usually very simple.
I see many warnings about PropTypes and createClass
We have enabled the lint warnings about React APIs deprecated in React 15.5.
You can automatically convert your project to fix them by running the corresponding codemods.
How do I make my tests work with Jest 20?
Please refer to the Jest 19 and Jest 20 breaking changes for migration instructions.
If you use snapshots, you will likely need to update them once because of the change in format.
After the regular update procedure above, add these line to <head> in public/index.html:
<metaname="theme-color"content="#000000">
<!-- manifest.json provides metadata used when your web app is added to the homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/-->
<linkrel="manifest"href="%PUBLIC_URL%/manifest.json">
Then create a file called public/manifest.json that looks like this:
Not sure how things should work exactly?
There is a collection of [frequently asked questions](https://greenkeeper.io/faq.html) and of course you may always [ask my humans](https://github.com/greenkeeperio/greenkeeper/issues/new).
Version 1.0.0 of react-scripts just got published.
The version 1.0.0 is not covered by your current version range.
Without accepting this pull request your project will work just like it did before. There might be a bunch of new features, fixes and perf improvements that the maintainers worked on for you though.
I recommend you look into these changes and try to get onto the latest version of react-scripts. Given that you have a decent test suite, a passing build is a strong indicator that you can take advantage of these changes by merging the proposed change into your project. Otherwise this branch is a great starting point for you to work on the update.
Release Notes
v1.0.01.0.0 (March 18, 2017)
We’ve been working on this release for the past few months, and there are many big impovements, from migrating to webpack 2 to a brand new runtime error overlay and built-in support for Progressive Web Apps.
So instead of just enumerating them here, we decided to write a blog post about all the new features.
Check it out: What’s New in Create React App.
Have you read it? Now let's see how to update your app to the latest version.
Migrating from 0.9.5 to 1.0.0
First, ensure you are using the latest Node 6 LTS or newer. In 1.0.0, we have dropped support for Node 4 and NPM 2.
Inside any created project that has not been ejected, run:
You may also optionally update the global command-line utility for bug fixes:
Ensure application and test files reside in
src/
We've never supported importing files from outside
src/
, nor have we supported running tests outside ofsrc/
.We also never explicitly forbid doing so, which caused confusion when things didn't work like they should.
When running or building your application, you may see a message like so:
To remedy this, simply move any files that you
import
withinsrc/
and update your relative imports accordingly. This enforces that files thatimport
each other stay insrc/
, and other folders serve different purposes (e.g. thepublic/
folder just gets served from the root).If you used relative imports outside the project directory as a way to share code with another project, consider using a monorepo instead, so that other projects are symlinked to your project's
node_modules/
. Then you can import them as a Node modules.While running
npm test
, you may notice some of your tests are missing. Please move any top-level test directory (i.e.__test__
,__spec__
) or files (i.e.*.test.js
,*.spec.js
) intosrc/
. Conversely, if you have some similarly named files that you don’t want Jest to run, move them outside ofsrc/
.Import required locales for Moment.js
Moment.js locales are now purposely excluded from the bundle unless explicitly depended on.
Please import the locales you need:
You can no longer import file content
You can no longer import a file and expect to receive its contents as an encoded string.
This behavior was confusing and inconsistent depending on the file size.
Importing files with unknown extensions will now always include them into the build and return a valid URL.
If you'd like to import a file's contents as a string, consider contributing to #1944.
For the time being, you must embed assets within an export:
You can then import this as so:
Confusing window globals can no longer be used without
window
qualifierPlease prefix any global method with
window.
, you may experience this with methods such asconfirm
.Simply update references from
confirm
towindow.confirm
.Note that this new lint error will likely uncover legitimate accidental uses of global variables where you meant to define a local variable instead.
Why is my import erroring out?
You can no longer use AMD import syntax, nor define an import anywhere other than the top of the file.
This is to reduce confusion around import statements, which do not allow you to evaluate code between them.
I see many accessibility warnings
We have enabled a new set of rules to help make applications more accessible, please take time to learn about the errors and fix them.
You can search for every lint rule name in the right column and read its description on the web. The fixes are usually very simple.
I see many warnings about PropTypes and createClass
We have enabled the lint warnings about React APIs deprecated in React 15.5.
You can automatically convert your project to fix them by running the corresponding codemods.
How do I make my tests work with Jest 20?
Please refer to the Jest 19 and Jest 20 breaking changes for migration instructions.
If you use snapshots, you will likely need to update them once because of the change in format.
Flexbox 2009 spec is no longer polyfilled
The old, 2009 specification for Flexbox is deprecated and is 2.3x slower than the latest specification.
We are no longer polyfilling it automatically.
How to turn my app into a Progressive Web App?
After the regular update procedure above, add these line to
<head>
inpublic/index.html
:Then create a file called
public/manifest.json
that looks like this:Finally, create
src/registerServiceWorker.js
with this template, import it fromsrc/index.js
and call the function it exports.Anything missing?
This was a large release, and we might have missed something.
Please file an issue and we will try to help.
Detailed Changelog
For a readable summary of the changes, check out our blog post.
react-dev-utils
,react-scripts
ModuleScopePlugin
to ensure files reside insrc/
. (@Timer)react-scripts
src/
(#544). (@motevets)19(now 20). (@rogeliog)eslint-config-react-app
,react-dev-utils
eslint-config-react-app
,react-error-overlay
,react-scripts
eslint-plugin-jsx-a11y
and activate more rules. (@AlmeroSteyn)eslint-config-react-app
,react-scripts
react-scripts
react-dev-utils
,react-scripts
react-error-overlay
, our new crash overlay. (@Timer)eslint-config-react-app
,react-scripts
eslint-plugin-jsx-a11y
and activate more rules. (@AlmeroSteyn)react-scripts
react-scripts
and addrequire.resolve()
to loaders. (@gaearon).eslintignore
. (@Timer)localhost
when offline (Windows). (@bunshar)http://
orhttps://
. (@bunshar)detect-port
. (@Andreyco)react-dev-utils
openBrowser
now supports urls with more than one parameter. (@alisonmonteiro)openBrowser()
whenBROWSER=open
on macOS. (@bpierre)cwd
. (@chrisdrackett)create-react-app
react-dev-utils
,react-scripts
react-dev-utils
,react-error-overlay
react-scripts
19(now 20). (@rogeliog)yarn build
instead ofyarn run build
. (@geoffdavis92)serve
for running in production. (@leo)yarn
instead ofyarnpkg
when creating a new application. (@lpalmes)X-FORWARDED
headers for proxy requests. (@johann-sonntagbauer)eslint-config-react-app
,react-dev-utils
react-error-overlay
,react-scripts
babel-preset-react-app
,eslint-config-react-app
,react-dev-utils
,react-error-overlay
,react-scripts
eslint-config-react-app
eslint-config-react-app
,react-scripts
ignoreRestSiblings
inno-unused-vars
. (@chrisdrackett)react-dev-utils
create-react-app
react-scripts
.eslintrc
effects. (@luftywiranda13).eslintrc
for IDE lint plugins. (@gaearon)node-sass
alternative. (@michaelwayman).env
for enabling polling mode. (@gaearon)npm run watch-css
command. (@mklemme)yarn.lock
. (@viankakrisna)babel-preset-react-app
react-scripts
url
import in Webpack config. (@pd4d10)react-dev-utils
,react-scripts
babel-preset-react-app
,react-scripts
create-react-app
,react-dev-utils
,react-scripts
appveyor.yml
. (@Timer)babel-preset-react-app
,create-react-app
,eslint-config-react-app
,react-dev-utils
,react-scripts
eslint-config-react-app
eslint-config-react-app
,react-dev-utils
,react-scripts
react-dev-utils
Committers: 66
Not sure how things should work exactly?
There is a collection of [frequently asked questions](https://greenkeeper.io/faq.html) and of course you may always [ask my humans](https://github.com/greenkeeperio/greenkeeper/issues/new).Your Greenkeeper Bot :palm_tree: