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

[michaelpumo]

Hi!

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 }
  ],
  build: {
    vendor: [
      'fp-design-system'
    ]
  }
}

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.

[jackbarham]

I'm having the same issue. Has anyone got this working with Nuxt.js at all?

[arielsalminen]

Hey folks! Just returned from a 5 week “offline” trip, hence the little delay here. Let me get back to this early next week when I’ve survived the jet lag :)

[michaelpumo]

Thanks @viljamis; much appreciated and hope you had a great holiday!

[arielsalminen]

@michaelpumo looking into this now.

[arielsalminen]

Looks like the whole library build has to be changed drastically, no easy way around. Will probably have to switch from Webpack to Rollup to make the library build as Webpack does not support ES Module build currently (Currently Vue Design System builds UMD module).

• Related Webpack issue: support output.libraryTarget: 'module' webpack/webpack#2933.
• Note to myself: this might be useful, see rollup config in changes: [WIP] expose ESM browser build and remove fetch and Promise polyfills - fixes #57 and #59 prismicio/prismic-client#60

[arielsalminen]

@michaelpumo I will close this issue as I figured out the issue isn’t really related to Nuxt, but it was already noticed in this earlier issue #90, so let’s continue discussion there :)