Rollup打包正常但本地运行报错无法解析lit-element模块，该如何解决？

问题原因 #

这个报错是浏览器原生ES模块规范限制导致的：浏览器不支持lit-element这类不带相对/绝对路径前缀的「裸模块导入」，必须显式给出可访问的资源路径。你当前的Rollup配置没有正确解析lit-element的导入语句，导致打包后的产物仍然保留了裸导入写法，浏览器无法识别。

修复步骤 #

• 第一步：调整插件执行顺序
  Rollup的插件从上到下依次执行，@rollup/plugin-node-resolve（你配置里的nodeResolve/resolve）的作用是解析node_modules下的第三方依赖，必须放在commonjs、babel等转换类插件之前执行。你当前的配置把nodeResolve放在了commonjs之后，无法正常解析第三方依赖。
  修正后的插件顺序参考：

plugins: [
    alias({/* 你的别名配置 */}),
    // 先执行依赖解析
    nodeResolve(),
    // 再执行CommonJS转ES模块
    commonjs({/* 你的配置 */}),
    // 最后执行转译、压缩、资源处理类插件
    babel(babelConfig),
    minifyHTML(),
    copy(copyConfig),
    replace({/* 你的配置 */}),
    scss()
]

注意你当前配置同时写了nodeResolve()和resolve()，属于重复引入相同功能的插件，直接删掉其中一个即可，避免逻辑冲突。

• 第二步：移除lit-element的外部依赖配置
  检查你的Rollup配置中是否存在external字段，如果里面包含lit-element，直接删除即可：如果配置了external: ['lit-element']，Rollup会把lit-element判定为外部依赖，不会打包到产物中，会保留原有的裸导入语句。

• 第三步（可选，开发环境用）：配置Import Map
  如果你开发阶段不希望把第三方依赖打包到产物中，可以在入口HTML的head标签中添加Import Map，告诉浏览器裸导入对应的资源路径：

<script type="importmap">
{
  "imports": {
    "lit-element": "/node_modules/lit-element/lit-element.js"
  }
}
</script>

配置完成后浏览器就可以直接识别lit-element的裸导入语句。

• 第四步：确认依赖安装
  执行npm ls lit-element检查是否已经正确安装了lit-element依赖，如果没有安装，执行npm install lit-element --save安装即可。

内容的提问来源于stack exchange，提问作者Sergio Martin Alvaro