storyblok-design-system icon indicating copy to clipboard operation
storyblok-design-system copied to clipboard

Element is not defined when using with Nuxt 3

Open mattcrn opened this issue 1 year ago • 0 comments

When Using the vue3 package with Nuxt3 and creating a plugin like explained in the documentation I get an error.

Expected Behavior

I can implement the storyblok design system within my Nuxt 3 application and use the components.

Current Behavior

After installing the storyblok-design-system @storyblok/design-system and starting the nuxt application I get the following Error:

[nuxt] [request error] [unhandled] [500] Element is not defined
  at Module.<anonymous> (./node_modules/@storyblok/design-system/src/components/Popover/index.vue:88:25)  
  at Module._compile (node:internal/modules/cjs/loader:1241:14)  
  at Module._extensions..js (node:internal/modules/cjs/loader:1295:10)  
  at Module.load (node:internal/modules/cjs/loader:1091:32)  
  at Module._load (node:internal/modules/cjs/loader:938:12)  
  at cjsLoader (node:internal/modules/esm/translators:284:17)  
  at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:234:7)  
  at ModuleJob.run (node:internal/modules/esm/module_job:217:25)  
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)  
  at async ModuleLoader.import (node:internal/modules/esm/loader:316:24)

Steps to Reproduce

  1. Set up a new Nuxt3 Project using npx nuxi@latest init
  2. Follow the documentation to install @storyblok/design-system
  3. Add a design system component to the app.vue and start the project with yarn dev

Or just clone my repo and do yarn && yarn dev

Note: If I use a client only plugin to register the design-system it works , renaming the storyblok-design-system.js to storyblok-design-system.clien.js

mattcrn avatar Nov 07 '23 14:11 mattcrn