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.

Sign up for GitHub

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

Jump to bottom

Updated example to match babel 7 recommendation. #10867

Closed
wants to merge 2 commits into from
Closed

Updated example to match babel 7 recommendation. #10867

wants to merge 2 commits into from

Conversation

Murillo2380
Copy link

@Murillo2380 Murillo2380 commented Mar 6, 2020 •
edited
Loading

Reason

After working on a project, I had issues adding Jest for testing. After research I realized babel.config.js is the recommended way on configuring babel after Babel 7 which jest also recommends

Other people had this problem and this comment shows that changing to babel.config.js solved the problem for many developers.

To show that you can use babel.config.js for custom babel configuration, I updated the example.

Please, note that the docs should be updated accordingly, to let people know they can also use babel.config.js (not sure if I should have created an issue for that).

@Murillo2380 Murillo2380 requested review from lfades and Timer as code owners March 6, 2020 10:16
@ijjk
Copy link
Member

ijjk commented Mar 6, 2020

Stats from current PR

Default Server Mode
General
zeit/next.js canary Murillo2380/next.js udpate_custom_babel Change
buildDuration 10.5s 10.3s -242ms
nodeModulesSize 56.5 MB 56.5 MB ✓
Client Bundles (main, webpack, commons)
zeit/next.js canary Murillo2380/next.js udpate_custom_babel Change
main-HASH.js gzip 5.77 kB 5.77 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
de003c3a9d30..cfaa.js gzip 9.77 kB 9.77 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 55.4 kB 55.4 kB ✓
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary Murillo2380/next.js udpate_custom_babel Change
main-HASH.module.js gzip 4.78 kB 4.78 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
de003c3a9d30..dule.js gzip 6.71 kB 6.71 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 51.4 kB 51.4 kB ✓
Legacy Client Bundles (polyfills)
zeit/next.js canary Murillo2380/next.js udpate_custom_babel Change
polyfills-HASH.js gzip 18.9 kB 18.9 kB ✓
Overall change 18.9 kB 18.9 kB ✓
Client Pages
zeit/next.js canary Murillo2380/next.js udpate_custom_babel Change
_app.js gzip 1.09 kB 1.09 kB ✓
_error.js gzip 2.96 kB 2.96 kB ✓
hooks.js gzip 664 B 664 B ✓
index.js gzip 222 B 222 B ✓
link.js gzip 1.89 kB 1.89 kB ✓
routerDirect.js gzip 279 B 279 B ✓
withRouter.js gzip 278 B 278 B ✓
Overall change 7.38 kB 7.38 kB ✓
Client Pages Modern
zeit/next.js canary Murillo2380/next.js udpate_custom_babel Change
_app.module.js gzip 594 B 594 B ✓
_error.module.js gzip 2.06 kB 2.06 kB ✓
hooks.module.js gzip 370 B 370 B ✓
index.module.js gzip 212 B 212 B ✓
link.module.js gzip 1.48 kB 1.48 kB ✓
routerDirect..dule.js gzip 271 B 271 B ✓
withRouter.m..dule.js gzip 270 B 270 B ✓
Overall change 5.26 kB 5.26 kB ✓
Client Build Manifests
zeit/next.js canary Murillo2380/next.js udpate_custom_babel Change
_buildManifest.js gzip 61 B 61 B ✓
_buildManife..dule.js gzip 61 B 61 B ✓
Overall change 122 B 122 B ✓
Rendered Page Sizes
zeit/next.js canary Murillo2380/next.js udpate_custom_babel Change
index.html gzip 914 B 914 B ✓
link.html gzip 922 B 922 B ✓
withRouter.html gzip 910 B 910 B ✓
Overall change 2.75 kB 2.75 kB ✓
Serverless Mode (Decrease detected ✓)
General
zeit/next.js canary Murillo2380/next.js udpate_custom_babel Change
buildDuration 11s 11.3s ⚠️ +292ms
nodeModulesSize 56.5 MB 56.5 MB ✓
Client Bundles (main, webpack, commons)
zeit/next.js canary Murillo2380/next.js udpate_custom_babel Change
main-HASH.js gzip 5.77 kB 5.77 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
de003c3a9d30..cfaa.js gzip 9.77 kB 9.77 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 55.4 kB 55.4 kB ✓
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary Murillo2380/next.js udpate_custom_babel Change
main-HASH.module.js gzip 4.78 kB 4.78 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
de003c3a9d30..dule.js gzip 6.71 kB 6.71 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 51.4 kB 51.4 kB ✓
Legacy Client Bundles (polyfills)
zeit/next.js canary Murillo2380/next.js udpate_custom_babel Change
polyfills-HASH.js gzip 18.9 kB 18.9 kB ✓
Overall change 18.9 kB 18.9 kB ✓
Client Pages
zeit/next.js canary Murillo2380/next.js udpate_custom_babel Change
_app.js gzip 1.09 kB 1.09 kB ✓
_error.js gzip 2.96 kB 2.96 kB ✓
hooks.js gzip 664 B 664 B ✓
index.js gzip 222 B 222 B ✓
link.js gzip 1.89 kB 1.89 kB ✓
routerDirect.js gzip 279 B 279 B ✓
withRouter.js gzip 278 B 278 B ✓
Overall change 7.38 kB 7.38 kB ✓
Client Pages Modern
zeit/next.js canary Murillo2380/next.js udpate_custom_babel Change
_app.module.js gzip 594 B 594 B ✓
_error.module.js gzip 2.06 kB 2.06 kB ✓
hooks.module.js gzip 370 B 370 B ✓
index.module.js gzip 212 B 212 B ✓
link.module.js gzip 1.48 kB 1.48 kB ✓
routerDirect..dule.js gzip 271 B 271 B ✓
withRouter.m..dule.js gzip 270 B 270 B ✓
Overall change 5.26 kB 5.26 kB ✓
Client Build Manifests
zeit/next.js canary Murillo2380/next.js udpate_custom_babel Change
_buildManifest.js gzip 61 B 61 B ✓
_buildManife..dule.js gzip 61 B 61 B ✓
Overall change 122 B 122 B ✓
Serverless bundles Overall decrease ✓
zeit/next.js canary Murillo2380/next.js udpate_custom_babel Change
_error.js gzip 293 kB 292 kB -1.12 kB
404.html gzip 1.32 kB 1.32 kB ✓
hooks.html gzip 955 B 955 B ✓
index.js gzip 292 kB 292 kB -179 B
link.js gzip 299 kB 300 kB ⚠️ +189 B
routerDirect.js gzip 299 kB 299 kB -472 B
withRouter.js gzip 298 kB 298 kB -188 B
Overall change 1.48 MB 1.48 MB -1.77 kB

