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导出的
vue3和vite这对不能默认导入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作为工作示例。请在此处阅读有关此解决方案的更多信息。
归档时间: |
|
查看次数: |
9553 次 |
最近记录: |