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'.
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"
},
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With