Vue-cli: vue cli build with target lib: “require is not defined” when component is imported

[louis-sanna]

Version

3.9.1

Reproduction link

https://github.com/louis-sanna/vue-hello-world

Environment info

Environment Info:

  System:
    OS: macOS High Sierra 10.13.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 12.4.0 - /usr/local/bin/node
    Yarn: Not Found
    npm: 6.10.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 75.0.3770.100
    Firefox: Not Found
    Safari: 12.1.1
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0 
    @vue/babel-plugin-transform-vue-jsx:  1.0.0 
    @vue/babel-preset-app:  3.9.0 
    @vue/babel-preset-jsx:  1.0.0 
    @vue/babel-sugar-functional-vue:  1.0.0 
    @vue/babel-sugar-inject-h:  1.0.0 
    @vue/babel-sugar-v-model:  1.0.0 
    @vue/babel-sugar-v-on:  1.0.0 
    @vue/cli-overlay:  3.9.0 
    @vue/cli-plugin-babel: ^3.9.0 => 3.9.0 
    @vue/cli-plugin-eslint: ^3.9.0 => 3.9.1 
    @vue/cli-service: ^3.9.0 => 3.9.0 
    @vue/cli-shared-utils:  3.9.0 
    @vue/component-compiler-utils:  2.6.0 
    @vue/preload-webpack-plugin:  1.1.0 
    @vue/web-component-wrapper:  1.2.0 
    eslint-plugin-vue: ^5.0.0 => 5.2.3 (4.7.1)
    vue: ^2.6.10 => 2.6.10 
    vue-eslint-parser:  2.0.3 (5.0.0)
    vue-hot-reload-api:  2.3.3 
    vue-loader:  15.7.0 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.6.10 => 2.6.10 
    vue-template-es2015-compiler:  1.9.1 
  npmGlobalPackages:
    @vue/cli: 3.9.1

Steps to reproduce

I'm trying to export a Vue component as a package, and using vue cli to build the dist. 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 (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

What am I missing?

What is expected?

Component should be imported without throwing an error.

What is actually happening?

It does throw an error.

---

Remarks:

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

target: "web"

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

[D504]

I have the same problem

[louis-sanna]

@D504 did you find a simple way to solve that issue?

[sodatea]

Fixed after rebundle the hello world component.

[louis-sanna]

@sodatea the importing project is massive, I'll make a repo with minimal amount of code.

Edit: what do you mean by rebundle the hello world component.?

[sodatea]

The problem is that you bundled the library with NODE_ENV being development. So it's bundled with a lot of development configurations, such as hot-reload related logic, inline source maps, etc…

And the culprit is cheap-module-eval-source-map used in the development mode. All the module code and source maps are inlined in a eval statement and it fails to run after being imported to another project and wrapped inside another webpack require call.

[sodatea]

We recommend using NODE_ENV=production whenever you need to build a project/component and it is the default when running the build command.

I don't know what went wrong on your side but maybe there was a pre-existing NODE_ENV environment variable in your shell environment.

A quick fix is to change the build script to vue-cli-service build --target lib --name vue-hello-world ./src/components/HelloWorld.vue --mode production

[louis-sanna]

@sodatea thanks a lot for your help!

You were right I had already NODE_ENV set at development in my shell.