react-scripts@2 final blockers

[gaearon]

Let's just keep track in one list so we don't forget.

Code Blockers

• Fix runtime issues (project can not work after upgrade react-scripts form 2.0.0-next.a671462c to 2.0.0 #5116)
• CSS bug? react-scripts@next drops css import in production build #5140
• Give bundle analyzer thing final testing and make a decision (Revisit the decision to allow webpack analyzer tools #4563 (comment))
• Switch to Babel loader (Switch back to babel-loader #5122 (comment))
• Fix EPIPE noise on failed builds. Annoying warnings #5138
• Check that it works on Node 10 Last call for Create React App v2 #5103 (comment)
  • new apps work on node 10, running yarn upgrade before upgrading react-scripts would probably fix this, or we can file a bug with yarn
• Check if this is a regression "react-scripts test" fails for valid JS files from modules which are successfully built #5164
• Investigate migration path for Legacy SASS loader method breaks in @next #5178
• Why does Workbox output have so many files? And what is Google Analytics doing there? Workbox service worker #4169 (comment)
• Fix or document class properties regression with Flow
  TypeError: Cannot read property 'bind' of undefined when using Flow #5176 (comment)
• Stretch: nicer webpack messages (can also go in a patch)
• Include license into packages Package distributions are not licensed #4944

Docs Blockers

• Remove anything outdated from the User Guide
• Make a decent changelog and migration guide from 1.x

Docs Follow-ups

• Ping Ives Figure out 2.x CodeSandbox story #5128
• Document /* autoprefixer grid: on */ for CSS grid
• Update React's "Add React to Website" JSX section
• Prepare blog post
• Document Workbox (Updates to README to reflect Workbox usage. #5111)
• Make a decent migration guide from 2.x betas
  • Monorepo migration (Babel JSX Syntax error when importing from a linked library #5100)
• Check and document Apollo (Checkout apollo compatibility #5126) and Relay support
• Explain browserslist Move browsers to cross-tool config #3644 (comment)
• MDX Using mdx in @next  #5149
• All the other stuff in Do another pass at README / User Guide for 2.x #5127

[bugzpodder]

should we remove integration for #4563

[gaearon]

updated

[iansu]

It sounds like #5140 has been resolved and is not a bug.

[Timer]

Yeah, but it's still crappy. Can we disable that somehow? There's no such thing as "unused" CSS when its imported.

[iansu]

I guess that's a webpack question. I think that's just part of their tree-shaking implementation though.

Technically this is a bug in the third-party package. They've declared that their package is side effect free when it's really not.

[Timer]

Sure, but css should be an implied sideEffect, despite what the package.json says.

[edmorley]

Can we disable that somehow? There's no such thing as "unused" CSS when its imported.

webpack/webpack#6571 would help with this.

The only other workarounds would be to:

1. set optimization.sideEffects to false (but that will increase bundle size)
2. see if it's possible to categorise all CSS as having side-effects by setting Rule.sideEffects for the css-loader entry in rules (but it's not clear which of that or the package.json entry takes priority - would need testing)

Edit:
It looks like (2) would work, since it's applied after the package.json value so can override it:
https://github.com/webpack/webpack/blob/8a7597aa6eb2eef66a8f9db3a0c49bcb96022a94/lib/optimize/SideEffectsFlagPlugin.js#L24-L49

[gaearon]

I'm okay with switching to this behavior as long as migration notes mention it as potential pitfall and explain what to tell library authors.

[Timer]

@edmorley can you send a PR for this, please?

[gaearon]

see if it's possible to categorise all CSS as having side-effects by setting Rule.sideEffects for the css-loader entry in rules (but it's not clear which of that or the package.json entry takes priority - would need testing)

This is what webpack should do by default IMO. There's no way for CSS file to "know" if it's effectful. Only the loader can tell that since loader determines how to interpret it. Side-effectfulness of style-loader should've "marked" the CSS file somehow.

[eward957]

I really hope react-scripts@2 can be supports "less" & "ts" directly 💯 👍

[gaearon]

Added a few things here.