vue3与vite无法导入CommonJS模块

Ued*_*uki 4 javascript import es6-modules vuejs3 vite

发生了什么事

vue2.6 + webpack上,以下应用程序运行良好。

<template>
<v-app>
  <QR/>
  <v-main>
  </v-main>
</v-app>
</template>

<script>
import QR from 'qrcode-of-this-site'
export default {
  components: {QR},
}
</script>
Run Code Online (Sandbox Code Playgroud)

在第 10 行导入的qrcode-of-this-site是我的ES6模块,并使用另一个外部CommonJS模块qrcode

但是在vue3.2 + vite上,这个应用报错如下:

Uncaught SyntaxError: The requested module '/node_modules/qrcode/lib/browser.js?v=0df8a00b' does not provide an export named 'default' (at QRcode.vue:11:8)
Run Code Online (Sandbox Code Playgroud)

观看文件

文件/node_modules/qrcode/lib/browser.js如下:

...

exports.create = QRCode.create
exports.toCanvas = renderCanvas.bind(null, CanvasRenderer.render)
exports.toDataURL = renderCanvas.bind(null, CanvasRenderer.renderToDataURL)

// only svg for now.
exports.toString = renderCanvas.bind(null, function (data, _, opts) {
  return SvgRenderer.render(data, opts)
})
Run Code Online (Sandbox Code Playgroud)

QRcode.vue如下:

<template>
  <v-layout column align-center class="white--text">
    <v-flex>
      <canvas id="qr"></canvas>
    </v-flex>
    QR code for this App
  </v-layout>
</template>

<script>
import QRCode from 'qrcode';
export default {
  mounted: function(){
    var currentUrl = window.location.origin;
    console.log(currentUrl);
    QRCode.toCanvas(document.getElementById('qr'),
      currentUrl, { toSJISFunc: QRCode.toSJIS }, function (error) {
      if (error) console.error(error)
      console.log('success!')
    })
  }
}
</script>
Run Code Online (Sandbox Code Playgroud)

另外,我import {toCanvas} from 'qrcode';在QRcode.vue的第11行尝试过,报错如下:

Uncaught SyntaxError: The requested module '/node_modules/qrcode/lib/browser.js?v=0df8a00b' does not provide an export named 'toCanvas' (at QRcode.vue:11:9)
Run Code Online (Sandbox Code Playgroud)

甚至toCanvas也肯定是由/node_modules/qrcode/lib/browser.js导出的

我的问题

vue3vite这对不能默认导入CommonJS模块吗?运行这个应用程序有必要的设置吗?

繁殖环境

完整的再现环境如下:

Vis*_*sie 12

问题是qrcode-of-this-site您创建的包使用了 CommonJS 模块,Vite 无法使用该模块,并且默认情况下不会进行转译,否则此插件会执行此操作。有两种方法可以解决此问题:

  • 以不同的方式构建qrcode-of-this-site,以便它将 CommonJS 模块转换为 ESM 模块,以便它适用于 Vite(或针对所有模块约定相应地构建它)。
  • 使用依赖关系预捆绑。就像下面这样:
// vite.config.js

export default defineConfig({
  ...
  optimizeDeps: {
    include: ["qrcode"],
  },
});
Run Code Online (Sandbox Code Playgroud)

我用最后一个选项做了一个StackBlitz作为工作示例。请在此处阅读有关此解决方案的更多信息。

  • 这里的第二点是金子,如果我早点找到它,我可以节省自己的时间。 (4认同)