2

Let's say I have a monorepo structure like so:

monorepo/
    - babel.config.js
    - create-react-app/
        - .babelrc
        - craco.config.js
    - packages/
        - first-package
            - my-mdx-file.mdx
        - second-package

How do I configure my Create React App so that it's babel-loader uses the root babel.config.js?

I need this because I'm trying to import .mdx files inside the CRA from one of the packages outside the CRA. Apparently, this makes the CRA's babel-loader fail to load it's local .babelrc config - and consequently miss out on the babel-preset-react-app preset (giving it JSX support). The import therefore results in an "unexpected token" error when babel tries to transpile the MDX file.

...I think

As you can see I'm already using CRACO (to make CRA work with Less), and I've tried something like this:

// craco.config.js

const CracoBabelLoader = require('craco-babel-loader')

module.exports = {
    plugins: [
        {
            plugin: CracoBabelLoader,
            options: {
                rootMode: "upward"
            }
        }
    ],
};

But it still doesn't load the babel.config.js on root ‍♂️ (I know it's not being loaded because I've placed a console.log statement inside babel.config.js like the documentation suggests - and it's not being called)

o01
  • 5,191
  • 10
  • 44
  • 85

0 Answers0