Vue3+Vite无法导入CommonJS模块的问题咨询

云上老周

2026-8-7

问题现象

在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>

其中第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)

文件详情

/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)
})

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>

我也曾尝试在QRcode.vue第11行使用import {toCanvas} from 'qrcode';，但报出如下错误：

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)

尽管toCanvas确实在**/node_modules/qrcode/lib/browser.js**中被导出。