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

Question

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.

Repository on GitHub:

Here is the repo for my "theme", but in order to get this going, you will need to create a design system separate from this with the same name and follow the steps to use the design system as a local (file) NPM module.

https://github.com/michaelpumo/Nuxt-SSR

console.log of system (from the JS import statement)

Is 'fp-design-system' a module you created? It says there's no default export, so possible you need to check that the export is defined correctly on your module? — GrokSrc
This export comes from the JS file (system.js) generated by the Vue Design System. It looks like it has an export just fine. — Michael Giovanni Pumo
Then shouldn’t you import from ‘vue-design-system’ instead of ‘fp-design-system’? — GrokSrc
No, as fp-design-system is the design system we've created from vue-design-system. It becomes its own npm dependency. See here: github.com/viljamis/vue-design-system/wiki/… — Michael Giovanni Pumo
@MunimMunna I have also tried with a fresh design system without any customisation except for the name and I get errors regarding "window is not defined" in Nuxt...possibly due to SSR. Perhaps Vue Design System does not support SSR. The developer has not gotten back to me. — Michael Giovanni Pumo

ghybs ghybs · Accepted Answer · 2018-06-28T17:08:30

As for your first error (""export 'default' (imported as 'system') was not found in 'fp-design-system'"), the UMD built JS from vue-design-system does not export a "default" object. But you can simply workaround the issue by importing it as:

import * as system from 'fp-design-system'

instead of:

import system from 'fp-design-system'

Then another issue comes quickly as you noticed in your comments: "window is not defined", due again to the UMD built JS that expects window to be globally available, instead of the usual trick to use this (which equals window in a browser). Therefore as it is, the build is not comptible with SSR.

You could however slightly rework the built JS by replacing the first occurrence of window by this, but I am not sure if the result will still work.

Most probably you should better keep this module for client rendering only.

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

2 Answers