React项目中BookStore引入SearchBooks出现模块未找到运行时错误

我看到你的React项目编译正常，但运行时出现了子组件SearchBooks无法解析的错误，结合你提供的代码、目录结构和错误信息，问题的根源很明确，下面是具体的分析和解决步骤：

问题场景回顾 #

你的项目结构中，BookStore.tsx（父组件）和SearchBooks.tsx（子组件）都位于ClientApp/components目录下。

父组件BookStore.tsx中使用了这样的导入语句：

import { SearchBooks, SearchParameters } from 'ClientApp/components/SearchBooks';

运行时抛出的错误是：

ERROR in ./ClientApp/components/BookStore.tsx Module not found: Error: Can't resolve 'ClientApp/components/SearchBooks' in '...\ClientApp\components'
@ ./ClientApp/components/BookStore.tsx 12:0-63
@ ./ClientApp/routes.tsx
@ ./ClientApp/boot.tsx
@ multi react-hot-loader/patch event-source-polyfill webpack-hot-middleware/client?path=__webpack_hmr&dynamicPublicPath=true ./ClientApp/boot.tsx

错误原因 #

你使用了绝对路径来导入同目录下的组件，但你的项目没有配置Webpack或TypeScript的路径别名规则。Webpack在解析模块时，会把'ClientApp/components/SearchBooks'当作一个顶级模块去查找（比如从项目根目录的node_modules里找），而不是从当前文件所在的目录去定位，所以自然找不到对应的组件文件。

快速解决方案 #

将导入路径改为相对路径即可，因为两个组件在同一个目录下，用./表示当前目录：

修改BookStore.tsx中的导入语句：

// 替换原有导入语句
import { SearchBooks, SearchParameters } from './SearchBooks';

这样Webpack就会直接在BookStore.tsx所在的ClientApp/components目录下查找SearchBooks.tsx文件，顺利解析模块。

额外验证点 #

如果修改后仍然有问题，可以检查以下两个细节：

• 确认SearchBooks.tsx中确实正确导出了SearchBooks类和SearchParameters接口/类型：

  // SearchBooks.tsx中的导出示例
  export interface SearchParameters {
    // 你的参数定义
  }
  
  export class SearchBooks extends React.Component<IBookSearchProps> {
    // 组件实现逻辑
  }
  

• 检查文件名大小写是否完全匹配：虽然Windows系统不区分文件名大小写，但Webpack在部分配置下会严格区分，确保导入路径的大小写和实际文件名一致。

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