Gatsby v3 + monorepo + automatic JSX transform

[aaronadamsCA]

I'm having a tough time migrating a monorepo to Gatsby v3. I think it's Babel giving me some problems, and I'm starting to suspect there's currently no solution. I'm wondering if babel-preset-gatsby needs some work.

Working Gatsby v2 config

My monorepo is loosely based on the Gatsby v2 monorepo prior to the removal of the www/ folder: https://github.com/gatsbyjs/gatsby/tree/f49fe0b6a55407f13a3af23abe3ac489794606fe/www

Key bits:

• eslint and babel-eslint dev dependencies are hoisted to the workspace root.

• gatsby and its dependencies are in each individual site package.

• Root .eslintrc.cjs sets parser to babel-eslint and defines plugins and rules for all sites.

• Each site's gatsby-node.js enables the React 17 automatic JSX transform:

  exports.onCreateBabelConfig = ({ actions }) => {
    actions.setBabelPlugin({
      name: "@babel/plugin-transform-react-jsx",
      options: {
        runtime: "automatic",
        importSource: "theme-ui",
      },
    });
  };

Gatsby v3: What I've tried

(Note I did try to use babel-eslint first, that seemed to be a no-go.)

1. Change babel-eslint dependency to @babel/eslint-parser, update parser in .eslintrc.cjs to match.

   • ESLint: Parsing error: No Babel config file detected for FILENAME. Either disable config file checking with requireConfigFile: false, or configure Babel so that it can find the config files

   • Gatsby develop: JSX transform isn't working, indicating setBabelPlugin doesn't work anymore.

2. Install root dev dependency babel-preset-gatsby and create root babel.config.json:

   {
     "presets": [
       [
         "babel-preset-gatsby",
         {
           "reactRuntime": "automatic",
           "reactImportSource": "theme-ui"
         }
       ]
     ]
   }

   • ESLint: Parsing error: [BABEL] FILENAME: `babel-preset-gatsby` has been loaded, which consumes config generated by the Gatsby CLI. Set `NODE_ENV=test` to bypass, or run `gatsby build` first.

3. Remove root dev dependency babel-preset-gatsby. Copy the root babel.config.json above to each site package's .babelrc.json, then replace the root babel.config.json with:

   {
     "babelrcRoots": [".", "packages/*"]
   }

   • ESLint: Parsing error: Cannot find module 'babel-preset-gatsby', and also a bunch of JSX transform errors.

I've tried a few other things too (requireConfigFile: false among them), but at this point I think I'm probably done trying.

If anyone wants to help create a sample monorepo with Gatsby v3, React v17, and automatic JSX transform, I'm willing to help, but I've clearly demonstrated I'm unable to get this working myself! Hoping someone has begun to figure this out, as I'd like to take advantage of Gatsby Cloud hosting ASAP.