Description
Verify canary release
- I verified that the issue exists in the latest Next.js canary release
Provide environment information
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 20.5.0: Sat May 8 05:10:31 PDT 2021; root:xnu-7195.121.3~9/RELEASE_ARM64_T8101
Binaries:
Node: 16.13.1
npm: 8.1.2
Yarn: 1.22.10
pnpm: 7.0.0-rc.2
Relevant packages:
next: 13.0.7
eslint-config-next: 13.0.7
react: 18.2.0
react-dom: 18.2.0
warn - Latest canary version not detected, detected: "13.0.7", newest: "13.0.8-canary.3".
Please try the latest canary version (npm install next@canary) to confirm the issue still exists before creating a new issue.
Read more - https://nextjs.org/docs/messages/opening-an-issue
✨ Done in 2.14s.
Which area(s) of Next.js are affected? (leave empty if unsure)
No response
Link to the code that reproduces this issue
https://github.com/yaohuangguan/reproduction-next-babel
To Reproduce
https://github.com/yaohuangguan/reproduction-next-babel
Describe the Bug
so my babel.config.json is like this
{
"presets": [
[
"next/babel",
{
"preset-env": {
"targets": {
"browsers": [
"> 1%",
"last 2 versions",
"safari >= 7",
"ios >= 7",
"chrome >= 50"
]
},
"debug": true,
"useBuiltIns": "usage",
"corejs": "3",
"forceAllTransforms": true
}
}
]
],
"plugins": [
"@babel/plugin-transform-arrow-functions",
"@babel/plugin-proposal-optional-chaining",
"@babel/plugin-proposal-nullish-coalescing-operator",
"@babel/plugin-proposal-object-rest-spread",
"@babel/plugin-proposal-class-properties",
"babel-plugin-styled-components"
],
"sourceMaps": "both"
}
Technically, it should transform to the code that can be running on safari 12 or larger than safari 7. In fact, my ios 12, safari 12 still cannot open it. i suspect that the 3rd party script involves the es6 code so no matter how i configure babel, the es6 code still exist.
Given the error Unexpected token '?' Because it is minified code, can't really see where the error came from, even though i turned on the productionSourcemap to true.
Also i tried es5-validator to postbuild, any es6 code exists
Also wanna inquire nextjs side, if there's option to force to let all 3rd party scirpt to be transformed. could you help explain what should i do to transform all the code in my application to es5?
I found out a reference for vite to add a plugin to polyfill all legacy code, like this, see if nextjs can have similar settings in next.config.js
https://github.com/vitejs/vite/tree/main/packages/plugin-legacy
Thank you!
Expected Behavior
safari12 can open the page
Which browser are you using? (if relevant)
safari 12
How are you deploying your application? (if relevant)
next export
Metadata
Metadata
Assignees
Type
Projects
Milestone
Relationships
Development
Participants
Activity
TheMechanic commentedon Jan 3, 2023
Hello ! I have exactly the same problem. third-parties are not transform, causing i cannot run my application on Safari 12...
Any news about it ?
thanks a lot
yaohuangguan commentedon Jan 7, 2023
Hi, still no solution. Tried using swc individually to transform to es5 after the nextjs build, but no luck. i tried using rollup babel plugin to transform my es6 npm package to es5, which makes my app working on safari 12. But, that's really an last resort, as it does not solve the root cause. i still finding how to make nextjs capable transform every es6 package to babel preset env level code
dyk98 commentedon Feb 2, 2023
@yaohuangguan Do you find some new solution? I have same problem, can you please share your rollup babel plugin config? Thanks
yaohuangguan commentedon Feb 2, 2023
@dyk98 @TheMechanic Hi I have already resolved my issue. I fixed it by using swc cli to transform the code to es5 again after the next.js build. So I gave up on the babel, i created .swcrc and target set to es5.
Then, add postbuild script in package.json running a shell script, basically you need to transform your dist or out directory static files to es5, running like npx swc ./out/_next/static ./output (just pseudo code, you can find exact command in swc website)
also don't forget to keep the css folder, because swc will ignore the css folders after transformed
galaxynova1999 commentedon Feb 24, 2023
add specific rule to let babel process all js file from node_modules
this is reference from create-react-app's webpack config
nextjs-bot commentedon Feb 4, 2025
This issue has been automatically marked as stale due to two years of inactivity. It will be closed in 7 days unless there’s further input. If you believe this issue is still relevant, please leave a comment or provide updated details. Thank you.
nextjs-bot commentedon Feb 11, 2025
This issue has been automatically closed due to two years of inactivity. If you’re still experiencing a similar problem or have additional details to share, please open a new issue following our current issue template. Your updated report helps us investigate and address concerns more efficiently. Thank you for your understanding!
github-actions commentedon Feb 26, 2025
This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.