Symfony 6.4：替换Asset Mapper为Webpack Encore遇模块加载报错如何解决？

解决"Failed to load module script: Expected a JavaScript module"错误的步骤： #

1. 彻底移除Asset Mapper相关组件

• 执行Composer命令卸载依赖：

  composer remove symfony/asset-mapper symfony/asset-mapper-bundle
  

• 删除config/packages/asset_mapper.yaml配置文件
• 打开config/bundles.php，移除如下行：

  Symfony\Bundle\AssetMapperBundle\AssetMapperBundle::class => ['all' => true],
  

2. 安装并配置Webpack Encore

• 安装Encore Bundle：

  composer require symfony/webpack-encore-bundle
  

• 安装前端依赖（根据你用的包管理器选择）：

  npm install
  # 或者
  yarn install
  

• 确保webpack.config.js配置正确，默认输出路径为public/build/，无需额外开启ES模块模式（除非你主动需要）
• 编译前端资源：

  npm run dev
  # 或者
  yarn dev
  

3. 更新模板中的资源引用

• 替换原Asset Mapper的资源标签：
  • 移除模板中的{% importmap %}标签
  • CSS资源改用Encore标签：

    {{ encore_entry_link_tags('app') }}
    

  • JavaScript资源改用Encore标签：

    {{ encore_entry_script_tags('app') }}
    

  错误根源：Asset Mapper会自动给JS添加type="module"属性，而Encore默认编译的是普通脚本，残留的Asset Mapper配置或标签会导致浏览器误判脚本类型，从而抛出模块加载错误。

4. 清除Symfony缓存

php bin/console cache:clear

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