The spread operator in Vuex is causing compilation errors with babel, as it continuously results in a module build failure

Currently, I am utilizing a spread operator within my mapGetters object. It is crucial to use a specific babel-preset-stage for proper ES6 compilation. Even after installing babel-preset-stage-2 via npm, I encountered the following error:

ERROR in ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/AnotherResult.vue
Module build failed: SyntaxError: Unexpected token (13:8)

  11 | export default {
  12 |     computed: {
> 13 |         ...mapGetters ([
     |         ^
  14 |             'doubleCounter',
  15 |             'stringCounter'
  16 |     ])

A quick search on GitHub revealed that many others have faced similar issues and suggested trying out babel-preset-stage-3 along with other webpack configurations.

Provided below is an excerpt from my package.json:

{
  "name": "vue-cli",
  "description": "A Vue.js project",
  "author": "Maximilian Schwarzmüller <<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dfb2bdb3bebcb4a6ef9fb8b2beb6b3f1bcb0b2">[email protected]</a>>",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "bootstrap": "^3.3.7",
    "vue": "^2.0.1",
    "vue-router": "^2.0.1",
    "vuex": "^3.1.1"
  },
  "devDependencies": {
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.0.0",
    "babel-preset-stage-2": "^6.24.1",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^3.0.0",
    "css-loader": "^0.25.0",
    "file-loader": "^0.9.0",
    "vue-loader": "^9.7.0",
    "webpack": "2.1.0-beta.25",
    "webpack-dev-server": "2.1.0-beta.0"
  }
}

The contents of my .babelrc file are as follows:

{
    "presets": [
        ["es2015", {"modules": false}],
        ["stage-3", "env"]
    ],
    "plugins": ["transform-object-rest-spread"]
}

Despite implementing these new configurations, the code refuses to compile. Any suggestions or insights on this matter would be greatly appreciated.

Thank you!

javascriptvue.jsvuex

Answer №1

After implementing the following setup, I was able to successfully make it work

My babel.rc configuration:

{
  "presets": [
    ["es2015", { "modules": false }],
    ["stage-2"]
  ]
}

In my package.json file, I included these devDependencies:

"devDependencies": {
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-preset-es2015": "^6.0.0",
    "babel-preset-stage-2": "^6.24.1",
    "cross-env": "^3.0.0",
    "css-loader": "^0.25.0",
    "file-loader": "^0.9.0",
    "vue-loader": "^9.7.0",
    "webpack": "2.1.0-beta.25",
    "webpack-dev-server": "2.1.0-beta.0"
  }

Here is a snippet from my webpack.config.js file:

{
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/
      }

Answer №2

Using es6 features can enhance your code, but it may not be supported by all browsers. To ensure compatibility, you can use babel to transpile the code for browser understanding. Here's how:

  1. Install the babel preset: npm i babel-preset-stage-2

  2. Add the preset to your .babelrc file:

    { "presets": ["stage-2"] }

  3. Transpile the code using npm run dev

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

Use the inline IF statement to adjust the icon class depending on the Flask variable

Is it feasible to achieve this using the inline if function? Alternatively, I could use JavaScript. While I've come across some similar posts here, the solutions provided were not exactly what I expected or were implemented in PHP. <i class="f ...

javascriptpythonhtmlflaskjinja2

Setting up webpack for React to utilize multiple entry points and outputs

Having some trouble configuring the server to handle multiple entries and outputs. The application utilizes Zurb Foundation, jQuery, and React. I'm aiming to exclude jQuery and foundation from the bundle.js file, while also creating a separate bundle ...

javascriptjqueryreactjswebpackbabeljs

Is there a way to retrieve the sub-child menu data from a JSON file?

I am currently working on creating a horizontal menu from a json file. However, I am facing issues in retrieving the subchild elements properly. Below is an example of my json file: var data = [{ "menu":[ { "MenuId":1, ...

javascriptjquerycssjsonmenu

The Axios API request is made, but fails to retrieve any data back to the client

I've been working on a feature in my VueJS app where I need to restrict page viewing of an Upload instance to only members of a specific Group. However, I'm facing an issue with retrieving the group information. Despite axios successfully hittin ...

expressvue.js

Implementing NgRx state management to track and synchronize array updates

If you have multiple objects to add in ngrx state, how can you ensure they are all captured and kept in sync? For example, what if one user is associated with more than one task? Currently, when all tasks are returned, the store is updated twice. However, ...

javascriptangulartypescriptgoogle-cloud-firestorengrx

Sharing data between Vue instances: A guide on passing objects from one instance to another

I am working with the app.js file: require('./bootstrap'); window.Vue = require('vue'); import Home from './components/Home' const app = new Vue({ el: '#root', render: h => h(Home) }); Next, in my Home ...

vue.js

Tips for inserting user input into an array and showcasing it

const [inputValue, setInputValue] = useState(""); return ( <input onChange={(event) => setInputValue(event.target.value)} /> <p>{inputValue}</p> ); I'm facing a problem where I need to take input from a user and store it in ...

javascriptreactjsreact-hooks

What is the best way to increase incremental values that are nested within each other

A database has been loosely created with a key known as website. Inside this website object, multiple objects exist, one for each dynamically generated website. An illustration of how the database might appear is shown below: website: { google.com: { ...

javascriptnode.jsmongodbmongoose

Navigating through web pages and creating dynamic interfaces is made simple

As someone relatively new to React, I am currently exploring how to integrate React Router with Material UI. In my Layout file, I have implemented a Navigation drawer from Material UI with the menu on the left and content on the right, as depicted in the ...

javascriptreactjsreact-routermaterial-ui

Encountering a 404 error when trying to navigate to the next route using the Link component

Having issues with my login route. I've added a Link to the login route inside a button tag in my Navbar component, but when I try to access the route, I'm getting a 404 error page. --app ----pages ------component --------Navbar.js ----- ...

javascriptreactjsroutesnext.jstailwind-css

A guide on implementing Google reCAPTCHA in a Nuxt.js website

Trying to implement the recaptcha-module from nuxt-community in my Nuxt project but struggling with verifying if the user has passed the check. The documentation and example provided are not clear enough for me (https://github.com/nuxt-community/recaptch ...

javascriptvue.jsrecaptcha

"Is there a way to retrieve the props that have been passed down to a

I am looking to have custom props created in the root layer of my React app: import React from 'react' import App, { Container } from 'next/app' export default class MyApp extends App { static async getInitialProps({ Component, rout ...

javascriptreactjsnext.js

What is the best way to define a function in React hooks - using a function statement or

When working with a react hook and needing to define a function inside it, which approach is preferable? useEffect(() => { //... function handler() {} //... }, []); or should I use the newer const declaration instead? useEffect(() => { ...

javascriptreactjsreact-hooks

Can multiple `npm install` commands run at the same time?

Is it possible to have concurrent runs of npm install, or will they conflict on shared resources and create potential race conditions? Analyzing the code might not provide a clear answer, but for those working on developing npm, this is likely an implicit ...

javascriptnode.jsdeploymentconcurrencynpm

Unique Symbols and Characters in JavaScript

My JavaScript code looks like this: confirm("You are selecting to start an Associate who is Pending Red (P RD) status. Is this your intent?") I am encountering a strange issue where I get an alert with special characters, even though my code does not con ...

javascriptspecial-charactersalertconfirm

Is your Vue.js chart malfunctioning?

I have been experimenting with chart.js and vue.js. The component I created is called MessageGraph, and it is structured like this (with data extracted from the documentation): <template> <canvas id="myChart" width="400" height="400">< ...

javascriptlaravelvue.jschart.js

The react-leaflet-heatmap-layer-v3 source directory could not be located

Upon attempting to utilize the npm package react-leaflet-heatmap-layer-v3 in my React TypeScript application, I successfully installed it and ran yarn start. However, I encountered the following warning messages: WARNING in ./node_modules/react-leaflet-hea ...

javascriptreactjsnpmleafletreact-leaflet-v4

Navbar collapse not functioning properly on HTML, CSS, and JavaScript

I have developed a CSS code snippet: .nav{ right: 0px; left: 0px; margin-top: 0px; margin-bottom:20px; height: 35px; text-align: center; background-color: red; z-index: 1; } .sticky { background: #000; text-align: center; ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to delete markers from a leaflet map?

I need to remove markers from my map. I am looking to create a function that will specifically clear a marker based on its ID. I am utilizing Leaflet for the map implementation. Here is my function: public clearMarkers(): void { for (var id in this. ...

javascriptangulartypescriptleaflet

Creating numerous bar graphs for each specific date

I have a dataset containing dates and corresponding information for each element. Despite trying various approaches, I am unable to create a barchart. Every solution I've attempted has been unsuccessful thus far. The dataset is structured as follows ...

javascripttypescriptd3.js