customize-cra: 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’

About this issue

Original URL
State: open
Created 4 years ago
Comments: 19

Most upvoted comments

We need 2 steps to add aliases

tell to IDE about aliases in tsconfig.json
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 😉

+16

gyerts on May 13, 2020

We need 2 steps to add aliases

tell to IDE about aliases in tsconfig.json

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 😉

Hi. Is there any way to manage it in one file?

yuda1124 on Aug 14, 2022

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.

the-simian on Sep 11, 2020