Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Disable react refresh for library targets #7914

Merged
merged 2 commits into from
Apr 7, 2022

Conversation

lettertwo
Copy link
Contributor

For library targets:

  • Skips applying refresh transforms in JSTransformer
  • Skips applying ReactRefreshRuntime
  • Skips applying transforms in ReactRefreshWrapTransformer
  • Adds test asserting that runtime and transforms are not applied

Fixes #7359, #7496, #7652, #7900
See also: #6892

Background

This was a tough one to track down because it often 'failed' silently,
and when it did produce a symptom at build time, it looked like a scope hoisting bug:

AssertionError [ERR_ASSERTION]: Asset was skipped or not found.
            at ScopeHoistingPackager.getSymbolResolution (...)
            ...

The error would only occur when:

  • The build target was a library
  • The build was in a development env (watch mode)
  • A component that was being wrapped for fast refresh happened to be re-exported
    in a way that required deep symbol resolution in the packaging step.

For a while, the working theory was that there was an issue in symbol resolution because the last condition would result in the build failure. But the underlying problem was actually the combination of the first two conditions.

The issue can be summarized as:

  • a library target requires scope hoisting to produce valid modules
  • react-refresh functionality is incompatible with scope hoisting
  • the react-refresh transforms (and runtime) did not exclude library targets

Testing

One integration test was added: yarn test:integration --grep "refresh.*library"
Additionally, reproductions involving library targets from all of the linked issues were resolved with this fix.

For library targets:
  - Skips applying refresh transforms in JSTransformer
  - Skips applying ReactRefreshRuntime
  - Skips applying transforms in ReactRefreshWrapTransformer
  - Adds test asserting that runtime and transforms are not applied

Fixes #7359, #7496, #7652, #7900
See also: #6892
"source": "index.js",
"main": "dist/main.js",
"dependencies": {
"@parcel/transformer-react-refresh-wrap": "*",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this dependency needed?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh, probably not. This is probably from when I was experimenting with different package configs. I'll trim this down.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually, I think it is; if this is removed, forcing the the test to fail (by commenting out the fix) doesn't manifest because External dependency "@parcel/transformer-react-refresh-wrap" is not declared in package.json.

@parcel-benchmark
Copy link

parcel-benchmark commented Apr 6, 2022

Benchmark Results

Kitchen Sink 🚨

Timings

Description Time Difference
Cold FAILED -0.00ms
Cached FAILED -0.00ms

Cold Bundles

No bundles found, this is probably a failed build...

Cached Bundles

No bundles found, this is probably a failed build...

React HackerNews ✅

Timings

Description Time Difference
Cold 12.47s +694.00ms ⚠️
Cached 633.00ms -2.00ms

Cold Bundles

Bundle Size Difference Time Difference
dist/index.js 485.80kb +0.00b 6.55s +364.00ms ⚠️
dist/PermalinkedComment.46b19af5.js 4.21kb +0.00b 6.55s +364.00ms ⚠️
dist/UserProfile.f8cd7884.js 1.57kb +0.00b 6.55s +363.00ms ⚠️
dist/NotFound.960ab92b.js 429.00b +0.00b 6.55s +363.00ms ⚠️

Cached Bundles

No bundle changes detected.

AtlasKit Editor 🚨

Timings

Description Time Difference
Cold FAILED -0.00ms
Cached FAILED -0.00ms

Cold Bundles

No bundles found, this is probably a failed build...

Cached Bundles

No bundles found, this is probably a failed build...

Three.js ✅

Timings

Description Time Difference
Cold 8.74s +45.00ms
Cached 373.00ms +34.00ms ⚠️

Cold Bundles

No bundle changes detected.

Cached Bundles

No bundle changes detected.

Click here to view a detailed benchmark overview.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

React Library doesn't build in watch mode
4 participants