addWebpackAlias doesn't work

my code’s here …

const { override, fixBabelImports, addWebpackExternals, addWebpackAlias, addLessLoader } = require(‘customize-cra’); const path = require(‘path’); const UglifyJsPlugin = require(‘uglifyjs-webpack-plugin’); const { paths } = require(‘react-app-rewired’); console.log(paths.appSrc);

const myPlugin = [ new UglifyJsPlugin({ uglifyOptions: { warnings: false, compress: { drop_debugger: true, drop_console: true } } }) ];

module.exports = override( fixBabelImports(‘import’, { libraryName: ‘antd’, libraryDirectory: ‘es’, style: true }), addWebpackExternals({ echarts: ‘window.echarts’ // highcharts:“window.highcharts” }), addWebpackAlias({ ‘@’: ${paths.appSrc} // doesn’t work }), addLessLoader({ javascriptEnabled: true, modifyVars: { ‘@primary-color’: ‘#1DA57A’ } }), config => { // config.devtool = config.mode === ‘development’ ? ‘cheap-module-source-map’ : false; if (process.env.NODE_ENV === ‘production’) config.devtool = false; if (process.env.NODE_ENV !== ‘development’) config.plugins = […config.plugins, …myPlugin]; const loaders = config.module.rules.find(rule => Array.isArray(rule.oneOf)) .oneOf; loaders[5].use.push({ loader: ‘sass-resources-loader’, options: { resources: path.resolve(__dirname, ‘src/asset/base.scss’) } });

return config;

} );

use alias import { router } from '@/maps'; the wrong msg: Cannot find module ‘@/maps’

[gyerts]

We need 2 steps to add aliases

1. tell to IDE about aliases in tsconfig.json
2. tell to webpack about aliases

First:

create separate file tsconfig.path.json and add aliases:

{
   "compilerOptions": {
      "baseUrl": "./src",
      "paths": {
         "@utils/*": ["utils/*"]
      }
   }
}

Add created tsconfig.path.json to main tsconfig.json

{
   "extends": "./tsconfig.paths.json",
   ... other staff ...
}

Second:

Add aliases to config-overrides.js

const {
   override,
   addWebpackAlias
} = require('customize-cra');

const path = require("path");

module.exports = override(
   addWebpackAlias({
      "@utils": path.resolve(__dirname, "./src/utils"),
   }),
);

It works for me, happy coding 😉

[the-simian]

Anyone is reading this and is wondering… why use the seperate file? why not just put it in the tsconfig.json? Because that file gets mostly rewritten each run, and it will delete the paths you add. You gotta keep it in an external file, unfortunately.