Gatsby: babel.config.js not picked up since 2.13.30 (regression)

[ahfarmer]

Description

Since updating Gatsby to 2.13.30 (or newer), I can no longer use my own custom babel.config.js. babel.config.js is the new, better way to configure Babel. See Babel config files docs.

Steps to reproduce

I've created a minimal repro here: https://github.com/ahfarmer/gatsby-babel-config-issue
To create the repro I just ran gatsby new, then added babel.config.js and deleted some unnecessary files.

Here's how you can reproduce easily:

git clone https://github.com/ahfarmer/gatsby-babel-config-issue
cd gatsby-babel-config-issue
yarn install
gatsby develop

Note that the console.log line that I have placed in babel.config.js does NOT print out. There are other ways you could show that babel.config.js is not being considered, but I think this is the easiest one.

Expected result

We should see this line printed to the console: "👍 babel.config.js is being used"

Actual result

babel.config.js is not used for some reason. The code within does not run and the log statement doesn't print out.

Workaround

yarn add [email protected]
yarn develop

With this older version of Gatsby, you will see that babel.config.js is being used.

Related Issues

Basically the same issue reported here: https://github.com/birkir/gatsby-source-graphql-universal/issues/3

I opened this issue to show that it is not an issue with gatsby-source-graphql-universal, which I am not using.

They are reporting that this change caused the issue: https://github.com/gatsbyjs/gatsby/pull/15875

Environment

  System:
    OS: macOS 10.14.5
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.15.3 - /usr/local/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  Languages:
    Python: 3.6.8 - /anaconda3/bin/python
  Browsers:
    Chrome: 75.0.3770.142
    Firefox: 68.0.1
    Safari: 12.1.1
  npmPackages:
    gatsby: ^2.13.39 => 2.13.39 
    gatsby-image: ^2.2.6 => 2.2.6 
    gatsby-plugin-manifest: ^2.2.4 => 2.2.4 
    gatsby-plugin-offline: ^2.2.4 => 2.2.4 
    gatsby-plugin-react-helmet: ^3.1.2 => 3.1.2 
    gatsby-source-filesystem: ^2.1.6 => 2.1.6 
  npmGlobalPackages:
    gatsby-cli: 2.7.17

[ahfarmer]

I tested a few different Gatsby versions to see when the problem was introduced:

2.13.29: working
2.13.30: not working
2.13.39: not working

So looks like something in 2.13.30 caused this issue.

[pieh]

/cc @wardpeet

Did this stop working only for babel.config.js file, or for .babelrc as well?

[pieh]

It does seem like https://github.com/gatsbyjs/gatsby/blob/e348ae6c6f9707f3d1445788731e313f56d52f15/packages/gatsby/src/utils/webpack-utils.js#L327-L331 ( configFile: false part ) is most likely reason for this.

@wardpeet Was this setting explicitly needed?

[wardpeet]

I disabled it because people should use .babelrc files instead. babel.config.js is used for library owners or in the root but shouldn't be used on a project level.

https://babeljs.io/docs/en/config-files#project-wide-configuration

[ahfarmer]

Let's be clear: babel.config.js is referred to in the docs as a "project-wide config". It is definitely meant to be used at the project level.

I haven't seen anything saying babel.config.js is for library owners only. Can you provide a source @wardpeet?

[wardpeet]

https://github.com/gatsbyjs/gatsby/pull/16205#issuecomment-516320418

Oh gatsby is always used as a "root" project and I don't see an immediate use case to programmatically add/remove config to babel for a gatsby project. Configs are mostly static and might change depending on build (production) or develop (development).

If you want to share configs between projects you can use a babel.config.js in your root. For themes, this might be a good solution 🤔.

babeljs.io/docs/en/configuration#what-s-your-use-case

Let me revert the comment as it might not be the best idea to disable it. Thanks @m-allanson for letting me re-iterating