reactjs 模块未找到,webpack别名与typescript react

doinxwow  于 2023-03-29  发布在  React
关注(0)|答案(2)|浏览(143)

我正在尝试在webpack中实现一些别名。我想做的是,而不是使用它从文件夹components导入App.js上的组件。
./components/layout/Header/Header
我想要这个:
@components/layout/Header/Header
也就是说,为了避免将来创建嵌套文件夹时出现问题

module.exports = {
    context: __dirname,
    entry: './src/index.js',
    output: {
        path: path.resolve( __dirname, 'dist' ),
        filename: 'main.js',
    },
    resolve: {
        extensions: ['.js', '.ts', '.jsx', '.tsx'],
        alias: {
          src: path.resolve(__dirname, 'src'),
          assets: path.resolve(__dirname, 'src/assets'),
          components: path.resolve(__dirname, 'src/components'),
        }
    }
    .
    .
    .
};

下面是tsconfig.json文件:

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

当我运行“npm run start”,即“react-scripts start”时,我得到以下错误:

./src/App.js
Module not found: Can't resolve '@components/layout/Header/Header' in 'C:\Users\Angel\Documents\React\thermometer\src'

另外,我注意到,当我运行“npm run start”时,我在tsconfig.json文件中创建的对象“paths”,被删除,文件重置。我是从零开始创建react项目的新手。提前感谢!

uqjltbpv

uqjltbpv1#

查看Webpack的文档,它没有提到自动将别名前置为@。由于没有在那里指定,Webpack(以及react-scripts start)不知道@components指向什么。
实际上,我不知道Webpack是否支持以@开头的别名(例如,后缀$对Webpack有特定的含义,而@通常用于指定范围的包),但如果支持,您必须修改您的resolve.alias以包括@

kmbjn2e3

kmbjn2e32#

从webpack到aliases没有前缀,你需要更新你的aliases,使用与jsconfig/tsconfig相同的路径键。

module.exports = {
    context: __dirname,
    entry: './src/index.js',
    output: {
        path: path.resolve( __dirname, 'dist' ),
        filename: 'main.js',
    },
    resolve: {
        extensions: ['.js', '.ts', '.jsx', '.tsx'],
        alias: {
          '@src': path.resolve(__dirname, 'src'),
          '@assets': path.resolve(__dirname, 'src/assets'),
          '@components': path.resolve(__dirname, 'src/components'),
        }
    }
    .
    .
    .
};

相关问题