Laravel 9 Mix 如何配置启用top-level-await异步组件功能

单独在项目根目录新建webpack.config.js配置不生效，是因为Laravel Mix不会自动读取该文件，所有自定义Webpack配置必须通过mix.webpackConfig()方法注入才会生效。

直接打开项目根目录的webpack.mix.js文件，添加如下配置即可：

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

// 注入Webpack实验特性配置
mix.webpackConfig({
    experiments: {
        topLevelAwait: true
    }
});

// 保留你原有的Mix构建配置，例如：
// mix.js('resources/js/app.js', 'public/js')
mix.js('resources/js/departements_search.js', 'public/js')

不需要照搬参考配置里的所有experiments项，仅开启你需要的topLevelAwait: true即可解决当前报错，其余实验特性无需求不需要开启，避免引发额外构建异常。

如果配置后报错仍存在，按以下顺序排查：

• 确认当前Laravel Mix依赖的Webpack版本≥5.0.0，顶层await是Webpack 5才支持的特性，Webpack 4及以下版本无对应配置项
• 清除构建缓存后重新执行构建命令，避免旧缓存导致配置未加载：

# 清除Webpack缓存
rm -rf node_modules/.cache
# 重新执行开发构建
npm run dev

配置生效后，原报错The top-level-await experiment is not enabled (set experiments.topLevelAwait: true to enabled it)就会消失。

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