exports is not defined in ES module scope This file is being treated as an ES module because it has a '.js' file extension and 'xxx\package.json' contains "type": "module".

背景#

使用了
https://github.com/JamieCurnow/vue-clipboard3
这个项目。以import,ES模块的方式引入。
pnpm dev时出现报错。

分析#

我无法给出具体的分析，大致如下。
作者的npm包提供了ES模块和commonJS模块引入两种方式。
然而他的commonJS模块的文件扩展名却是js，于是出现了问题。

虽然不太礼貌，但是我感觉是包作者的问题。

解决#

有三种方法。

移除main#

在node_modules目录中，找到对应包的package.json文件，找到main这一行，直接删掉。

移除type（推荐）#

和上面的方法类似，移除的字段改成type。

添加exports字段#

Copy
  "exports": {
    "import": "./dist/esm/index.js",
    "require": "./dist/cjs/index.js"
  }

意图很明显，就是使用import和require引入时，分别对应不同入口文件。

根据node包灵活修改就行。

参考#

https://github.com/JamieCurnow/vue-clipboard3/issues/7
https://github.com/JamieCurnow/vue-clipboard3/issues/11