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