Vue.js: Optimize Webpack bundle by excluding core-js

Below is the content of my vue.config.js file:

module.exports = {
  configureWebpack: {
    externals: {
      "vue": "Vue",
      "core-js": "core-js",
    },
  },
};

By using this configuration, I have successfully excluded the vue.js (Vue) library and can now link it from a CDN.

However, despite specifying 'core-js' as an external library, it is still being packed with the build and not recognized as external. What could be causing this issue?

Answer №1

In order to make the necessary changes, you will need to update your babel configuration.

Below is an example of a babel.config.js:

module.exports = {
  presets: [
    [
      "@vue/cli-plugin-babel/preset",
      {
        useBuiltIns: false,
      },
    ],
  ],
};

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

Vue-Router failing to redirect in a Single Page Application using Vue and Laravel

I have been attempting to implement vue-router in a Vue.js/Laravel project. My project consists of two simple pages: home page: https://i.stack.imgur.com/GmHOR.png about page (single-page scrolling): https://i.stack.imgur.com/CZDnZ.png The files used ...

how to open a new tab using JavaScript with Selenium

My code is supposed to open a new window that goes from the login window to the main menu, module, reports, and finally the report name. The report name should be opened in the next tab. Issue: The report name is not opening in a new tab; it's openin ...

Converting PHP arrays into JavaScript arrays with the help of json_encode()

Is there a way to pass an array from PHP to the JavaScript function console.log()? I'm currently simulating a database and need help with this specific task. Despite not having an array declared in my code, I attempted to use the .getJSON() function w ...

Not all databases are retrieved in the search query

When I make an API call to get all the Database entries, I am encountering an issue. The response I receive only includes a few databases instead of all of them. async function checkDatabases(item){ if(item.object == 'database') ...

converting JSON to date format in angular

.controller('feedCtrl', ['$scope', '$http', function($scope, $http) { $http.get('items.json').then(function(response) { $scope.items = response.data; $scope.user = localStorage.getItem("glittrLoggedin"); ...

Calculate the number of days required for the value in an item to multiply by two

I'm currently working on a JavaScript project to create a table displaying the latest number of coronavirus cases. I've reached a point where I want to add a column showing how many days it took for the confirmedCases numbers to double. Here&apos ...

Troubleshooting: React Testing Library Issue with Updating Material UI DatePicker Input Content

I'm attempting to update the value of the Material UI Datepicker Input using React Testing Library. Unfortunately, I have not been successful with the fireEvent.change() method. import React from "react"; import { render, screen, waitFor, fi ...

What is the most optimal method for transforming this array of objects into a different format?

My array consists of objects structured like this: [ {prop1: valueA, prop2: valueB, prop3: valueC}, {prop1: valueD, prop2: valueE, prop3: valueF}, ... ] I am looking to transform this array into objects with a different structure: [ {x: valueA, y: value ...

Is there a way to invoke a function once grecaptcha.execute() has completed running, but in response to a particular event?

Presently, the JavaScript function grecaptcha.execute is triggered on page load, as shown in the first example below. This means that the reCAPTCHA challenge occurs as soon as the page loads. A more ideal scenario would be to trigger it when the form submi ...

Troubleshooting issue: Django and Javascript - Why is my dependent dropdown feature not

I am new to using a combination of Javascript and Django. Below is the script I have written: <script> $(document).ready(function() { $("#source").change(function() { var el = $(this); var reg = ...

Typescript struggling to load the hefty json file

Currently, I am attempting to load a JSON file within my program. Here's the code snippet that I have used: seed.d.ts: declare module "*.json" { const value: any; export default value; } dataset.ts: import * as data from "./my.json" ...

Tips for dynamically hiding/showing a button depending on the focus of two different HTML inputs

I'm working on a login section and looking to add a unique feature: When a user selects the email or password input field, I want the button text to change to 'LOGIN'. If neither input field is selected, the text should display 'NOT A ...

Utilizing HTML and JavaScript to add grayscale effect to images within a table, with the ability to revert to the colored version upon mouseover

Seeking advice on utilizing the mouseover / mouseout event in javascript to implement grayscale on a table. The challenge requires creating a gray image grid (table) using HTML and then incorporating Javascript so that hovering over an image triggers it to ...

Hover over the text to disable the input element and display it as a textbox

Currently, I have a situation where I have two text boxes - when text is entered into textbox1, textbox2 becomes disabled as expected. However, my second requirement is that upon disabling textbox2, hovering over it should display the message "You can ente ...

A guide to replacing or customizing standard components in ReactJS

I need to modify the color property of a common component so I can use it elsewhere. const ViewAllIcon = (props) => ( <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 26 ...

Encountered a connection error in the Spring Boot application: net::ERR_CONNECTION_REF

Currently working on a school project developing a Spring Boot application using Restful. The application runs smoothly locally, but when deployed to AWS, I am encountering an "net::ERR_CONNECTION_REFUSED" error for all my GET and POST requests sent to the ...

"Looking to retrieve data from an array instead of an object in JavaScript? Here's how you can

There is a slight issue with my fetch method in grabbing data from this link . I am attempting to use the .map function on it but instead of functioning properly, I encounter an error that says Unhandled Rejection (TypeError): jedis.map is not a function. ...

Ways to verify the authenticity of a JWT token

I recently came across a tutorial on creating user authentication with Vue.js and Lumen. The tutorial utilizes the tymon/jwt-auth library to handle authentication. So far, everything is working smoothly. The API manages all my data and provides a token to ...

What is the best way to ensure that consecutive if blocks are executed in sequence?

I need to run two if blocks consecutively in TypeScript, with the second block depending on a flag set by the first block. The code below illustrates my scenario: export class Component { condition1: boolean; constructor(private confirmationServic ...

Nuxt-link modifies the URL without altering the page's content

Every time I include this code snippet in components/feed.vue: <template><div><nuxt-link :to="{path: '/videos/new', query: { page:nextpage(currentpage) } }">next</nuxt-link></div></template> or <template ...