search

SeregPie / VueWordCloud

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

ReferenceError: globalThis is not defined #48

Closed BotellaA closed 4 years ago

BotellaA commented 4 years ago

I want to use your component in a nuxt app. 

      <v-container fluid style="background-color: white">
        <v-row 
          justify="space-around"
          class="container mx-auto"
        >
          <v-col>
              <client-only>
                <vue-word-cloud
                  style="height: 480px;width: 100%;"
                  spacing="0.2"
                  :words="words"
                  :color="([, weight]) => weight > 4 ? '#00897B' : weight > 3 ? '#26A69A' : '#80CBC4'"
                  font-family="Roboto"
                />
              </client-only>
          </v-col>
        </v-row>
      </v-container>

I get this error:

11:25:32 AM: ReferenceError: globalThis is not defined
11:25:32 AM:     at /opt/build/repo/node_modules/vuewordcloud/index.js:1:13292
11:25:32 AM:     at i (/opt/build/repo/node_modules/vuewordcloud/index.js:1:146)
11:25:32 AM:     at Object.<anonymous> (/opt/build/repo/node_modules/vuewordcloud/index.js:1:227)
11:25:32 AM:     at Module._compile (internal/modules/cjs/loader.js:778:30)
11:25:32 AM:     at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
11:25:32 AM:     at Module.load (internal/modules/cjs/loader.js:653:32)
11:25:32 AM:     at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
11:25:32 AM:     at Function.Module._load (internal/modules/cjs/loader.js:585:3)
11:25:32 AM:     at Module.require (internal/modules/cjs/loader.js:692:17)
11:25:32 AM:     at require (internal/modules/cjs/helpers.js:25:18)
11:25:32 AM:     at /opt/build/repo/node_modules/vue-server-renderer/build.prod.js:1:77690
11:25:32 AM:     at Object.<anonymous> (webpack:/external "vuewordcloud":1:0)
11:25:32 AM:     at __webpack_require__ (webpack/bootstrap:25:0)
11:25:32 AM:     at Module.177 (pages/index.js:472:30)
11:25:32 AM:     at __webpack_require__ (webpack/bootstrap:25:0)

Is there something missing?

SeregPie commented 4 years ago

hi.

globalThis should be supported everywhere (except IE ofc).

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis

I see you are using webpack. Are you missing core-js?

BotellaA commented 4 years ago

I seems globalThis is not supported for nodejs < 12. That was my case. Upgrading node solved the issue.