I am facing errors while running npm run build in my Vue CLI project, however, npm run dev is running smoothly without

I am encountering an issue when running npm run build as it generates a series of errors, whereas npm run dev runs smoothly without any errors.

I have attempted to resolve this by modifying the public path in webpack.config.js to ./dist, but unfortunately, this did not solve the problem. I also tried installing uglifyjs, but it did not provide a solution either. At this point, I am unsure of what else to try.

Below is my webpack.config.js file:

var path = require('path')
var webpack = require('webpack')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
  // webpack configuration here
}

And here is my package.json file:

{
  "scripts": {
    // npm scripts here
  },
  "dependencies": {
    // dependencies here
  },
  // devDependencies and browserslist here
}

Upon running npm run build, the expectation is to have a dist folder with all necessary files to operate in production mode. Instead, I am encountering the following errors:


// Error log excerpt here

Answer №2

Give this command a try:

npm install uglifyjs-webpack-plugin --save

Answer №3

After some research, I finally managed to solve the issue. I modified my webpack.config.js file by replacing

new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),

with

optimization: {
    minimizer: [new UglifyJsPlugin()],
  },

The problem stemmed from me adding the minimizer without removing the old new webpack.optimize.UglifyJsPlugin. I found the solution on their official documentation

Answer №4

If you wish to customize your build, you have the option to exclude specific files. Simply navigate to your tsconfig.json file and modify the include parameter like so:

  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],

Instead, you can exclude certain files by adjusting the exclude parameter:

  "exclude": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],

It's important to note that you should double-check for any errors while in development mode.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to bring a JavaScript file from the source file into an index.html document

I am currently in the process of developing a system using React, and as someone new to the framework, I have encountered an issue. I need to include a JavaScript file in my index.html that is located within the src folder. This js file is essential for th ...

Mastering the art of using either promises or callbacks properly

Attempting to retrieve the result of a variable after completing all asynchronous processes in a function. I've discovered that I need to use promises for this, so I spent today learning about them. I've implemented promises in my function and c ...

invoke a function through a form in Angular

I am encountering an issue with invoking a function from Angular. This particular function has a dual purpose - it uploads an image to S3 and saves the form data along with the URL of the image in the MongoDB database. Below is the HTML snippet where I cal ...

how to use $emit to modify a computed property in VueJS

I have a form with multiple components for input fields, each containing another component for displaying errors. Here is the code: // Input component <template></template> <script> import Store from '../../store' exp ...

Tips for utilizing Jquery to manage a dropdown designed in button form

<div class="btn-group btn-grp-uk col-xs-12 "> <button id="colorList" type="button" class="btn-phn btn btn-dropdown-white- uk dropdown-toggle col-xs-12" data-toggle="dropdown">Red </button> <ul id="colordrop" class="dr ...

The Npm generate script is failing to create the necessary routes

I've integrated vue-router into my nuxt project, but I encountered an issue when running npm run generate - it generates everything except for my pages. I suspect the problem lies with the router implementation as I didn't face any issues before ...

Change the text color of the Vuetify button to customize its appearance

Is there a way to change the default active color for button text in a toolbar using CSS? v-btn(:to="item.path" active-class="v-btn--active toolbar-btn-active") {{item.meta.title}} I attempted to override it with this custom class: .toolbar-btn-active { ...

Find distinct elements in an array of objects

Imagine you have an array filled with different objects: var itemsArray = [ {name: "apple", color: "red", weight: "100g"}, {name: "banana", color: "yellow", weight: "120g"}, {name: "apple", color: "red", weight: "100g"}, {name: "banana", color: "y ...

What causes TypeScript to automatically infer a default property when dynamically importing a JavaScript file that lacks a default export?

While dynamically importing a javascript file that exports multiple functions (without a default export), I encountered this issue: const sayHi = import('./sayHi.js') I was expecting the type of sayHi to be Promise<{name1: function, name2: fu ...

Update settings when starting with chromedriver

I am currently using webdriver (), standalone selenium, and mocha for writing my test cases. These test cases are specifically designed for Chrome, so I rely on chromedriver for execution. However, when launching the browser, I need to ensure that the "to ...

Can the jQuery live function be triggered without the need for an event?

Using the live function in jQuery requires an event to trigger it. More information can be found in the official API documentation. $(".xyz").live('event', function(){ }); I am trying to make the above function run as soon as the dynamicall ...

Observing the closing of a modal window from a different controller in AngularJS

Within my main controller, I have a function called $scope.showDialog: $scope.showDialog = function(ev) { $mdDialog.show({ controller: 'DialogController', templateUrl: 'partials/dialog.tmpl.ejs', targetEvent: ev ...

Database only accepts numerical data for insertion, rejecting any characters or alphanumeric entries

On a webpage, I have an input field through which I am passing the value into an ajax POST request. After logging everything in my JavaScript file and confirming that all is working as expected. In my PHP file, I retrieve the input value using $message = ...

adjusting three sections within a flexible navigation bar

Having difficulties creating a dynamic navbar that changes on scroll and keeping the elements within the nav fixed when the menu options appear. For reference, you can check out this codepen: http://codepen.io/timothyfernandez/pen/azXQPV Any assistance w ...

"Enhancing JqGrid functionality with inline editing and custom formatters

I'm currently working with a column model that looks like this: { name: 'CostShare', index: 'CostShare', width: 50, formatter: 'number', formatoptions: { decimalPlaces: 2, suffix: "%" }, resizeable: true, align: 'ce ...

Passing the value of a radio button to a component in React: a comprehensive guide

I've been struggling to figure out how to pass the value of a selected radio button to another component in React. Currently, I'm exploring the Star Wars API and attempting to create a basic search interface where users can retrieve information a ...

Experiencing a WEB3js error in a Vite, React, TypeScript application: Troubleshooting TypeError with callbackify function absence

Hey there, I've been experimenting with using web3 in a React client application (specifically with vite react-ts). When trying to call web3.eth.net.getId(), I encountered an error mentioning that callbackify is not a function. After some investigatio ...

Incorrect .offset().top calculation detected

Within a webpage, I have multiple sections. Positioned between the first and second section is a navbar menu. As the user scrolls down and the navbar reaches the top of the page, a function is triggered to fix it in place at the top. While this functionali ...

How can I retrieve a formController in AngularJS?

When trying to reset the data in a form and calling form.setPristine(), I encounter an issue where the formController is not registered within the $scope. It may sound like a basic question, but how can I locate the formController? Within the code snippe ...

Building XML using PHP with relatively extensive information stored in JavaScript

Similar Question: XML <-> JSON conversion in Javascript I have a substantial amount of data stored in JavaScript that I need to convert into an XML file on the PHP server. The process of transforming the data into a JSON object, sending it to PH ...