How to use CDN import correctly

China-xiaoFang commented 1 week ago

Are you using Nuxt?

[ ] Check this box if you encountered the issue using Nuxt and the included module.

Describe the bug

When I tried to use pinia-plugin-persistedstate in Vue3 + Vite + TypeScript environment, I imported the library through CDN, and the browser console reported an error

Uncaught ReferenceError: module is not defined
at index.js:26:8
(Anonymous) @ index.js:26
index-nOvpWTLJ.js:857 Uncaught (in promise) ReferenceError: piniaPluginPersistedstate is not defined
at nt (index-nOvpWTLJ.js:857:42003)

I think this should be a problem of not handling umd format build during build. Because it relies on third-party dependencies, deep-pick-omit, defu, destr Although pnpm will automatically load these third-party dependencies in ES mode, they will not be automatically loaded in CDN mode, so these third-party dependencies cannot be excluded when building umd format js files. Otherwise, the CDN reference may not be able to find the third-party dependencies or may report an import error.

I wanted to modify the build configuration myself by cloning the repository, but I found that the cloned project seemed to lack some necessary files, such as ./.nuxt/tsconfig.json.

How to reproduce the smallest demo provided: pnpm i The development environment is normal pnpm dev There will be problems with previewing after packaging, because it is referenced through CDN at this time pnpm build pnpm preview Open the browser console and you will find errors.

Reproduction

https://stackblitz.com/edit/pinia-plugin-persistedstate-cdn-error

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700
    Memory: 9.70 GB / 31.79 GB
  Binaries:
    Node: 20.15.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.7.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.11.0 - C:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Edge: Chromium (129.0.2792.65)
    Internet Explorer: 11.0.22621.3527

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] The provided reproduction is a minimal reproducible of the bug.

prazdevs commented 1 week ago

Hi, from v4.1.2 you should import from https://cdn.jsdelivr.net/npm/pinia-plugin-persistedstate@4.1.2/dist/index.global.js and it should work.

Let me know if that fixes the issue!

China-xiaoFang commented 1 week ago

Hello, thank you for taking the time to deal with this issue. However, after my test, as shown in the figure, I still can't find the global var name, but it may be that my global var name is used incorrectly. Maybe the iife build does not support this operation. Generally, we build libraries through the umd mode, so I think you should add the umd mode build and specify the global var name, which may solve this problem. In the smallest demo provided before, I have updated and reproduced this problem.

prazdevs / pinia-plugin-persistedstate