Public Beta Testing of react-scripts@1.0.0

[gaearon]

---

Known Issues:

• None (please report!)

Updates:

• Published the first canary.
• Published another canary that fixes the path issue and disables require.ensure() warning.
• Published another canary that re-enables parsing of require.ensure().
• Published a canary with more legible colors on Windows and port detection fixes
• Published a canary with Jest fixes, stricter module resolution, Uglify fix, and more consistent overlay styling
• Published a canary with fixed npm package, more visual fixes to overlays, better build messages, and smaller post eject code size
• Final call for testing: Published the last canary with IE fixes.

---

Today I invite you to help us beta test react-scripts@1.0.0 for a few days before the public release.
It used to be called 0.10 but we figured there’s enough improvements to make it 1.0.

To create a new app with it, run:

create-react-app my-app --scripts-version react-scripts@canary

To upgrade an existing app, replace "react-scripts": "0.9.5" in your package.json with:

    "react-scripts": "canary"

and run npm install (or yarn).

There is no changelog yet, but you can open the milestone to get a sense of included changes.

A few highlights:

• Webpack 2 (Upgrade to webpack v2 #1291)
• Jest 20 (Update to Jest 19 #1614, Use Jest 20 #2171)
• Code splitting with dynamic import() (Add support for dynamic import & disable require.ensure #1538)
• Runtime overlay for uncaught errors (Add runtime error overlay #1101)
• Local and environment-specific env files (Feature/different env config files #1343 #1344)
• Multiple proxies (Change proxy handling to allow multiple proxies in development #1790)
• Accidental usage of non-obvious globals is forbidden (Blacklist confusing global variables #2130)
• Some Jest options are overridable (Make coverage and snapshot Jest options overridable in package.json #1830)
• Nicer warning and error output (Omit ESLint warnings when there are ESLint errors #2120, Only show the first compilation error #2125, Make error/warning output more useful #2161)
• You can use a Node script as a BROWSER variable (Support node scripts in BROWSER #1590)
• Only image assets are inlined (Whitelist files that can be embedded through url-loader #1305)
• Only tests in src run now (Only run tests in <rootDir>/src (#544) #1808)
• Some flexbox bugs are autofixed, and support for 2009 spec is dropped (Adding plugin postcss-flexbugs-fixes and flexbox: 'no-2009' to Autoprefixer #1771)
• Editing the public folder refreshes the page (Enable page reloading for files in public/ #1546)

There are a few more changes we plan to get into 1.0.0, but this should be enough the first public testing.

Please report any issues you bump into in this thread. We want this release to be as solid as possible, even though it’s unlikely we’ll keep it unreleased for much longer.

Big thanks to all the contributors. This will be our biggest release yet.

[gaearon]

Looks like some it could be a Yarn bug? cc @bestander

react-scripts@1.0.0-alpha.c82c4f05 asks for

"react-dev-utils": "^1.0.0-alpha.c82c4f05",

but I see

react-dev-utils@1.0.0-alpha.e280254d

installed instead.

Try running npm install react-dev-utils@1.0.0-alpha.c82c4f05 as temporary fix.

[Timer]

@gaearon could it be the ^, where e > c? Maybe we should pass the --exact flag to lerna.

Yikes, looks like semver just functions like this:

[cdaringe]

per the semver spec:

Precedence for two pre-release versions with the same major, minor, and patch version MUST be determined by comparing each dot separated identifier from left to right until a difference is found as follows: identifiers consisting of only digits are compared numerically and identifiers with letters or hyphens are compared lexically in ASCII sort order. Numeric identifiers always have lower precedence than non-numeric identifiers. A larger set of pre-release fields has a higher precedence than a smaller set, if all of the preceding identifiers are equal. Example: 1.0.0-alpha < 1.0.0-alpha.1 < 1.0.0-alpha.beta < 1.0.0-beta < 1.0.0-beta.2 < 1.0.0-beta.11 < 1.0.0-rc.1 < 1.0.0.

therefore, e280254d is > c82c4f05, which makes some amount of sense. the hash is still treated like a version number, so long as everything preceding is a match.

[gaearon]

Huh. I guess Lerna --canary feature is a bit broken then.

[gaearon]

Yep, it’s completely broken. 😄
lerna/lerna#277

I wish I knew that before.

[gaearon]

Published a new canary with fixed npm package, more visual fixes to overlays, better build messages, and smaller post eject code size.

Please give it a try! It’s close to a release candidate.

[mxstbr]

Been running a custom fork of (what used to be) 0.10 in production for a month or two now (ever since the webpack 2 PR) and haven't run into any bugs/issues yet!

[gaearon]

Just published an RC as the last canary.
Speak now or hold your peace 😄

[notrab]

Just ran an upgrade and everything went smoothly. Just deployed to production too, everything running fine 🤘

[kentcdodds]

The testing-workshop tests all passed without a hitch! And the app still looks perfect (both dev and prod versions)! 🚀 🚢

[RohovDmytro]

New canary caught me on some none-existed imported values. Fixing that led me to successfull deployment to prod!

[RohovDmytro]

Feedback.

./src/components/PageResume.js
  Line 530:  'Wow' is not defined  react/jsx-no-undef

Search for the rule keywords to learn more about each error.

«rule keywords» was confusing for me for 15 seconds.

Word «rule» is confusing. What rule? I am not aware of any rules. This project hides config complexity, so a novice may not get what this message about.

We can make «react/jsx-no-undef» clickable , but maybe it's to much 😺

[TheRobBrennan]

@gaearon This is awesome!!! Thank you for adding that. This is absolutely beautiful now:

[gaearon]

@rogovdm I agree, changed to just keywords. Ideally I’d like to make them clickable but I don’t want to force people to use Google.

[mbifulco]

Updating an existing project - this is working great for me so far. Thanks to you and your team, @gaearon!

[ffxsam]

I get get a new warning:
[eslint] Definition for rule 'jsx-a11y/alt-text' was not found (jsx-a11y/alt-text)

I get this warning now too, and can't figure out how to get rid of it. It's not documented in the README, and Googling around for this didn't turn up anything useful.

[gaearon]

Where do you get it? You have not specified your editor, plugin, whether you use global ESLint for it, etc.

[gaearon]

I'll close this issue since 1.0 is out but please file new ones if something is confusing!

[ffxsam]

Nuclide, latest version (of Atom as well). No global eslint installed.
BTW, I found the plugin & its documentation. Fixed it with the following in my .eslintrc:

  "rules": {
    "jsx-a11y/alt-text": "off",

[gaearon]

That's not the right fix, you're still running wrong versions of plugins. This silences this warning but you'll see more breakage in the future. I suggest fixing the root cause rather than symptoms.

Let's try this:

1. Ensure that in Atom ESLint settings you have "Use Global ESLint" turned off
2. Run npm install in your project (or yarn)
3. Quit Atom (ensure its process doesn't hang around)
4. Start Atom again

I think that should help but let me know if not, and we can debug more.

[ffxsam]

That did the trick! I noticed that .eslintrc changes would get recognized by closing a file and reopening it, but in this case, quitting Atom entirely was required.

[gaearon]

Yea. Since it loads rules into memory, their code sticks around in the require cache even after closing the file.

[slightly-askew]

Hi gaearon & all, I'm getting the following flow error in both Nuclide and VS Code. I've tried the above steps you recommended several times but no joy. Also tried deleting node_modules and reinstalling.

identifier ESLintContext Could not resolve name

Doesn't happen in React Scripts v0.9.x; only when upgrading to 1.0.2-3

In Nuclide 0.228.0:

• Linter is disabled
• linter-eslint 8.1.7 is enabled with use global off

In VS Code 1.12.2:

• ESLint is enabled

Here are my .eslintrc and .flowconfig settings:

devDependancies:

"devDependencies": {
    "@kadira/storybook": "^2.21.0",
    "eslint-plugin-jsx-a11y": "^5.0.3",
    "flow-bin": "^0.42.0",
    "react-scripts": "^1.0.3",
    "stylelint": "^7.10.1",
    "stylelint-config-standard": "^16.0.0"
  },

Any suggestions much appreciated!

[gaearon]

The error is because Flow is trying to typecheck the ESLint plugin.
You probably want to add .*/eslint-plugin-jsx-a11y/.* to [ignore] in your .flowconfig.

[slightly-askew]

Ahh ok that worked, thanks very much :)

[zerubeus]

@gaearon I don't have global ESlint, and I'm using VSCode, and I have this warning in both when working locally and the Tarvic CI is breaking because of this same warning : Definition for rule 'jsx-a11y/alt-text' was not found jsx-a11y/alt-text, this occurred after updating to react-script 1.0.7

[gaearon]

@zerubeus The public testing has finished a long time ago so this is not an appropriate issue. Please file a new issue with an example project reproducing this. Thanks!