How to use it in CDN

[costanzo]

Describe the bug

Hi, I am pretty new to the Vue and front end technology. This package is working very well but the package size is huge. I want the page to load this package from CDN. I am using jsDelivr here: https://www.jsdelivr.com/package/npm/qr-scanner-wechat But I have no idea how to set this up.

I am using Vue 3 + ts + Vite + Pinia + Vue-router. I use vite-plugin-cdn-import to manage CDNs.

The vite.config.ts are like below:

importToCDN({
      modules: [
      ...
        {
          name: 'qr-scanner-wechat',
          var: 'scan',
          path: 'https://cdn.jsdelivr.net/npm/qr-scanner-wechat@0.1.3/+esm'
        }
      ...
      ]
    }),

In the Vue file, I imported scan like this:

import { scan } from 'qr-scanner-wechat'

But after deploying it, I got the errrors:

Uncaught (in promise)  {"name": "ReferenceError", "message": "Can't find variable: scan", "stack": "@https://www.domain.vip/h5/assets/ClassRoom-3c82d17c.js:1:10180\nLe@https://www.domain.vip/h5/assets/ClassRoom-3c82d17c.js:1:10326\n@https://www.domain.vip/h5/assets/ClassRoom-3c82d17c.js:1:7693"}

Reproduction

Minimal

System Info

System:                                                    
    OS: Windows 10 10.0.19045                                
    CPU: (24) x64 13th Gen Intel(R) Core(TM) i7-13700K       
    Memory: 37.35 GB / 63.75 GB                              
  Binaries:                                                  
    Node: 16.15.1 - E:\nodejs\node.EXE                       
    Yarn: 1.22.19 - E:\Yarn\bin\yarn.CMD                     
    npm: 8.11.0 - E:\nodejs\npm.CMD                          
    pnpm: 8.7.1 - D:\appData\npm\packages\pnpm.CMD           
  Browsers:                                                  
    Edge: Spartan (44.19041.3570.0), Chromium (118.0.2088.46)
    Internet Explorer: 11.0.19041.3570

Used Package Manager

pnpm

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guide.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• [X] The provided reproduction is a minimal reproducible of the bug.