执行yarn mix报错找不到./bootstrap模块但对应文件夹存在如何解决

• Node CommonJS 模块解析规则中，require('./bootstrap')默认会优先查找同级目录下的bootstrap.js、bootstrap.json等单文件，只有当对应单文件不存在时，才会尝试查找bootstrap文件夹，并读取文件夹内的index.js或package.json中main字段指定的入口文件。你当前场景下要么是文件夹内没有合法的入口文件，要么是模块解析规则被修改导致无法正确识别文件夹入口。
• 部分框架（如Laravel）默认会在resources/js目录下生成bootstrap.js单文件作为全局初始化入口，如果是误将该文件替换为同名文件夹，也会触发该报错。

方案一：补全引用路径 #

如果你确实需要引用bootstrap文件夹内的代码，直接将require('./bootstrap')修改为指向文件夹内的具体入口文件即可，示例：

require('./bootstrap/index.js')

方案二：配置文件夹入口 #

在bootstrap文件夹下新增index.js作为默认入口，将原来需要加载的bootstrap相关代码写入该文件即可，无需修改app.js的引用逻辑。也可以在bootstrap文件夹下新增package.json指定入口，示例：

{
  "name": "bootstrap",
  "main": "./你的入口文件名.js"
}

方案三：恢复框架默认的单文件 #

如果是Laravel等框架项目，误删了默认的bootstrap.js单文件、替换为同名文件夹的，将bootstrap文件夹重命名为其他名称，新建bootstrap.js写入框架默认的初始化代码即可。

方案四：修正webpack配置 #

检查项目根目录下的webpack.mix.js文件，确认resolve配置没有错误覆盖默认的文件扩展名规则，合法配置示例如下：

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .webpackConfig({
        resolve: {
            extensions: ['.js', '.vue', '.json']
        }
    });

所有配置修改完成后，重新执行yarn mix即可正常编译。

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