Importing problems

[paglias]

Hi,

thanks for this library!

I'm having some problems importing only one picker

import ColorPicker from 'vue-color/src/components/Compact';

fails in my project (with webpack, and vue-loader installed) with this error:

This dependency was not found:

* !!vue-style-loader!css-loader?{"minimize":false,"sourceMap":false}!../../../vue-loader/lib/style-compiler/index?{"id":"data-v-ade7e162","scoped":false,"hasInlineConfig":false}!stylus-loader?{"sourceMap":false}!../../../vue-loader/lib/selector?type=styles&index=0!./Compact.vue in ./~/vue-color/src/components/Compact.vue

To install it, you can run: npm install --save !!vue-style-loader!css-loader?{"minimize":false,"sourceMap":false}!../../../vue-loader/lib/style-compiler/index?{"id":"data-v-ade7e162","scoped":false,"hasInlineConfig":false}!stylus-loader?{"sourceMap":false}!../../../vue-loader/lib/selector?type=styles&index=0!./Compact.vue

Importing with

import { Compact as ColorPicker } from 'vue-color';

works but it loads the entire library and not just the Compact picker

Thanks

[2one2]

I'm having the same problem... @paglias have you solved this?

[cassioscabral]

Are you sure that it's loading the entire library using
import { Compact as ColorPicker } from 'vue-color'; ?

We are exporting each component individually, importing like that should import only the component, not the whole library.

[paglias]

@2one2 I think I ended up importing the whole project because importing a single file doesn't work and import { Compact as ColorPicker } from 'vue-color'; imports the entire project anyway because it's compiled as an es5 module and not exported using es6

[2one2]

@paglias thanks

@cassioscabral yes importing with import { Compact as ColorPicker } from 'vue-color'; imports entire library... with webpack

[linx4200]

@paglias Can I ask did you install stylus-loader in your project? Need more information to debug.

[paglias]

@linx4200 no, I don't use stylus-loader

[linx4200]

@paglias Thanks for the reply. Would fix this problem asap.

[linx4200]

Fixed.
Please upgrade to the latest version.
Now you can import component individually. For example import compact from 'vue-color/src/components/Compact.vue';.

[frandiox]

Similar issue here but with babel-preset-es2015.

For the record, install it in your project (npm install babel-preset-es2015) and change vue-loader options in Webpack:

{
  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
    // your options here,
    presets : [
      require.resolve('babel-preset-es2015')
    ]
  }
}

In addition, since there is a mixin/color.js file (non vue file) which also needs transpilation:

{
  test: /\.js$/,
  loader: 'babel-loader',
  options: {
    presets : [
      require.resolve('babel-preset-es2015')
    ]
  }
}

@linx4200 Perhaps this could be fixed in a new version? Providing an ESM ready folder would be ideal but might be a bit hard. I think using babel-preset-env, which is more common than babel-preset-es2015, is easier. Also, color.js would need to be full ES5. I think the only required change in that regard is syntax like this:

{
  data() {
  }
}

Should be:

{
  data: function() {
  }
}

Same for computed props, watch and methods.

[linx4200]

@frandiox mixin/color.js is compiled by babel before release, so I think it is ES5 ready.

[linx4200]

Will use babel-preset-env in the next release, and provide ESM ready component in 3.0, which we are working on it.