search

SeregPie / VueWordCloud

Generates a cloud out of the words.
https://seregpie.github.io/VueWordCloud/
MIT License
386 stars 60 forks source link

Error 500 `Unexpected token ':'` with Nuxt v3.9+ #67

Open codeflorist opened 9 months ago

codeflorist commented 9 months ago

Using this package with Nuxt versions higher than v3.8 throws the following error:

[nuxt] [request error] [unhandled] [500] Unexpected token ':'
  at __global_eval__ (https://nuxtstartererkavw-jwoc.w-credentialless.staticblitz.com/blitz.a9c8a5a3.js:1:263)  
  at _0x34b0d0 (https://nuxtstartererkavw-jwoc.w-credentialless.staticblitz.com/blitz.a9c8a5a3.js:352:197648)  
  at Script.runInContext (https://nuxtstartererkavw-jwoc.w-credentialless.staticblitz.com/blitz.a9c8a5a3.js:352:196823)  
  at Script.runInThisContext (https://nuxtstartererkavw-jwoc.w-credentialless.staticblitz.com/blitz.a9c8a5a3.js:74:1318)  
  at Object.runInThisContext (https://nuxtstartererkavw-jwoc.w-credentialless.staticblitz.com/blitz.a9c8a5a3.js:74:3926)  
  at ViteNodeRunner.runModule (./node_modules/vite-node/dist/client.mjs:378:32)  
  at ViteNodeRunner.directRequest (./node_modules/vite-node/dist/client.mjs:363:16)  
  at async ViteNodeRunner.cachedRequest (./node_modules/vite-node/dist/client.mjs:206:14)  
  at async ViteNodeRunner.dependencyRequest (./node_modules/vite-node/dist/client.mjs:250:12)  
  at async eval (./app.vue:1:216)

here is a reproduction: https://stackblitz.com/edit/nuxt-starter-erkavw?file=package.json

changing nuxt dependency to ~3.8.0 fixes the problem.

Tchoupinax commented 8 months ago

Same with Nuxt.js 3.11

codeflorist commented 1 month ago

I've found a workaround for this problem.

Simply define the component and plugin-file as client-only by renaming them e.g. to components/WordCloud.client.vue and plugins/vueWordCloud.client.ts.

jschirrmacher commented 2 weeks ago

I tried your workaround, @codeflorist , and found some hint.

It works (even without forcing the client side), if I change the route from another page, but the error appears when I start with a route that contains the component.

So, it seems to have something to do with SSR: starting with the component active, rendering is done server-side and then it errors in this line:

for (var x2 = d2.getImageData(0, 0, m2, p2).data, S2 = [], F2 = 1 / 0, j2 = 0, O2 = 1 / 0, E = 0, W = m2 / 4, A = p2 / 4, B = 0; B < W; ++B) for (var C = 0; C < A; ++C) __vite_ssr_import_0__.h: for (var L = 0; L < 4; ++L) for (var  = 0;  < 4; ++_) {

The last for in the line uses an invalid expression (< 4). This seems not to happen if the code is rendered later on the client side.