vue3 with vite can't import CommonJS module

Question

What is happning

On vue2.6 + webpack, an application as follow is working well.

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

<script>
import QR from 'qrcode-of-this-site'
export default {
  components: {QR},
}
</script>

Where qrcode-of-this-site imported at line#10 is my ES6 module and using another external CommonJS module qrcode.

However, on vue3.2 + vite, this application reports an error as follows:

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)

watching files

The file /node_modules/qrcode/lib/browser.js is as follows:

...

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 is as follows:

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

Also, I've tried import {toCanvas} from 'qrcode'; at line #11 of QRcode.vue, and the error is reported as follows:

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)

even toCanvas is certainly exported by /node_modules/qrcode/lib/browser.js

My question

Can't the pair of vue3 and vite import the CommonJS module as a default? Are there any necessary settings to run this app?

Reproducing environment

The full environment for reproducing is available as follows:

• Vue2 env (working well) https://github.com/UedaTakeyuki/QRcodeVue2
• Vue3 env (import error) https://github.com/UedaTakeyuki/QRcodeVue3

Orography

Answer 1

The problem is that the qrcode-of-this-site package you created uses an CommonJS module which Vite can't work with and will not transpile at default or this plugin would do either. There are two ways to fix this:

• Build qrcode-of-this-site differently so it will transpile the CommonJS module to an ESM one so it would work for Vite (or build it accordingly for all module conventions).
• Use dependency pre-bundling. Like below:

// vite.config.js

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

I made a StackBlitz with the last option as working example. Read more about this solution here.

Preceptory

You second point here is gold, I could have saved myself hours if I found it sooner. – Swipe

thanks for the answer, i was able to fix the error on local dev server but on build it shows RollupError: module is not exported by package/dist/index.js, any idea on this issue? – Igorot

If you navigate to the link in my post you'll see how to make it work for the production build. Here is it too: vitejs.dev/guide/… – Preceptory

do you know the difference between optimizedep transpiling VS using commonjsOptions config? – Sapowith

Why do you say that Vite can't work with CommonJS? Is this still true in 2024? The Vite docs here state that "CommonJS and UMD compatibility: During development, Vite's dev serves all code as native ESM. Therefore, Vite must convert dependencies that are shipped as CommonJS or UMD into ESM first." – Level

I meant that the package wasn't seen during smart analysis. I don't think I looked into it extensively so I don't exactly know why. I linked to the same page as your quote btw. – Preceptory

This doesn't seem to work in 2024 on latest versions. – Zachery