帶有vite的vue3無法導入CommonJS模塊

Question

發生了什么事

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

另外，我試過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)

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

我的問題

vue3和vite這對不能默認導入CommonJS模塊嗎？ 是否有任何必要的設置來運行這個應用程序？

繁殖環境

完整的復制環境如下：

• Vue2 環境（運行良好） https://github.com/UedaTakeyuki/QRcodeVue2
• Vue3 env（導入錯誤） https://github.com/UedaTakeyuki/QRcodeVue3

Answer 1

問題是您創建的qrcode-of-this-site包使用了一個 CommonJS 模塊，Vite 無法使用該模塊並且默認情況下不會轉譯，或者此插件可以。 有兩種方法可以解決此問題：

• 以不同的方式構建qrcode-of-this-site ，以便它將 CommonJS 模塊轉換為 ESM 模塊，以便它適用於 Vite（或相應地為所有模塊約定構建它）。
• 使用依賴預捆綁。 像下面這樣：

// vite.config.js

export default defineConfig({
  ...
  optimizeDeps: {
    include: ["qrcode"],
  },
});

我用最后一個選項制作了一個StackBlitz作為工作示例。 在此處閱讀有關此解決方案的更多信息。