Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Create-react-app + react-app-rewired + typescript + antd

I'm trying to get a project started and having trouble. Has anybody had any success getting Create-react-app + react-app-rewired + typescript + antd working together? I've tried about every tutorial/custom scripts/loader thing out there with no luck. I thought https://github.com/SZzzzz/react-scripts-ts-antd would be the answer to all my problems but getting this compiling error:

(28,81): Type '{ className: string; style: { transition: string | boolean; msTransform: string; WebkitTransform:...' does not satisfy the constraint 'HTMLAttributes<HTMLElement>'. Types of property 'style' are incompatible. Type '{ transition: string | boolean; msTransform: string; WebkitTransform: string; transform: string; }' is not assignable to type 'CSSProperties | undefined'. Type '{ transition: string | boolean; msTransform: string; WebkitTransform: string; transform: string; }' is not assignable to type 'CSSProperties'. Types of property 'transition' are incompatible. Type 'string | boolean' is not assignable to type 'string | undefined'. Type 'true' is not assignable to type 'string | undefined'.

like image 764
zdixon Avatar asked Sep 02 '25 06:09

zdixon


1 Answers

init


    create-react-app my-app --scripts-version=react-scripts-ts
    cd my-app
    yarn add antd 
    yarn add react-app-rewired ts-import-plugin --dev

add config-overrides.js


    const {
        getLoader,
        injectBabelPlugin
    } = require("react-app-rewired");
    const tsImportPluginFactory = require('ts-import-plugin')

    module.exports = function override(config, env) {
        // do stuff with the webpack config...
        const tsLoader = getLoader(
            config.module.rules,
            rule =>
            rule.loader &&
            typeof rule.loader === 'string' &&
            rule.loader.includes('ts-loader')
        );

        tsLoader.options = {
            getCustomTransformers: () => ({
                before: [
                    tsImportPluginFactory([{
                        libraryDirectory: 'es',
                        libraryName: 'antd',
                        style: 'css',
                    }]),
                ]
            })
        };

        return config;
    };

update package.json

  "scripts": {
    "start": "react-app-rewired start --scripts-version react-scripts-ts",
    "build": "react-app-rewired build --scripts-version react-scripts-ts",
    "test": "react-app-rewired test --env=jsdom --scripts-version react-scripts-ts",
    "eject": "react-scripts-ts eject"
  },
like image 127
DasonCheng Avatar answered Sep 04 '25 22:09

DasonCheng