React-app-rewired: The "getBabelLoader" helper has been deprecated as of v2.0. You can use custo mize-cra plugins in replacement - https://github.com/arackaf/customize-cra#av ailable-plugins

[seveny]

version: 2.1.0
now I build the project with ts and react
now I use like this
/config-overrides.js/
`
const {
override,
addDecoratorsLegacy,
disableEsLint,
addBundleVisualizer,
addWebpackAlias,
adjustWorkbox,
addLessLoader,
fixBabelImports,
addWebpackResolve,
useEslintRc
} = require('customize-cra');
// const rewireTypescript = require('react-app-rewire-typescript');
const {
rewireWebpack: rewireTypescript
} = require("react-app-rewire-typescript-babel-preset");

const path = require('path');
// const isPrd = process.env.NODE_ENV === 'production'
module.exports = override(
addDecoratorsLegacy(),

disableEsLint(),
addBundleVisualizer({}, true),
addWebpackResolve({
modules: [path.resolve(__dirname, 'src'), 'node_modules'],
}),
addWebpackAlias({
'@': path.resolve(__dirname, 'src'),
components: path.resolve(__dirname, 'src/components'),
assets: path.resolve(__dirname, 'src/assets')
}),
adjustWorkbox(wb =>
Object.assign(wb, {
skipWaiting: true,
exclude: (wb.exclude || []).concat('index.html')
})
),
fixBabelImports('import', {
libraryName: 'antd',
style: true
}),
addLessLoader({
localIdentName: '[local]--[hash:base64:8]',
javascriptEnabled: true,
modifyVars: {}
}),
// useEslintRc(path.resolve(__dirname, '.eslintrc'))
(config) => {
// const tsLoader = getLoader(
// config.module.rules,
// rule =>
// rule.loader &&
// typeof rule.loader === 'string' &&
// rule.loader.includes('ts-loader')
// );
config = rewireTypescript(config);
return config
}
);

`
then run npm run start, has the error
The "getBabelLoader" helper has been deprecated as of v2.0. You can use custo
mize-cra plugins in replacement - https://github.com/arackaf/customize-cra#av
ailable-plugins

I try to use react-app-rewire-typescript, and get the same error,
how can I add ts-loader?

[with-heart]

Hi @seveny!

The issue with react-app-rewire-typescript is that it uses the getBabelLoader function from react-app-rewired, which no longer exists.

You can find the docs for the new getBabelLoader over at the customize-cra repo.

I'm not sure exactly how you would configure ts-loader, but you should be able to add it to your project using addWebpackModuleRule, also from customize-cra.

[dawnmist]

Which version of CRA are you using? CRA version 2.1 added support for typescript in its own build system (though by using babel's typescript compilation rather than ts-loader).

See: https://facebook.github.io/create-react-app/docs/adding-typescript
See also: https://vincenttunru.com/migrate-create-react-app-typescript-to-create-react-app/

It detects whether you have typescript in your project by the presence of a tsconfig.json file in your root directory, and switches to compiling typescript automatically. There are a few gotchas - CRA 2.x will remove any baseUrl or paths settings you have in the tsconfig.json file (CRA 3.x has partial support, but will still reject many common ways that these were used), and it cannot handle const enums (change them to just enum) or namespaces, but otherwise should work well. If you need to use baseUrl & paths in CRA 2.x or in an unsupported way in CRA 3.x, there's a way to do it documented in this comment.

There was a change in version of Webpack in CRA 2.0 to Webpack v4. The old rewires were written for Webpack v2/v3 and are not all compatible with Webpack v4. Version v2.0 of react-app-rewired was the update for CRA 2.x & Webpack v4 - but many old rewires were no longer being maintained, so they didn't get updated by the people who created them. That's the reason that the react-app-rewire-typescript package didn't work - it's written for Webpack v2/v3, using functions from react-app-rewired that were removed in react-app-rewired v2.0.

This kind of incompatibility is why there almost wasn't an update to react-app-rewired to support CRA v2+, and why the customise-cra repo exists to provide Webpack v4 compatible rewires for react-app-rewired 2.x.