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

Question

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-hello-world ./src/components/HelloWorld.vue",
    "lint": "vue-cli-service lint"
  },
  "main": "./dist/vue-hello-world.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"

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

EDIT: I have confirmed that it doesn't come from the symbolic link, I have exactly the same error with package directly on node_modules.

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

Answer 1

So I asked the question on the vue-cli repo and I got the solution! https://github.com/vuejs/vue-cli/issues/4245

Turns out NODE_ENV was already set at development in my shell, so it was the mode used to make the build.

Just need to set the mode explicitly and it works:

vue-cli-service build --target lib --name vue-hello-world ./src/components/HelloWorld.vue --mode production

You may need to add it to vue.config.js:

config
  .mode("production")