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

Fix attempted import error for react #61791

Merged
merged 3 commits into from Feb 7, 2024
Merged

Conversation

huozhi
Copy link
Member

@huozhi huozhi commented Feb 7, 2024

What

Exclude precompiled react packages from browser layer loaders coverage.

Why

Since we're transpiling all the browser layer code now after #59569, then SWC will also compile react. But when it compiles react.production.min.js it gives me with the code and ESM helper inserted

import { _ as _type_of } from "@swc/helpers/_/_type_of"; // This is not correct
var l = Symbol.for("react.element"), n = Symbol.for("react.portal"), p = Symbol.for("react.fragment"), q = Sym
bol.for("react.strict_mode"), r = Symbol.for("react.profiler"), t = Symbol.for("react.provider"), u = Symbol.f

This makes bundler think it's a ESM package but actually it's CJS, which converts the module into { default: .., __esModule } instead of the original react module.

When you're using React.useEffect or other API through namespace import (import * as React from 'react'), this will break the module exports check in bundling as the property doesn't directly attached to the module now. This PR disabled the transform for precompiled react packages now and will see the deeper issue in next-swc side later.

Fixes #60890
Fixes #61185

Discovered with @shuding

Closes NEXT-2362

@ijjk
Copy link
Member

ijjk commented Feb 7, 2024

Tests Passed

@ijjk
Copy link
Member

ijjk commented Feb 7, 2024

Stats from current PR

Default Build
General Overall increase ⚠️
vercel/next.js canary vercel/next.js fix/attempeted-import-error Change
buildDuration 11.9s 11.8s N/A
buildDurationCached 6.7s 5.5s N/A
nodeModulesSize 318 MB 318 MB ⚠️ +996 B
nextStartRea..uration (ms) 435ms 438ms N/A
Client Bundles (main, webpack)
vercel/next.js canary vercel/next.js fix/attempeted-import-error Change
3f784ff6-HASH.js gzip 53.4 kB 53.4 kB N/A
423.HASH.js gzip 185 B 181 B N/A
68-HASH.js gzip 29.7 kB 29.5 kB N/A
framework-HASH.js gzip 45.2 kB 45.2 kB
main-app-HASH.js gzip 238 B 239 B N/A
main-HASH.js gzip 31.8 kB 31.8 kB N/A
webpack-HASH.js gzip 1.7 kB 1.7 kB
Overall change 46.9 kB 46.9 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary vercel/next.js fix/attempeted-import-error Change
polyfills-HASH.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages
vercel/next.js canary vercel/next.js fix/attempeted-import-error Change
_app-HASH.js gzip 194 B 195 B N/A
_error-HASH.js gzip 182 B 181 B N/A
amp-HASH.js gzip 502 B 501 B N/A
css-HASH.js gzip 320 B 322 B N/A
dynamic-HASH.js gzip 2.5 kB 2.5 kB N/A
edge-ssr-HASH.js gzip 255 B 256 B N/A
head-HASH.js gzip 350 B 349 B N/A
hooks-HASH.js gzip 368 B 369 B N/A
image-HASH.js gzip 4.22 kB 4.21 kB N/A
index-HASH.js gzip 257 B 256 B N/A
link-HASH.js gzip 2.62 kB 2.61 kB N/A
routerDirect..HASH.js gzip 310 B 311 B N/A
script-HASH.js gzip 384 B 383 B N/A
withRouter-HASH.js gzip 306 B 308 B N/A
1afbb74e6ecf..834.css gzip 106 B 106 B
Overall change 106 B 106 B
Client Build Manifests
vercel/next.js canary vercel/next.js fix/attempeted-import-error Change
_buildManifest.js gzip 483 B 485 B N/A
Overall change 0 B 0 B
Rendered Page Sizes
vercel/next.js canary vercel/next.js fix/attempeted-import-error Change
index.html gzip 527 B 527 B
link.html gzip 539 B 539 B
withRouter.html gzip 522 B 522 B
Overall change 1.59 kB 1.59 kB
Edge SSR bundle Size
vercel/next.js canary vercel/next.js fix/attempeted-import-error Change
edge-ssr.js gzip 94 kB 94 kB N/A
page.js gzip 149 kB 149 kB N/A
Overall change 0 B 0 B
Middleware size
vercel/next.js canary vercel/next.js fix/attempeted-import-error Change
middleware-b..fest.js gzip 622 B 626 B N/A
middleware-r..fest.js gzip 151 B 149 B N/A
middleware.js gzip 47.4 kB 47.4 kB N/A
edge-runtime..pack.js gzip 1.94 kB 1.94 kB
Overall change 1.94 kB 1.94 kB
Next Runtimes
vercel/next.js canary vercel/next.js fix/attempeted-import-error Change
app-page-exp...dev.js gzip 166 kB 166 kB
app-page-exp..prod.js gzip 95.1 kB 95.1 kB
app-page-tur..prod.js gzip 96.9 kB 96.9 kB
app-page-tur..prod.js gzip 91.5 kB 91.5 kB
app-page.run...dev.js gzip 135 kB 135 kB
app-page.run..prod.js gzip 90 kB 90 kB
app-route-ex...dev.js gzip 22 kB 22 kB
app-route-ex..prod.js gzip 14.8 kB 14.8 kB
app-route-tu..prod.js gzip 14.8 kB 14.8 kB
app-route-tu..prod.js gzip 14.6 kB 14.6 kB
app-route.ru...dev.js gzip 21.7 kB 21.7 kB
app-route.ru..prod.js gzip 14.6 kB 14.6 kB
pages-api-tu..prod.js gzip 9.43 kB 9.43 kB
pages-api.ru...dev.js gzip 9.7 kB 9.7 kB
pages-api.ru..prod.js gzip 9.43 kB 9.43 kB
pages-turbo...prod.js gzip 22 kB 22 kB
pages.runtim...dev.js gzip 22.7 kB 22.7 kB
pages.runtim..prod.js gzip 22 kB 22 kB
server.runti..prod.js gzip 49.7 kB 49.7 kB
Overall change 922 kB 922 kB
Diff details
Diff for 3f784ff6-HASH.js

Diff too large to display

Diff for 68-HASH.js

Diff too large to display

Commit: ca25005

@huozhi huozhi marked this pull request as ready for review February 7, 2024 23:12
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
3 participants