React中使用addWebpackAlias配置導入路徑報錯

一、環境：

1、React + TypeScript

2、使用create-react-app搭建的項目

{
  "name": "react-customizescreen",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/jest": "^24.0.0",
    "@types/mockjs": "^1.0.2",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "@types/react-router-dom": "^5.1.5",
    "antd": "^4.3.1",
    "babel-plugin-import": "^1.13.0",
    "customize-cra": "^1.0.0",
    "node-sass": "^4.14.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.1",
    "typescript": "~3.7.2"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "antd-scss-theme-plugin": "^1.0.8",
    "fetch-mock": "^9.10.1",
    "less-loader": "^6.1.0",
    "mockjs": "^1.1.0",
    "react-app-rewired": "^2.1.6",
    "sass-loader": "^8.0.2"
  }
}

3、使用customize-cra插件修改webpack配置如下

const {
    override,
    fixBabelImports,
    addLessLoader,
    addWebpackModuleRule,
    addWebpackAlias
} = require("customize-cra");

const path = require("path");

const AntdScssThemePlugin = require("antd-scss-theme-plugin");

module.exports = override(
    // 默認路徑設置
    addWebpackAlias({
        "@": path.resolve(__dirname, "./src"),
        "@share": path.resolve(__dirname, "./src/share"),
        "@mocks": path.resolve(__dirname, "./src/mocks"),
        "@static": path.resolve(__dirname, "./src/static"),
        "@containers": path.resolve(__dirname, "./src/containers"),
        "@components": path.resolve(__dirname, "./src/components"),
    }),
    // 處理antd樣式問題
    fixBabelImports("import", {
        libraryName: "antd",
        libraryDirectory: "es",
        // style: true
    }),
    // new AntdScssThemePlugin("./src/styles/theme.scss")
    addLessLoader({
        lessOptions: {
            javascriptEnabled: true
        }
    }),
    // 處理scss和less互相使用
    addWebpackModuleRule(
        // This rule will only be used for converting our sass-variables to less-variables
        {
            test: /\.scss$/,
            issuer: /\.less$/,
            use: {
                loader: "./sassVarsToLess.js" // Change path if necessary
            }
        }
    )
);

4、配置自定義路徑報錯

二、原因

baseUrl缺失，導致絕對路徑無法找到

三、解決方法

嘗試1、在tsconfig.json中添加baseUrl和paths

問題：一旦啓動，該paths會被腳本幹掉，還是會報一樣的錯誤，解決不了問題。只能換一種方式，通過繼承將配置保存起來。

嘗試2、新增一個json配置文件，讓同事tsconfig去繼承。

// paths.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ],
      "@share/*": [
        "src/share/*"
      ],
      "@mocks/*": [
        "src/mocks/*"
      ],
      "@static/*": [
        "src/static/*"
      ],
      "@components/*": [
        "src/components/*"
      ],
      "@containers/*": [
        "src/containers/*"
      ]
    }
  }
}
// tsconfig.json
{
  "extends": "./paths.json",
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ]
}