我在使用create-react-app和craco时,设置webpack别名路径出现了问题,已经搜索过但无法解决。
每次使用命令yarn start
运行应用程序时,都会收到错误消息:Module not found: Can't resolve '@app/App' in 'C:\ReactSandbox\my-project\src
重现步骤:
create-react-app my-project
cd my-project
yarn add @craco/craco
cat > craco.config.js
(请参见下面的配置)- 将package.json中的“script”部分中的“react-scripts”替换为“craco”(例如:craco start、craco build等)
- 编辑文件
src/index.js
(请参见下面的代码) yarn start
craco.config.js
const path = require("path");
module.exports = {
webpack: {
resolve: {
alias: {
"@app": path.resolve(__dirname, "src/"),
}
}
}
};
src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from '@app/App'; //replace './App' into '@app/App'
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
当前结果
模块未找到:无法解析'C:\ReactSandbox\my-project\src'中的'@app / App'
期望结果
我避免使用冗长的相对路径,而是像这样导入模块:@app/FilterComment.js
,这样会更加清晰明了,而不是像这样:../../../../FilterComment.js