Custom .babelrc file not being loaded after upgrading to Next.js 11

[AndreSilva1993]

What version of Next.js are you using?

11.0.1

What version of Node.js are you using?

12.16.1

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

Other platform

Describe the Bug

Before upgrading to Next.js 11, my custom .babelrc file (which sits in the project's root directory) would be picked up by and used. When I booted up the project, I would always receive this message:

However, after upgrading to 11, I no longer get this message when booting up the application and Emotion started complaining about some features that require the usage of their @emotion/babel-plugin which leads me to believe that the Babel custom configuration is not being picked up. I do have a custom server and my .babelrc looks like this:

{
  "plugins": ["@emotion/babel-plugin"],
  "presets": [
    [
      "next/babel",
      {
        "preset-react": {
          "runtime": "automatic",
          "importSource": "@emotion/react"
        }
      }
    ]
  ],
  "env": {
    "test": {
      "plugins": ["babel-plugin-dynamic-import-node"]
    }
  }
}

Expected Behavior

Next.js application would pick up the .babelrc file like it's stated in its documentation and like it happened in v10.

To Reproduce

https://stackblitz.com/edit/nextjs-h1ihd3

In here I added a simple custom server that I took directly from your documentation and you can see that the message about the custom .babelrc being picked up, does not appear. You just need to run node server.js in the terminal.

[timneutkens]

The new babel loader does not have the log line the old one had. So I've opened a PR to add it: #26570. It is picking up the particular babelrc from the reproduction though 👍 E.g. try adding a syntax error in .babelrc of the reproduction and refreshing, you'll see that it does not load.

[AndreSilva1993]

Yeah, you're right. Then I'm not exactly sure of what's happening in my project because I'm getting this error Component selectors can only be used in conjunction with @emotion/babel-plugin which I never faced since I always had the Emotion babel plugin configured. Perhaps I could wait for your PR to be certain that the .babelrc is indeed being loaded or not?

[JesseVelden]

I also have the same problem that I think my .babelrc is not loaded with the @emotion/babel-plugin in particular. I debugged it by adding some console.log statements in a .babelrc.js file, and that seems to be working. Unfortunately the page is getting no styles as I am relying on @emotion/babel-plugin for styles.

I tried to make a small reproduction example, but my fresh next.js project seems to be working fine. I am not sure what is going wrong then, but got the same problem as @AndreSilva1993.

[AndreSilva1993]

I also have the same problem that I think my .babelrc is not loaded with the @emotion/babel-plugin in particular. I debugged it by adding some console.log statements in a .babelrc.js file, and that seems to be working. Unfortunately the page is getting no styles as I am relying on @emotion/babel-plugin for styles.

I tried to make a small reproduction example, but my fresh next.js project seems to be working fine. I am not sure what is going wrong then, but got the same problem as @AndreSilva1993.

Can confirm this as well, the file is actually picked up as I also added a console.log in there which correctly appears when booting up the application. So could this be an issue specific to the @emotion/babel-plugin or something related to the new babel loader which broke this plugin in particular?

[JesseVelden]

I also have the same problem that I think my .babelrc is not loaded with the @emotion/babel-plugin in particular. I debugged it by adding some console.log statements in a .babelrc.js file, and that seems to be working. Unfortunately the page is getting no styles as I am relying on @emotion/babel-plugin for styles.
I tried to make a small reproduction example, but my fresh next.js project seems to be working fine. I am not sure what is going wrong then, but got the same problem as @AndreSilva1993.

Can confirm this as well, the file is actually picked up as I also added a console.log in there which correctly appears when booting up the application. So could this be an issue specific to the @emotion/babel-plugin or something related to the new babel loader which broke this plugin in particular?

I think the new babel loader doesn't pick it up in our particular projects as I tried to make an reproduction, but that did actually work even with the @emotion/babel-plugin.

@AndreSilva1993 do you also have multiple babel files through your entire project? (that could be the case for example if you have a monorepo). Maybe the new babel loader, somehow loads the file but ditches it for another one.

[AndreSilva1993]

I also have the same problem that I think my .babelrc is not loaded with the @emotion/babel-plugin in particular. I debugged it by adding some console.log statements in a .babelrc.js file, and that seems to be working. Unfortunately the page is getting no styles as I am relying on @emotion/babel-plugin for styles.
I tried to make a small reproduction example, but my fresh next.js project seems to be working fine. I am not sure what is going wrong then, but got the same problem as @AndreSilva1993.

Can confirm this as well, the file is actually picked up as I also added a console.log in there which correctly appears when booting up the application. So could this be an issue specific to the @emotion/babel-plugin or something related to the new babel loader which broke this plugin in particular?

I think the new babel loader doesn't pick it up in our particular projects as I tried to make an reproduction, but that did actually work even with the @emotion/babel-plugin.

@AndreSilva1993 do you also have multiple babel files through your entire project? (that could be the case for example if you have a monorepo). Maybe the new babel loader, somehow loads the file but ditches it for another one.

I had another .babelrc for the server which sits in the src/server folder while the client one sits in the root directory. Tried adding the @emotion/babel-plugin to the server one just to test it out and the error persists. However the Next.js should only pick up the one present in the root directory 🤔

[timleppard]

FWIW I was experiencing this with next build after upgrading, removing the old .next/ build directory resolved it.