@ijjk
Copy link
Member

ijjk commented Mar 7, 2020

Stats from current PR

Default Server Mode
General
zeit/next.js canary Murillo2380/next.js udpate_custom_babel Change
buildDuration 9.1s 9s -109ms
nodeModulesSize 56.5 MB 56.5 MB ✓
Client Bundles (main, webpack, commons)
zeit/next.js canary Murillo2380/next.js udpate_custom_babel Change
main-HASH.js gzip 5.77 kB 5.77 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
de003c3a9d30..cfaa.js gzip 9.77 kB 9.77 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 55.4 kB 55.4 kB ✓
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary Murillo2380/next.js udpate_custom_babel Change
main-HASH.module.js gzip 4.78 kB 4.78 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
de003c3a9d30..dule.js gzip 6.71 kB 6.71 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 51.4 kB 51.4 kB ✓
Legacy Client Bundles (polyfills)
zeit/next.js canary Murillo2380/next.js udpate_custom_babel Change
polyfills-HASH.js gzip 18.9 kB 18.9 kB ✓
Overall change 18.9 kB 18.9 kB ✓
Client Pages
zeit/next.js canary Murillo2380/next.js udpate_custom_babel Change
_app.js gzip 1.09 kB 1.09 kB ✓
_error.js gzip 2.96 kB 2.96 kB ✓
hooks.js gzip 664 B 664 B ✓
index.js gzip 222 B 222 B ✓
link.js gzip 1.89 kB 1.89 kB ✓
routerDirect.js gzip 279 B 279 B ✓
withRouter.js gzip 278 B 278 B ✓
Overall change 7.38 kB 7.38 kB ✓
Client Pages Modern
zeit/next.js canary Murillo2380/next.js udpate_custom_babel Change
_app.module.js gzip 594 B 594 B ✓
_error.module.js gzip 2.06 kB 2.06 kB ✓
hooks.module.js gzip 370 B 370 B ✓
index.module.js gzip 212 B 212 B ✓
link.module.js gzip 1.48 kB 1.48 kB ✓
routerDirect..dule.js gzip 271 B 271 B ✓
withRouter.m..dule.js gzip 270 B 270 B ✓
Overall change 5.26 kB 5.26 kB ✓
Client Build Manifests
zeit/next.js canary Murillo2380/next.js udpate_custom_babel Change
_buildManifest.js gzip 61 B 61 B ✓
_buildManife..dule.js gzip 61 B 61 B ✓
Overall change 122 B 122 B ✓
Rendered Page Sizes
zeit/next.js canary Murillo2380/next.js udpate_custom_babel Change
index.html gzip 915 B 915 B ✓
link.html gzip 924 B 924 B ✓
withRouter.html gzip 910 B 910 B ✓
Overall change 2.75 kB 2.75 kB ✓
Serverless Mode (Decrease detected ✓)
General
zeit/next.js canary Murillo2380/next.js udpate_custom_babel Change
buildDuration 8.9s 9.5s ⚠️ +654ms
nodeModulesSize 56.5 MB 56.5 MB ✓
Client Bundles (main, webpack, commons)
zeit/next.js canary Murillo2380/next.js udpate_custom_babel Change
main-HASH.js gzip 5.77 kB 5.77 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
de003c3a9d30..cfaa.js gzip 9.77 kB 9.77 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 55.4 kB 55.4 kB ✓
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary Murillo2380/next.js udpate_custom_babel Change
main-HASH.module.js gzip 4.78 kB 4.78 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
de003c3a9d30..dule.js gzip 6.71 kB 6.71 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 51.4 kB 51.4 kB ✓
Legacy Client Bundles (polyfills)
zeit/next.js canary Murillo2380/next.js udpate_custom_babel Change
polyfills-HASH.js gzip 18.9 kB 18.9 kB ✓
Overall change 18.9 kB 18.9 kB ✓
Client Pages
zeit/next.js canary Murillo2380/next.js udpate_custom_babel Change
_app.js gzip 1.09 kB 1.09 kB ✓
_error.js gzip 2.96 kB 2.96 kB ✓
hooks.js gzip 664 B 664 B ✓
index.js gzip 222 B 222 B ✓
link.js gzip 1.89 kB 1.89 kB ✓
routerDirect.js gzip 279 B 279 B ✓
withRouter.js gzip 278 B 278 B ✓
Overall change 7.38 kB 7.38 kB ✓
Client Pages Modern
zeit/next.js canary Murillo2380/next.js udpate_custom_babel Change
_app.module.js gzip 594 B 594 B ✓
_error.module.js gzip 2.06 kB 2.06 kB ✓
hooks.module.js gzip 370 B 370 B ✓
index.module.js gzip 212 B 212 B ✓
link.module.js gzip 1.48 kB 1.48 kB ✓
routerDirect..dule.js gzip 271 B 271 B ✓
withRouter.m..dule.js gzip 270 B 270 B ✓
Overall change 5.26 kB 5.26 kB ✓
Client Build Manifests
zeit/next.js canary Murillo2380/next.js udpate_custom_babel Change
_buildManifest.js gzip 61 B 61 B ✓
_buildManife..dule.js gzip 61 B 61 B ✓
Overall change 122 B 122 B ✓
Serverless bundles Overall decrease ✓
zeit/next.js canary Murillo2380/next.js udpate_custom_babel Change
_error.js gzip 292 kB 292 kB -151 B
404.html gzip 1.32 kB 1.32 kB ✓
hooks.html gzip 955 B 955 B ✓
index.js gzip 292 kB 293 kB ⚠️ +762 B
link.js gzip 300 kB 299 kB -574 B
routerDirect.js gzip 299 kB 299 kB -670 B
withRouter.js gzip 298 kB 298 kB ⚠️ +339 B
Overall change 1.48 MB 1.48 MB -294 B

@lfades
Copy link
Member

lfades commented Mar 12, 2020

From babel docs regarding json configuration:

We recommend using this file type wherever possible: JS config files are handy if you have complex configuration that is conditional or otherwise computed at build time. However, the downside is that JS configs are less statically analyzable, and therefore have negative effects on cacheability, linting, IDE autocomplete, etc. Since babel.config.json and .babelrc.json are static JSON files, it allows other tools that use Babel such as bundlers to cache the results of Babel safely, which can be a huge build performance win.

JSON configuration should work, if it doesn't then that's a bug, but we shouldn't be recommending JS config over it.

If the example is broken a PR is welcome to fix it, but looks like this is not the case:

To show that you can use babel.config.js for custom babel configuration, I updated the example.

I'm closing the PR for now as we don't need the change, thank you!.

@lfades lfades closed this Mar 12, 2020
@vercel vercel locked as resolved and limited conversation to collaborators Jan 31, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@lfades lfades Awaiting requested review from lfades

@Timer Timer Awaiting requested review from Timer

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@Murillo2380 @ijjk @lfades