custom babel configuration not working #44250
Comments
|
Hello ! I have exactly the same problem. third-parties are not transform, causing i cannot run my application on Safari 12... thanks a lot |
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 |
|
@yaohuangguan Do you find some new solution? I have same problem, can you please share your rollup babel plugin config? Thanks |
|
@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. also don't forget to keep the css folder, because swc will ignore the css folders after transformed |
const nextConfig = {
webpack: (config, { defaultLoaders }) => {
// Process any JS outside of the app with Babel.
// Unlike the application JS, we only compile the standard ES features.
config.module.rules.push({
test: /\.(js|mjs)$/,
exclude: /@babel(?:\/|\\{1,2})runtime/,
use: defaultLoaders.babel,
});
return config;
},
};add specific rule to let babel process all js file from node_modules |
|
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. |
|
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! |
|
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. |
Verify 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
The text was updated successfully, but these errors were encountered: