React项目导入pictures文件夹报错Module not found，如何解决？

你的问题出在模块解析规则上：当你直接导入一个文件夹路径时，打包工具（比如Webpack）会默认查找该文件夹下的index.js（或其他约定的入口文件名），但你的文件名叫images.js，所以解析器找不到对应的模块，才会报错。

给你两个简单的解决办法：

方法1：明确指定导入的文件名 #

把ExpandedView.js里的导入代码改成：

import images from './pictures/images.js';

这样就能正确加载你定义的图片导出对象了，之后直接用images.onionRings就能拿到图片资源。

方法2：重命名文件让解析器自动识别 #

把pictures文件夹里的images.js改名为index.js，这样你原来的导入代码import images from './pictures';就能正常工作了——因为解析器会自动加载文件夹下的index.js作为入口文件。

补充说明：你之前导入CSS或其他JS文件正常，是因为那些都明确指定了完整的文件名，而文件夹导入需要遵循解析器的入口文件约定，这就是两者的区别。

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