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)