Thursday, 28 June 2018

Using Vue Design System in Nuxt is throwing errors about export in system.js

I am trying to get the components imported into a Nuxt project, following the steps here: https://github.com/viljamis/vue-design-system/wiki/getting-started#using-design-system-as-an-npm-module

Nuxt does not have a main.js (everything is plugin based), so what I have done is create a "plugin" and then do the import code in there like so (Nuxt recommends this for other libraries too and works fine):

vue-design-system.js

import Vue from 'vue'
import system from 'fp-design-system'
import 'fp-design-system/dist/system/system.css'

Vue.use(system)

Then in my config I do (removed other code in config):

nuxt.config.js

module.exports = {
  css: [
    { src: 'fp-design-system/dist/system/system.css', lang: 'css' }
  ],
  plugins: [
    { src: '~plugins/vue-design-system', ssr: true }
  ]
}

When I run npm run dev in my theme, it builds, but I get a warning:

WARNING Compiled with 1 warnings warning in ./plugins/vue-design-system.js 7:8-14 "export 'default' (imported as 'system') was not found in 'fp-design-system'

Seems to have an issue with the generated system.js regarding the export (the command npm run build:system).

In my page on screen I get the following error when trying to use a component in the design system:

NuxtServerError Cannot find module 'fp-design-system/src/elements/TextStyle' from '/Users/paranoidandroid/Documents/websites/Nuxt-SSR'

If I hard refresh the page, I then get another message:

NuxtServerError render function or template not defined in component: anonymous

Any idea what's happening here? It would be really great to get this working somehow.

At this current time, I'm not sure if it's a Nuxt issue or a Vue Design System issue. I think the latter, just because the Nuxt setup I have right now is very bare-bones...so it's not something else causing this.

Thanks.



from Using Vue Design System in Nuxt is throwing errors about export in system.js

No comments:

Post a Comment