How can I use standalone vue library in a vue application?

user_3896698 0
Viewed 313

I am trying to use a vue component library, which is loaded by a script tag, within a vue application. That component library is using a webpack setup and uses the setting externals to exclude all vue dependencies. So the host bundle which is using that library has to ship vue and other needed dependencies. The component library itself is using vue cli with the script vue-cli-service build --target lib to build a lib.umd.js file. Inside the index.html of my host bundle I am just including that file by a script tag. The webpack setup of the host bundle uses config.externals(['@test/my-component-library']) to exclude the component library which is being loaded externally. Inside the host bundle I am using the component library like this:

import { MyComponent } from '@test/my-component-library'

When I run my application, I get the following error: Uncaught SyntaxError: Invalid or unexpected token. This error happens in the following line of my host bundle:

/*!*******************************************************!*\
  !*** external "@test/my-component-library" ***!
  \*******************************************************/
/*! no static exports found */
/***/ (function(module, exports) {
eval("module.exports = @test/my-component-library;//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQHRlc3QvbXktY29tcG9uZW50LWxpYnJhcnkuanMiLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vZXh0ZXJuYWwgXCJAdGVzdC9teS1jb21wb25lbnQtbGlicmFyeVwiPzFjOTAiXSwic291cmNlc0NvbnRlbnQiOlsibW9kdWxlLmV4cG9ydHMgPSBAdGVzdC9teS1jb21wb25lbnQtbGlicmFyeTsiXSwibWFwcGluZ3MiOiJBQUFBIiwic291cmNlUm9vdCI6IiJ9\n//# sourceURL=webpack-internal:///@test/my-component-library\n");
/***/ })

Does anyone know why webpack is producing such code and how I can correct it?

vue.js webpack javascript
1 Answers

I guess I found the solution. So first of all I had a wrong configuration for externals. The correct configuration is:

config.externals({
  '@test/my-component-library': {
    root: '@test/my-component-library',
    commonjs2: '@test/my-component-library',
    commonjs: '@test/my-component-library',
    amd: '@test/my-component-library',
  },
})

In the component library I had to add the webpack configuration config.output.library('MyComponentLibrary') so that the object MyComponentLibrary is globally available in window scope. Then I had to remove the import statement in the host bundle. To register the component I had to add this line to my vue file:

components: {
  'MyComponent': MyComponentLibrary.MyComponent,
}

But now I have another problem. The component library itself is using vuetify (which is another component library). But I have also added vuetify to the externals option because my host bundle already contains vuetify. And now I am getting lots of Unknown custom element exceptions. So apparently my component library does not find the vuetify components in my host bundle. Are there any solutions for this problem?

user_38966980
Related