custom babel configuration not working

[yaohuangguan]

Verify canary release

• [X] 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

[TheMechanic]

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]

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

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]

@yaohuangguan Do you find some new solution? I have same problem, can you please share your rollup babel plugin config? Thanks

[yaohuangguan]

@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]

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 is reference from create-react-app's webpack config