Monday, 8 July 2019

vue cli build with target lib: "require is not defined" when component is imported

I'm trying to export a Vue component as a package, and using vue cli to build the dist. I intend to publish it on npm, but I'm currently using a symbolic link for testing purpose. However even with a simple hello-world project I can't make a valid package.

I created a project:

vue create hello-world

Then I modified the package.json:

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --target lib --name vue-pdf-viewer ./src/components/HelloWorld.vue",
    "lint": "vue-cli-service lint"
  },
  "main": "./dist/vue-pdf-viewer.common.js",

Then I call

npm run build

and it compiles without error.

Then I make an import in a vue component in another project (I used a symbolic link in node_modules):

import HelloWorld from "hello-world";

On page render I get the following error:

[Vue warn]: Failed to resolve async component: function MediaViewerPdf() {
  return Promise.all(/*! import() */[__webpack_require__.e(62), __webpack_require__.e(46)]).then(__webpack_require__.bind(null, /*! ./viewers/MediaViewerPdf.vue */ "./vuejs/components/mediaViewer/viewers/MediaViewerPdf.vue"));
}
Reason: ReferenceError: require is not defined

Any idea what's happening?

Remarks:

  • using vue inspect, I checked that in webpack config that:

target: "web" and output.libraryExport: 'default'

  • I already set resolve.symlinks at false on the importing project.

Repo with whole code: https://github.com/louis-sanna/vue-hello-world



from vue cli build with target lib: "require is not defined" when component is imported

No comments:

Post a Comment