我想在我的项目中设置module-resolver插件.babelrc并添加别名来整理我的导入。
例如，而不是：
import SomeComponent from '../../../components/SomeComponent'
我可以简单地做：
import SomeCompoent from '@components/SomeComponent'
我遇到了，babel-plugin-module-resolver但我不确定如何设置它。
这是我的项目结构的样子：
项目结构\
.babelrc文件：
{
"plugins": [
["module-resolver", {
"alias": {
"@components": "./src/components"
}
}]
]
}
现在，当我尝试使用导入时import App from '@components/App'出现此错误：
[0] ERROR in ./src/index.js 6:0-34
[0] Module not found: Error: Can't resolve '@components/App' in '/mnt/Spare/botclient/src'
[0] resolve '@components/App' in '/mnt/Spare/botclient/src'
[0] Parsed request is a module
[0] using description file: /mnt/Spare/botclient/package.json (relative path: ./src)
[0] Field 'browser' doesn't contain a valid alias configuration
[0] resolve as module
[0] /mnt/Spare/botclient/src/node_modules doesn't exist or is not a directory
[0] looking for modules in /mnt/Spare/botclient/node_modules
[0] single file module
[0] using description file: /mnt/Spare/botclient/package.json (relative path: ./node_modules/@components/App)
[0] no extension
[0] Field 'browser' doesn't contain a valid alias configuration
[0] /mnt/Spare/botclient/node_modules/@components/App doesn't exist
[0] .web.mjs
[0] Field 'browser' doesn't contain a valid alias configuration
[0] /mnt/Spare/botclient/node_modules/@components/App.web.mjs doesn't exist
[0] .mjs
[0] Field 'browser' doesn't contain a valid alias configuration
[0] /mnt/Spare/botclient/node_modules/@components/App.mjs doesn't exist
[0] .web.js
[0] Field 'browser' doesn't contain a valid alias configuration
[0] /mnt/Spare/botclient/node_modules/@components/App.web.js doesn't exist
[0] .js
[0] Field 'browser' doesn't contain a valid alias configuration
[0] /mnt/Spare/botclient/node_modules/@components/App.js doesn't exist
[0] .json
[0] Field 'browser' doesn't contain a valid alias configuration
[0] /mnt/Spare/botclient/node_modules/@components/App.json doesn't exist
[0] .web.jsx
[0] Field 'browser' doesn't contain a valid alias configuration
[0] /mnt/Spare/botclient/node_modules/@components/App.web.jsx doesn't exist
[0] .jsx
[0] Field 'browser' doesn't contain a valid alias configuration
[0] /mnt/Spare/botclient/node_modules/@components/App.jsx doesn't exist
[0] /mnt/Spare/botclient/node_modules/@components/App doesn't exist
[0] /mnt/Spare/node_modules doesn't exist or is not a directory
[0] /mnt/node_modules doesn't exist or is not a directory
[0] /node_modules doesn't exist or is not a directory
[0] looking for modules in /mnt/Spare/botclient/node_modules
[0] single file module
[0] using description file: /mnt/Spare/botclient/package.json (relative path: ./node_modules/@components/App)
[0] no extension
[0] Field 'browser' doesn't contain a valid alias configuration
[0] /mnt/Spare/botclient/node_modules/@components/App doesn't exist
[0] .web.mjs
[0] Field 'browser' doesn't contain a valid alias configuration
[0] /mnt/Spare/botclient/node_modules/@components/App.web.mjs doesn't exist
[0] .mjs
[0] Field 'browser' doesn't contain a valid alias configuration
[0] /mnt/Spare/botclient/node_modules/@components/App.mjs doesn't exist
[0] .web.js
[0] Field 'browser' doesn't contain a valid alias configuration
[0] /mnt/Spare/botclient/node_modules/@components/App.web.js doesn't exist
[0] .js
[0] Field 'browser' doesn't contain a valid alias configuration
[0] /mnt/Spare/botclient/node_modules/@components/App.js doesn't exist
[0] .json
[0] Field 'browser' doesn't contain a valid alias configuration
[0] /mnt/Spare/botclient/node_modules/@components/App.json doesn't exist
[0] .web.jsx
[0] Field 'browser' doesn't contain a valid alias configuration
[0] /mnt/Spare/botclient/node_modules/@components/App.web.jsx doesn't exist
[0] .jsx
[0] Field 'browser' doesn't contain a valid alias configuration
[0] /mnt/Spare/botclient/node_modules/@components/App.jsx doesn't exist
[0] /mnt/Spare/botclient/node_modules/@components/App doesn't exist
[0]
[0] webpack 5.65.0 compiled with 1 error in 4134 ms
我究竟做错了什么？以及如何使别名起作用？