Laravel11自定义组件运行npm时出现ES模块兼容错误怎么办？

问题根源 #

你当前使用的laravel-vite-plugin@^0.8.1和vite@^4.0.0版本组合，与Laravel 11、Node.js 21.x的ES模块生态不兼容——旧版插件为CommonJS格式，而Node.js 21+对ES模块的处理更严格，且Vite 4的CJS构建已被废弃，导致require()引入ES模块时触发错误。

解决步骤 #

• 升级依赖版本
  卸载旧版插件和Vite，安装Laravel 11适配的版本：

  npm remove laravel-vite-plugin vite
  npm install laravel-vite-plugin@^1.0 vite@^5.0 --save-dev
  

• 配置项目为ES模块
  在项目根目录的package.json中添加"type": "module"字段，确保Node.js以ES模块模式解析文件：

  {
    "type": "module",
    // 其他原有字段...
  }
  

• 调整Vite配置文件语法
  将vite.config.js中的CommonJS语法改为ES模块语法：
  替换原来的require引入：

  const laravel = require('laravel-vite-plugin');
  

  改为ES模块导入：

  import laravel from 'laravel-vite-plugin';
  

  同时将配置导出改为export default：

  export default defineConfig({
    plugins: [
      laravel({
        input: ['resources/js/app.js'],
        refresh: true,
      }),
    ],
  });
  

• 清理缓存并重新构建
  删除旧依赖和锁文件，重新安装后执行构建命令：

  rm -rf node_modules package-lock.json
  npm install
  npm run dev
  

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