Custom .babelrc config does not work on 9.4.0

Bug report

When using custom configs in next.config.js and a custom .babelrc file, the custom babel config is not applied.

Describe the bug

I have custom configs in next.config.js and am using a custom .babelrc and this plugin to load it. On next@9.3.6, this worked perfectly fine for me. However, when I upgraded to version 9.4.0, it stopped working.

I made some structural changes to my app and realized that I could just use the built-in custom .babelrc approach as outlined in the docs here. However, when I used this method on version 9.3.6, it no longer applies my custom babel config. It also does not work on version 9.4.0.

All I do is add some plugins in the .babelrc.

When I run the development server, I see the following in my terminal. It states that a custom .babelrc is being used; however, it states it after the app begins compiling.

When I add this line to next.config.js, it works again.

defaultLoaders.babel.options.configFile = path.resolve(__dirname, '.babelrc');

To Reproduce

1. Create a next app with next.config.js and .babelrc at root
2. Add a plugin like @babel/plugin-transform-flow-strip-types to .babelrc and add a file with flow types
3. Run the app in dev mode
4. See that the custom .babelrc is not applied (i.e. flowtypes are not stripped, resulting a compilation error)

Expected behavior

Custom .babelrc should be applied and, in the above example, flowtypes should be stripped and the app should compile successfully.

System information

• OS: macOS
• Version of Next.js: 9.4.0
• Version of Node.js: 12.16.1

[ldthorne]

I’m having a seemingly similar issue, though my project was working in 9.3.6 and stopped working when I upgraded to 9.4.0. I have a custom .babelrc with the following contents:

{
  "plugins": ["lodash"],
  "presets": [
    [
      "next/babel",
      {
        "preset-env": {
          "targets": "> 0.25%, Safari >= 10, iOS >= 10"
        },
        "styled-jsx": {
          "plugins": ["styled-jsx-plugin-postcss"]
        }
      }
    ]
  ]
}

With that configuration, when I run yarn dev, which runs my custom server (can provide code if you need it, but it’s very basic), it hangs with wait - compiling.... If I remove the following from the .babelrc the app compiles, but obviously most of my styling breaks:

"styled-jsx": {
  "plugins": ["styled-jsx-plugin-postcss"]
}

Using Next.js 9.4.0 / Node 12.13.0. Let me know what other information you need.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.