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.

[timneutkens]

I've released a new canary version with my PR: https://github.com/vercel/next.js/releases/tag/v11.0.2-canary.1

You can try it out using yarn add next@canary (or npm install next@canary), takes a bit to be published (15-20mins). Let me know if that change helps 👍

[AndreSilva1993]

I've released a new canary version with my PR: https://github.com/vercel/next.js/releases/tag/v11.0.2-canary.1

You can try it out using yarn add next@canary (or npm install next@canary), takes a bit to be published (15-20mins). Let me know if that change helps 👍

I installed the canary version and the message does not appear? However the console.log I put in there is successfully displayed? I changed the .babelrc to a .babelrc.js to this:

console.log('Please appear in the terminal');

module.exports = {
  plugins: ['@emotion/babel-plugin'],
  presets: [
    [
      'next/babel',
      {
        'preset-react': {
          runtime: 'automatic',
          importSource: '@emotion/react',
        },
      },
    ],
  ],
  env: {
    test: {
      plugins: ['babel-plugin-dynamic-import-node'],
    },
  },
};

This is what I see in the terminal:

And to confirm that I had indeed installed the canary version I opened up the node_modules/next/package.json and this is what I see:

So I'm really confused by this.

[JesseVelden]

Hmm, yes that is what I already thought that it wouldn't pick it up somehow. I will try to debug (maybe in the weekend if I have time) it in the get-config.ts and compare the results with the 10.2.3 version.

[AndreSilva1993]

@MegaCookie @timneutkens Managed to find out what the issue was. In my custom server I was changing the dir property which was not the same directory as the .babelrc lives in. Last version this was not an issue but on this major one, the getBaseWebpackConfig method looks for the custom Babel files inside this dir property. I don't know if this was an intentional change or if in the last version, I was taking advantage of an unexpected behaviour but these are my findings.

If I move the server.ts file into the root directory (it was in the src/server directory with the dir property pointing one folder above to the src/ folder) and remove the dir override, everything works as expected. And I think I'll leave it like this and just change my build process. Other solution which seems less contrived would be to just point the dir property to the correct folder while maintaining the rest of the project intact.

So basically what I found is that on Next.js 10 having the dir property not pointing to the folder where the .babelrc is, works unlike in Next.js 11.

[JesseVelden]

@MegaCookie @timneutkens Managed to find out what the issue was. In my custom server I was changing the dir property which was not the same directory as the .babelrc lives in. Last version this was not an issue but on this major one, the getBaseWebpackConfig method looks for the custom Babel files inside this dir property. I don't know if this was an intentional change or if in the last version, I was taking advantage of an unexpected behaviour but these are my findings.

If I move the server.ts file into the root directory and remove the dir override, everything works as expected. And I think I'll leave it like this and just change my build process.

Ah nice finding! I will also try it this weekend, and let you all know.

[JesseVelden]

