"export 'default' (imported as 'DesignSystem') was not found in 'fp-design-system'

[michaelpumo]

I have updated to the latest Vue Design System 3.5.5

I am following the steps detailed here for my Nuxt site: https://github.com/viljamis/nuxt-design-system

I build the design system to commonjs2 with npm run build:system

However, within my Nuxt site, when I run npm run dev, I get a console warning:

"export 'default' (imported as 'DesignSystem') was not found in 'fp-design-system'

If I navigate to the console on localhost:3000 I see:

Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
    at Module.<anonymous> (vendors.app.js:2162)
    at Module../node_modules/fp-design-system/dist/system/system.js (vendors.app.js:2312)
    at __webpack_require__ (runtime.js:788)
    at fn (runtime.js:151)
    at Module../src/plugins/design-system.js (app.js:4189)
    at __webpack_require__ (runtime.js:788)
    at fn (runtime.js:151)
    at Module../.nuxt/index.js (app.js:1811)
    at __webpack_require__ (runtime.js:788)
    at fn (runtime.js:151)

I'm not sure what's going on here.

Thanks

[arielsalminen]

@michaelpumo What does your src/system.js look like? Seems like you might not have all the latest changes there. There was a fix for this problem a couple weeks back.

[michaelpumo]

Hi @viljamis it looks exactly like it is in the repo with the latest updates:

/**
 * System.js creates the Design System Library.
 * It’s used in the system itself and when exporting it.
 *
 * You should & can add your own dependencies here if needed.
 */

// Define contexts to require
const contexts = [
  require.context("@/elements/", true, /\.vue$/),
  require.context("@/patterns/", true, /\.vue$/),
  require.context("@/templates/", true, /\.vue$/),
]

// Define components
const components = []
contexts.forEach(context => {
  context.keys().forEach(key => components.push(context(key).default))
})

// Install the above defined components
const System = {
  install(Vue) {
    components.forEach(component => Vue.component(component.name, component))
  },
}

// Automatic installation if Vue has been added to the global scope
if (typeof window !== "undefined" && window.Vue) {
  window.Vue.use(System)
}

// Finally export as default
export default System

I'm not having any issue with the design system itself, it's building just fine but only a problem when using it within Nuxt itself.

Thanks

[arielsalminen]

@michaelpumo Forgot to ask... are you trying to install the NPM package locally? That will throw you those two errors every single time. It has something to do with the way NPM handles local dependencies, which is quite error prone, at least for me.

I should probably remove the “local” instructions completely from the nuxt example since that just doesn’t work. You need to install the dependency from a remote repository for it to work.

[michaelpumo]

We actually have our repo as the dependency. This is then downloaded into node_modules. That's correct, right?

[arielsalminen]

@michaelpumo Ok, so, first of all, I’m sorry for all the issues you’re facing!

The error you’re seeing (I think) is caused by the fact that Nuxt is trying to import the provided umd or commonjs2 module as an ES module, what it isn’t(!), and that is throwing the error for you.

So the build itself is most likely more or less ok, but something in either in your custom code, Nuxt configuration, or the way you import the library is causing Nuxt to think that it’s an ES module (could it by any chance be the ES6 code that was causing you issues previously — what happens if you remove vue-flickity, do a new build and then import?).

In the future, btw, it looks like webpack is maybe planning on fixing their UMD build to be SSR compatible too, based on the discussions I saw here and a few other places, so maybe there won’t be need to switch from UMD build to commonjs2 soon: https://github.com/webpack/webpack/issues/6522

[arielsalminen]

@michaelpumo A side note: if the issue is some ES6 code you’re including in the bundle then I might be able to help by tweaking babel in vueds to convert 3rd party libraries to ES5 too.

[adabutch]

Just chiming in that I too was experiencing the issues above when bringing a modified version of this design system into my Nuxt project following the directions here & here.

I managed to fix it by following @viljamis's advice above to install not from a local directory but a remote repository. Thanks ~ that advice alone potentially saved hours! 😄

Eg. npm install --save git+https://github.com/**/*.git\#branch