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: babel usage with next/image #61835

Merged
merged 4 commits into from
Feb 8, 2024
Merged

fix: babel usage with next/image #61835

merged 4 commits into from
Feb 8, 2024

Conversation

styfle
Copy link
Member

@styfle styfle commented Feb 8, 2024

Why

The process/browser lib was imported and being transformed, but process.browser = true turns to true = true that causes the compilation error, we need to exclude them from certain compilation layers

What

Closes NEXT-2410
Closes NEXT-2328

Copy link

socket-security bot commented Feb 8, 2024

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package New capabilities Transitives Size Publisher
npm/picomatch@4.0.1 None 0 85.2 kB jonschlinkert

🚮 Removed packages: npm/picomatch@3.0.1

View full report↗︎

@ijjk
Copy link
Member

ijjk commented Feb 8, 2024

Tests Passed

@ijjk
Copy link
Member

ijjk commented Feb 8, 2024

Stats from current PR

Default Build
General Overall increase ⚠️
vercel/next.js canary vercel/next.js fix-babel-with-next-image Change
buildDuration 11.9s 11.8s N/A
buildDurationCached 6.4s 5.3s N/A
nodeModulesSize 196 MB 196 MB ⚠️ +3.53 kB
nextStartRea..uration (ms) 432ms 425ms N/A
Client Bundles (main, webpack)
vercel/next.js canary vercel/next.js fix-babel-with-next-image 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.6 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-babel-with-next-image 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-babel-with-next-image 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.19 kB 4.18 kB N/A
index-HASH.js gzip 257 B 256 B N/A
link-HASH.js gzip 2.67 kB 2.67 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-babel-with-next-image 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-babel-with-next-image Change
index.html gzip 528 B 527 B N/A
link.html gzip 542 B 540 B N/A
withRouter.html gzip 523 B 522 B N/A
Overall change 0 B 0 B
Edge SSR bundle Size
vercel/next.js canary vercel/next.js fix-babel-with-next-image 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-babel-with-next-image Change
middleware-b..fest.js gzip 620 B 624 B N/A
middleware-r..fest.js gzip 151 B 149 B N/A
middleware.js gzip 47.4 kB 47.4 kB
edge-runtime..pack.js gzip 1.94 kB 1.94 kB
Overall change 49.3 kB 49.3 kB
Next Runtimes
vercel/next.js canary vercel/next.js fix-babel-with-next-image 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
Commit: 6d95b6f

@huozhi
Copy link
Member

huozhi commented Feb 8, 2024

Update the changes, basically need to:

  • exclude process/browser module from compilation for babel in app pages layer
  • exclude next/dist/compiled from react refresh to avoid inserting ESM react refresh code causing crashes

@huozhi huozhi marked this pull request as ready for review February 8, 2024 22:43
@huozhi huozhi requested review from manovotny and lydiahallie and removed request for a team February 8, 2024 22:43
@styfle styfle merged commit 698fcbb into canary Feb 8, 2024
71 checks passed
@styfle styfle deleted the fix-babel-with-next-image branch February 8, 2024 23:16
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Feb 23, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Trivial .babelrc breaks <Image> component
3 participants