[英]Absolute Imports in ReactJS
I recently created a ReactJS application, however, I cannot get the babel module resolver to work.我最近创建了一个 ReactJS 应用程序,但是,我无法让 babel 模块解析器工作。 I did not start the project using CRA but npm init.
我没有使用 CRA 启动项目,而是使用 npm init。
The error i'm getting is我得到的错误是
Module not found: Error: Can't resolve '@src/components/Component' in '/Users/path/to/app/src'
This is my babel.config ts:这是我的 babel.config ts:
module.exports = { presets: ['@babel/preset-env', '@babel/react'], plugins: [ [ 'module-resolver', { extensions: ['.ts', '.tsx', '.js'], root: ['.'], alias: { '@src': './src', } } ] ] };
"paths": { "@src/*": ["./src/*"] }, "include": ["src"]
And this is the babel module solver version from my package.json dev dependencies:这是我的 package.json 开发依赖项中的 babel 模块求解器版本:
"babel-plugin-module-resolver": "^4.1.0",
Does anyone know how to solve this issue?有谁知道如何解决这个问题?
If anyone is experiencing similar issues, I managed to make it work by using webpack for absolute imports, and I gave up on babel-module-resolver.如果有人遇到类似问题,我设法通过使用 webpack 进行绝对导入来使其工作,并且我放弃了 babel-module-resolver。
I just added the following in my webpack.config.ts:我刚刚在我的 webpack.config.ts 中添加了以下内容:
resolve: {
extensions: ['.ts', '.tsx', '.js'],
alias: {
'@src': path.resolve(__dirname, 'src/'),
}
}
And the other part from my tsconfig that I posted above.以及我在上面发布的 tsconfig 的另一部分。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.