相对路径正确却找不到模块？Create React App路径问题求助

我正在用Create React App开发项目，项目目录结构为src下包含reducers和store两个文件夹，各自的index.js文件分别定义Redux reducer和store。

src/reducers/index.js 代码 #

const initialState = {
    menuOpen:false,
};

function reducer (state = initialState, action = {}) {
  switch (action.type) {
    case 'MENU_CLICKED':
      return {
       ...state,
        menuOpen: !state.menuOpen,
      };
  default:
    return state;
  }
}

export default reducer;

src/store/index.js 代码 #

import { createStore, applyMiddleware, compose } from 'redux';
import reducer from 'src/reducers';

//const middlewares = applyMiddleware(lister les Middlewares);

//const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
//const enhancers = composeEnhancers(middlewares);

const store = createStore(reducer);

export default store;

执行时出现以下错误：

ERROR in ./src/store/index.js 4:0-35

Module not found: Error: Can't resolve 'src/reducers' in 'C:\Users\apiot\Desktop\NoteToMyself\src\store'

问题原因 #

Create React App默认的模块解析规则不支持直接以src/开头的绝对路径导入。当你在src/store/index.js里写import reducer from 'src/reducers'时，Webpack会把src/reducers当作第三方包去node_modules里查找，自然找不到本地的reducer文件。

解决办法 #

1. 使用相对路径导入（最简单直接）
   把store/index.js里的导入语句改成相对路径：

import reducer from '../reducers';

因为store文件夹和reducers文件夹同属src目录，从store/index.js往上退一级就能找到reducers。

2. 配置路径别名（适合大型项目，简化路径写法）
   如果不想写冗长的相对路径，可以通过craco（无需eject项目）或者eject后修改Webpack配置来设置路径别名：

• 安装craco：npm install @craco/craco --save-dev
• 在项目根目录创建craco.config.js，添加以下配置：

const path = require('path');

module.exports = {
  webpack: {
    alias: {
      '@': path.resolve(__dirname, 'src/')
    }
  }
};

• 修改package.json里的启动脚本，把react-scripts替换成craco：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}

之后就可以用别名导入：

import reducer from '@/reducers';

内容的提问来源于stack exchange，提问作者Rip Rip