craco-use-babelrc icon indicating copy to clipboard operation
craco-use-babelrc copied to clipboard

Typescript must be manually added to .babelrc

Open benneq opened this issue 4 years ago • 0 comments

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?

benneq avatar Jul 03 '20 20:07 benneq