Error message "require is not defined" encountered when importing a component in a Vue CLI build with target set to lib

Question

Error message "require is not defined" encountered when importing a component in a Vue CLI build with target set to lib

I am currently in the process of exporting a Vue component as a package, utilizing vue cli to build the distribution. My goal is to publish it on npm, but for testing purposes, I am using a symbolic link. Despite starting with a basic hello-world project, I am unable to create a valid package.

To begin, I created a project:

vue create hello-world

Next, I made modifications to the package.json file:

"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",

After updating the script commands, I ran:

npm run build

The compilation process was successful without any errors.

However, when I attempted to import the packaged component into another Vue project (using a symbolic link in node_modules), I encountered the following error during page rendering:

[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 insights on what might be causing this issue?

Additional Notes:

When running vue inspect, I confirmed that the webpack config has the line:

target: "web"

I have already set resolve.symlinks to false in the importing project.

EDIT: It has been verified that the issue persists even when utilizing the package directly from node_modules, ruling out potential issues related to the symbolic link.

For the full code repository, please visit: https://github.com/louis-sanna/vue-hello-world

javascript vue.js webpack require vue-cli

Answer 1

Answer №1

After reaching out for help on the vue-cli repository, I was able to find the solution! https://github.com/vuejs/vue-cli/issues/4245

I discovered that my shell environment already had the NODE_ENV set to development, which was influencing the build mode.

All I needed to do was explicitly specify the mode like this:

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

If necessary, you can also add it to your vue.config.js file:

config
  .mode("production")

Answer 2

After reaching out for help on the vue-cli repository, I was able to find the solution! https://github.com/vuejs/vue-cli/issues/4245

I discovered that my shell environment already had the NODE_ENV set to development, which was influencing the build mode.

All I needed to do was explicitly specify the mode like this:

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

If necessary, you can also add it to your vue.config.js file:

config
  .mode("production")

Answer 3

Answer №2

This issue arises because the default Vue CLI Webpack setup does not import commonjs modules specified in the "main" field of package.json from the project that is trying to import them. The problem lies with the importing project, not with the one exporting the component.

There are two possible solutions to this problem:

From the perspective of the importing project

To address this, you can install Babel plugins for the project importing your components and configure babel.config.js as follows:

module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: [
    '@babel/plugin-transform-modules-commonjs', // enables importing .common.js files
    '@babel/plugin-transform-modules-umd'       // allows importing .umd.js files
  ]
}

However, simply implementing these changes will not be enough; you also need to import the generated CSS from the library by adding the following line in your entry file:

import 'hello-world/dist/vue-hello-world.css';

Please note that I have only tested this using yarn link, but I believe it should work just fine with a separately imported npm module.

From the perspective of the library

The main concern (presumably) behind the original question is how to bundle a library so users do not have to go through this process each time they want to use it.

Option 1: Do not bundle the library - provide .vue files and sources. Include everything in the 'src' directory of your module, write a readme with instructions, and leave the compilation and bundling tasks to the importing project.

Option 2: Utilize rollup with the Vue plugin to bundle components. There is an example demonstrating how to achieve this. By following that example, your project will be able to import the .esm build effortlessly. https://github.com/vuejs/rollup-plugin-vue/tree/master/cookbook/library

Answer 4

This issue arises because the default Vue CLI Webpack setup does not import commonjs modules specified in the "main" field of package.json from the project that is trying to import them. The problem lies with the importing project, not with the one exporting the component.

There are two possible solutions to this problem:

From the perspective of the importing project

To address this, you can install Babel plugins for the project importing your components and configure babel.config.js as follows:

module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: [
    '@babel/plugin-transform-modules-commonjs', // enables importing .common.js files
    '@babel/plugin-transform-modules-umd'       // allows importing .umd.js files
  ]
}

However, simply implementing these changes will not be enough; you also need to import the generated CSS from the library by adding the following line in your entry file:

import 'hello-world/dist/vue-hello-world.css';

Please note that I have only tested this using yarn link, but I believe it should work just fine with a separately imported npm module.

From the perspective of the library

The main concern (presumably) behind the original question is how to bundle a library so users do not have to go through this process each time they want to use it.

Option 1: Do not bundle the library - provide .vue files and sources. Include everything in the 'src' directory of your module, write a readme with instructions, and leave the compilation and bundling tasks to the importing project.

Option 2: Utilize rollup with the Vue plugin to bundle components. There is an example demonstrating how to achieve this. By following that example, your project will be able to import the .esm build effortlessly. https://github.com/vuejs/rollup-plugin-vue/tree/master/cookbook/library

Answer 5

Answer №3

If you're unsure about how to go about creating a symbolic link, consider using the npm link command. In case you encounter any difficulties (just like I did), give npm-link-better a try:

npm install -g npm-link-better
cd vue-hello-world
npm link
cd ../hello-world
nlc -w vue-hello-world

When it comes to building component libraries, you might want to check out the vue-cli-plugin-component repository. This plugin is known for setting up vue-cli projects efficiently.

Answer 6

If you're unsure about how to go about creating a symbolic link, consider using the npm link command. In case you encounter any difficulties (just like I did), give npm-link-better a try:

npm install -g npm-link-better
cd vue-hello-world
npm link
cd ../hello-world
nlc -w vue-hello-world

When it comes to building component libraries, you might want to check out the vue-cli-plugin-component repository. This plugin is known for setting up vue-cli projects efficiently.

Error message "require is not defined" encountered when importing a component in a Vue CLI build with target set to lib

Answer №1

Answer №2

Answer №3

Similar questions

Error in Node.js Google Spreadsheets: The root element must be named 'Unknown name'

Adapting the visual display according to the selected radio button output

There seems to be a mysql error with a syntax issue causing an ER_PARSE_ERROR with errno 106

Looking for advice on utilizing Node.js and MongoDB to identify platform modifications on a website

Encountering an error: Reading an undefined property - NodeJS, Express, and Mongoose

Tips for exchanging JSON data between HTML and PHP using jQuery Ajax?

What is the best way to showcase items in the shopping cart through a popup using Vue.js

Effortless self-explanatory TypeScript / JavaScript code

Tips for optimizing AngularJS performance with large scopes

Tips for successfully implementing JavaScript within innerHTML following an AJAX request

A guide on sorting MongoDB arrays in JavaScript to arrange them in descending order based on two specific fields

Using jQuery to extract all image sources from a parent element and remove a portion of the source URLs

Modifying object colors on hover using three.js

What is the reason Vue does not execute or update a computed property that contains a reference to 'this' within a filter function?

Avoid altering the background color through state variables in React

Confirm the authenticity of a JWT token using Express

Creating unique identifiers for each level within a multidimensional array using JavaScript

Navigating through Index in #each in emberjs

What is the best way to retrieve and store the contents of a .txt file that is accessible via HTTP into a JavaScript array,

Incorporating an MVC View into a sophisticated JsonResult response