Import system not working

[dracon]

Thanks for vue-design-system. It's amazing.

I tried to import system in a existing Vue-project as mentioned on "getting startet" as local npm package
But I get this error:
13:8-14 "export 'default' (imported as 'system') was not found in 'wb-design-system'

I'm using @vue/cli 3.* and if I take a look inside system.js I can see there are exports,system ...

I'm really confused.

I hope to get help here because I didn't find help anywhere else.

[michaelpumo]

I am getting the same / similar problem.

My error is: 5:8-14 "export 'system' was not found in 'fp-design-system'

My setup:
Nuxt 1.0.0
Vue Design System 2.1.4

Any help on this appreciated as it's stopping our entire development.

This is the first time I've used VDS, so it'd also be great to know if it's perhaps a misunderstanding with the docs? Thanks.

[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 :)

[arielsalminen]

@dracon @michaelpumo Could you please share how you’re trying to import the system?

In package.json, you should have something like this if testing locally:

"dependencies": {
    "foo": "file:../vue-design-system",
    ...
  },

and later, in your main.js:

import system from "foo";
import "foo/dist/system.css";

Vue.use(system);

[michaelpumo]

@viljamis That’s exactly how I was doing it. I’ve tried both a Vue Cli project and a Nuxt one.

[arielsalminen]

@michaelpumo Just tested creating a new project with the latest vue-cli + building and installing a new local library package with Vue Design System 3.0.1. Everything seems to be working for me, so would you mind sharing the exact steps & code you’re using? (and additionally testing if this is fixed with 3.0.1)

[alpadev]

@viljamis @michaelpumo
I can confirm for me it's working too with some new project created using the vue-cli@3.0.0-rc.5 and some fresh built VDS@3.0.1. I figured it might be confusing in what project you have to run that npm install so in case I added the working directories.

This is how I did:
(CWD = ~/coding/)
First I created some project using the vue-cli e.g. vue create vds-hello-world with default(babel, eslint) settings.

(CWD = ~/coding/)
Next steps as mentioned in the docs (I chose to add the destination folder as some parameter to git clone):

git clone https://github.com/viljamis/vue-design-system.git some-design-system
cd some-design-system
npm install

(CWD = ~/coding/some-design-system)
After this I renamed the name field in the package.json to some-design-system and ran npm run build:system. This will create some dist folder with the following structure:

.
└───dist
    │   system.css
    │
    └───assets
    │   │   system.css
    │
    └───system
        │   system.js
        │   system.utils.scss
        │
        └───icons
        └───tokens

(CWD = ~/coding/some-design-system)
Now switching back to the project created in the first step (cd ../vds-hello-world)

(CWD = ~/coding/vds-hello-world)
Here I ran npm install --save file:~/coding/some-design-system.

(CWD = ~/coding/vds-hello-world)
Next, I went into ./src/main.js and there I added:

...
import SDS from 'some-design-system'
import 'some-design-system/dist/system.css'

...

Vue.use(SDS)

new Vue( ...

(CWD = ~/coding/vds-hello-world)
For testing purposes, I also added the Heading-Element that ships with the Vue Design System into ./src/App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <Heading level="h1">Hello from your Design-System-Component</Heading> <--- VDS-Component
  </div>
</template>

(CWD = ~/coding/vds-hello-world)
npm run serve to run the vue-project. In the browser, the webpage shows the heading as expected.

[arielsalminen]

@alpadev thank you for these steps.

@michaelpumo did you manage to get it sorted out?

[arielsalminen]

I think I actually now know what the issue is here and we might have to switch away from Webpack for the library build. See my comment here: #91 (comment)

[arielsalminen]

Please see if you can get your lib working inside this setup, Vue CLI is currently causing some issues that need to be resolved: https://github.com/viljamis/vue-design-system-example.

One big issue being that Vue Design System can’t be currently imported to a project using Vue 2.5.17+ due to some breaking changes they’ve introduced, so you need to use 2.5.16 or below for now. This will get hopefully fixed later on.

[arielsalminen]

@dracon @michaelpumo This is now fixed and releasing a new version soon with the fix. if you’re still, even after the latest version seeing this error, it’s probably caused by the fact that you’re trying to import the provided UMD module as an ES Module.

[arielsalminen]

Just released a new version with a fix for this: https://github.com/viljamis/vue-design-system/releases/tag/3.5.2 (see the demo links and instructions under them)