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

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

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

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.

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 = {};

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

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 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.

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?