如何使 tsconfig.json 路径别名在 Razzle 项目中工作？

如何解决如何使 tsconfig.json 路径别名在 Razzle 项目中工作？

我正在将一个项目从 react-app-rewired 迁移到 Razzle。

tsconfig.json 是这样的：

{
  "compilerOptions": {
    "target": "ES6","lib": ["dom","dom.iterable","esnext"],"allowJs": true,"esModuleInterop": true,"allowSyntheticDefaultImports": true,"strict": true,"forceConsistentCasingInFileNames": true,"noFallthroughCasesInSwitch": true,"module": "esnext","moduleResolution": "node","resolveJsonModule": true,"isolatedModules": true,"noEmit": true,"jsx": "react-jsx","strictnullchecks": true,"skipLibCheck": true,"baseUrl": "src","paths": {
      "@/*": ["./*"]
    }
  },"include": ["src"]
}

部分

"paths": {
  "@/*": ["./*"]
}

在我的情况下不起作用。

这是在我的 package.json 文件中： "start": "broWSER=chromium concurrently \"npm run start:tsc\" \"razzle start\"",

我运行 npm start 并在客户端编译错误部分收到此消息：

Cannot find module '@/redux/authSlice'。

我认为相关的依赖是这些：

"razzle": "4.0.4","razzle-dev-utils": "4.0.4",

我也尝试将以下内容放入我的 razzle.config.js 文件中，但没有成功：

const defaultModify = ({
  env: { target,dev },webpackConfig: config,webpackObject: webpack,}) => {
  config.resolve.alias = {
    "@/": "src/",};
  return config;
};

module.exports = {
  modifyWebpackConfig: ({
    env: { target,webpackConfig,webpackObject,}) => {
    const defaultConfig = defaultModify({
      env: { target,});
    return defaultConfig;
  },};

调试此问题的下一步是什么？我该如何解决这个问题？

谢谢！

解决方法

看起来您想使用此 razzle 功能： https://razzlejs.org/docs/customization#aliased-paths-modules