ReactJS 中的绝对导入

Question

我最近创建了一个 ReactJS 应用程序，但是，我无法让 babel 模块解析器工作。我没有使用 CRA 启动项目，而是使用 npm init。

我得到的错误是

Module not found: Error: Can't resolve '@src/components/Component' in '/Users/path/to/app/src'

这是我的babel.config ts：

module.exports = {
    presets: ['@babel/preset-env', '@babel/react'],
    plugins: [
        [
            'module-resolver',
            {
                extensions: ['.ts', '.tsx', '.js'],
                root: ['.'],
                alias: {
                    '@src': './src',
                }
            }
        ]
    ]
};

在我的 tsconfig.json 中，我还添加了以下几行：

  "paths": {
    "@src/*": ["./src/*"]
  },
  "include": ["src"]

这是来自我的 package.json 开发依赖项的 babel 模块求解器版本：

    "babel-plugin-module-resolver": "^4.1.0",

有谁知道如何解决这个问题？

Answer 1

如果有人遇到类似问题，我设法通过使用 webpack 进行绝对导入使其工作，并且我放弃了 babel-module-resolver。

我刚刚在 webpack.config.ts 中添加了以下内容：

    resolve: {
            extensions: ['.ts', '.tsx', '.js'],
            alias: {
                '@src': path.resolve(__dirname, 'src/'),
            }
    }

以及我在上面发布的 tsconfig 的另一部分。

ReactJS 中的绝对导入

Absolute Imports in ReactJS

javascript

reactjs

babeljs