It is quite interesting. I finally got version 11 to work in my project again. I had a next.config.js inside the src folder, but found out by the docs (https://nextjs.org/docs/advanced-features/src-directory) that it should actually be in the root directory. Then still my .babelrc file wasn't picked up by Next. When I placed it inside the src directory it started to actually pickup the .babelrc file.

This was the case in which I used Next in combination with a Custom (express) server.
So in my case the dir property of the nextApp was pointing to the wrong folder (in my case I added the /src in the dir option, but when removing this appendix, it had picked up the .babelrc file).
And also make sure your next.config.js is not in the src directory and change the distDir to just .next if needed. And additionally if you have a monorepo structure like me with a server and client repo, then all the babel plugins needs to be installed in the server repo if they are used by the Next.js client side.

It's a bit stupid but easily overlooked 😬, but I think the version 11 behaviour of only picking up a .babelrc file in the right directory makes more sense.

Maybe a note of this behaviour change on the upgrade documentation/ custom server docs will be a good addition.

[DaveStein]

npx babel src/pages/index.tsx works for me.

When I run tests I get Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation. even though I have this setup:

// next.config.js
module.exports = {
  reactStrictMode: true,
};

// src/.babelrc or .babelrc in root
{
    "presets": [
        "next/babel"
    ]
}

// jest.config.js
module.exports = {
  preset: 'ts-jest',
  collectCoverageFrom: ['src/**/*.ts', 'src/**/*.tsx'],
  coveragePathIgnorePatterns: ['__mocks__']
};

[ssylvia]

@timneutkens In my case, next seems to pick up my app's custom babel correctly but it does not find the other .babelrc files from the other monorepo packages that I'm transpiling with next-transpile-modules.

In next v10, I got the following output:

info  - Using external babel configuration from /Users/{username}/path-to-repo/monorepo-root-folder/packages/next-app/babel.config.js
info  - Using external babel configuration from /Users/{username}/path-to-repo/monorepo-root-folder/packages/components/.babelrc
info  - Using external babel configuration from /Users/{username}/path-to-repo/monorepo-root-folder/packages/shared/.babelrc
info  - Using external babel configuration from /Users/{username}/path-to-repo/monorepo-root-folder/packages/editor/.babelrc
info  - Using external babel configuration from /Users/{username}/path-to-repo/monorepo-root-folder/packages/utils/.babelrc

Now after upgrading to 11.0.2-canary-3, I get (notice all the same file):

info  - Using external babel configuration from /Users/{username}/path-to-repo/monorepo-root-folder/packages/next-app/babel.config.js
info  - Using external babel configuration from /Users/{username}/path-to-repo/monorepo-root-folder/packages/next-app/babel.config.js
info  - Using external babel configuration from /Users/{username}/path-to-repo/monorepo-root-folder/packages/next-app/babel.config.js
info  - Using external babel configuration from /Users/{username}/path-to-repo/monorepo-root-folder/packages/next-app/babel.config.js
info  - Using external babel configuration from /Users/{username}/path-to-repo/monorepo-root-folder/packages/next-app/babel.config.js
info  - Using external babel configuration from /Users/{username}/path-to-repo/monorepo-root-folder/packages/next-app/babel.config.js

I'm using a custom server, setting my dir prop to process.cwd(). And my directory structure at process.cwd() looks like:

# /Users/{username}/path-to-repo/monorepo-root-folder/packages/next-app
dist/index.js # custom node server
components/...
pages/...
public/...
babel.config.js
next.config.js
package.json

And my babel.config.js looks like:

module.exports = {
  babelrcRoots: [
    '.',
    '../utils',
    '../components',
    '../shared',
    '../editor',
  ],
  presets: ['next/babel', 'shared-config/babel/next-storymaps'],
}

[ssylvia]

Just following up on this ticket. Looks like my specific issue is that next v11 is not respecting the babelrcRoots defined in the custom babel config: #28934

[jasonwilliams]

#29500 is also affected by the babel loader change

[RavenHursT]

I'm running into this w/ NextJS 12

I have a .babelrc.js file in the root of my project:

console.log('WTF??')
module.exports = {
  "env": {
    "development": {
      "plugins": [
        [
          "foo",
          {
            "ssr": true,
            "minify": true,
            "transpileTemplateLiterals": true,
            "pure": true,
            "displayName": true,
            "preprocess": false
          }
        ]
      ],
      "presets": ["next/babel"]
    },
    "production": {
      "plugins": [
        [
          "foo",
          {
            "ssr": true,
            "minify": true,
            "transpileTemplateLiterals": true,
            "pure": true,
            "displayName": true,
            "preprocess": false
          }
        ]
      ],
      "presets": ["next/babel"]
    }
  },
  "plugins": [
    [
      "foo",
      {
        "ssr": true,
        "minify": true,
        "transpileTemplateLiterals": true,
        "pure": true,
        "displayName": true,
        "preprocess": false
      }
    ]
  ],
  "presets": ["next/babel"]
}

When I run next build/src I see the WTF?? console log, but as you can see, I've replaced all the plug names w/ "foo".

Shouldn't the build fail when babel cannot find a plugin module by the given name??

Seems like the file's being read, but the exported config isn't actually being applied to babel upon build

[brianmorin-ef]

I was running into what I think was the same problem on v12 with custom server. I added an empty-ish file called babel.config.js into my ./src directory and it's causing my real babel config to get picked up in the root. So the key was to have a config file in both places but put the actual configuring into the root.

In my custom server: const app = next({ dir: "./src", dev: isDev });

My root babel.config.js is my actual config filled in with stuff about emotion, etc.

src/babel.config.js:

module.exports = {};

[dhay]

We just upgraded to Next 12 and had to do something similar to @brianmorin-ef . We also have a custom server that sets the dir to 'src'

const nextApp = next({ dev, dir: 'src' });

However, we had to do something different with our babel config. We kept the original configuration file in the root directory (e.g. .babelrc.config.js) and then created the following file: src/babel.config.js with the contents:

module.exports = require('../.babelrc.js');

I know the direction is to use SWC instead of babel, but in the meantime, it seems like there might be a regression in the way bable configuration is detected and evaluated.