craco-use-babelrc
craco-use-babelrc copied to clipboard
Typescript must be manually added to .babelrc
I created a React app with create-react-app and Typescript and MDX. I used
npx create-react-app my-app --template typescript
npm i @craco/craco
npm i @jackwilsdon/craco-use-babelrc
npm i @mdx-js/loader
Then I created craco.config.js
:
const BabelRcPlugin = require('@jackwilsdon/craco-use-babelrc');
module.exports = {
plugins: [
{ plugin: BabelRcPlugin },
],
webpack: {
configure: webpackConfig => {
const oneOfRules = webpackConfig.module.rules.find(x => !!x.oneOf).oneOf;
oneOfRules.unshift({
test: /\.mdx?$/,
use: ["babel-loader", "@mdx-js/loader"]
});
webpackConfig.node.fs = "empty";
return webpackConfig;
}
},
}
And created .babelrc
, because CRA was complaining about missing @babel/preset-react
:
{
"presets": ["@babel/preset-react"]
}
But when I start my app I shows an error:
Unexpected token, expected ","
So I also added "@babel/preset-typescript"
to .babelrc
. Now everything is working fine.
The question is: Why is Typescript working without craco
and craco-use-babelrc
, but not automatically when using craco?