Error: Cannot compile module due to SyntaxError caused by an unexpected token (three dots)

Encountering a minor issue with webpack. The code below is causing an error when I try to build:

pointer.files = {
    ...pointer.files,
    [file]: 1
};

The error message displayed is as follows:

Module build failed: SyntaxError: Unexpected token (84:28)

  82 |                         pointer.files = pointer.files || {};
  83 |                         pointer.files = {
> 84 |                             ...pointer.files,
     |                             ^
  85 |                             [file]: 1
  86 |                         };
  87 |                     });

I am unfamiliar with the usage of ..., hence unsure how to resolve this issue. Can someone suggest an alternative syntax or approach that can replace ... and make the code work?

javascriptvue.js

Answer №1

I encountered a similar issue while working on my project. When I ran npm run watch to compile my JavaScript files, I faced the following error in the terminal:

ERROR in ./react/src/common/components/RowPlaceholder.js
Module build failed: SyntaxError: Unexpected token (14:6)

  12 |       position: 'absolute',
  13 |       background: 'white',
> 14 |       ...style
     |       ^
  15 |     }}
  16 |   />
  17 | const buildStencil = stencil =>

 @ ./react/src/common/components/List.js 27:22-49

Furthermore, the browser console displayed this error message:

Uncaught Error: Cannot find module "./RowPlaceholder"
    webpackMissingModule List.js:5
    <anonymous> List.js:5
    Webpack 9

To resolve the issue, I implemented a solution suggested in various discussions on Stackoverflow:

  1. npm install babel-plugin-transform-object-rest-spread

  2. Create a .babelrc file at the project's root directory with the following content:

(I noticed an odd bug on Stackoverflow where leaving this line empty prevented proper rendering of the code block below)

{
   "plugins": [
    "babel-plugin-transform-object-rest-spread",
  ],
}

By the way, those three dots are commonly referred to as spread syntax.

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

Creating a Scroll Bar with HTML and CSS

Recently, I've been working on creating a slider using HTML and CSS, but I've encountered an issue where the second slide displays the third image. Additionally, whenever I click on the third slide, it quickly jumps to the end of the slider. Desp ...

javascripthtmlcss

What is the best way to replicate text in ReactJS?

I need some help with implementing a copy to clipboard feature in ReactJS. My goal is to have text copied to the clipboard when a user clicks on a link. My current setup involves using Chrome 52 and I am only focusing on supporting this browser at the mom ...

javascriptreactjsclipboard

What is the optimal location for storing component fetch logic?

When should I make a REST request to retrieve data for a Vue component called Page, specifically for the properties title and content? Also, where is the best place to handle this logic? Currently, I am trying to fetch the data on the component's rea ...

javascriptvue.jsvuejs2

callback triggering state change

This particular member function is responsible for populating a folder_structure object with fabricated data asynchronously: fake(folders_: number, progress_callback_: (progress_: number) => void = (progress_: number) => null): Promise<boolean ...

javascriptreactjstypescriptoop

How can a default option be shown at the top of a select dropdown list in AngularJS with dynamic content?

Objective: Arranging a default <option> to always be displayed at the top of a <select> dropdown upon opening. I am making progress towards my objective. We currently have a dropdown that dynamically populates based on selected elements, with ...

javascriptangularjsangularjs-ng-options

Firebase and React are having trouble communicating because it is unable to access the properties of 'auth'

The issue with the 'Cannot read properties of undefined (reading 'auth')' error in login.js may be related to where it is coming from. Login.js: import { useContext, useState, useEffect } from "react"; import { Link, useNavigate } f ...

javascriptreactjsfirebase

Exploring the power of React's useState and useEffect hooks with JSON data

Just starting out with React. The task I'm tackling involves fetching data from an API (provided in JSON format) and updating the setNavItems with the retrieved JSON response. However, when attempting to iterate over the results using navItems.map, n ...

javascriptreactjsuse-state

Is there a way to utilize JavaScript or jQuery to modify the background color of the `Save` and `Cancel` buttons within a SharePoint 2013 edit form?

Is there a way to modify the background color of the Save and Cancel buttons on a SharePoint 2013 edit form using JavaScript or jQuery? ...

javascriptjquerysharepointsharepoint-2013

Tips for effectively packaging the React 17 library alongside the latest JSX transformation feature as an ES Module

I am currently in the process of creating a basic library consisting of React components that I intend to publish as an ES Module package for NPM. With the utilization of React 17, I have incorporated the new JSX transform into my code. To generate the ES ...

javascriptreactjstypescriptwebpackrollup

What occurs in Node.js sockets when the FYN packet is missing?

I currently have two node.js servers set up, with one of them establishing a socket connection to the other and regularly sending data. For example: client.js: io = require('socket.io'); var socket = io.connect(IP_SERVER + ':' + PORT ...

javascriptnode.jssockets

Issue encountered: Unable to load resource - ajax file upload failed due to net::ERR_SSL_BAD_RECORD_MAC_ALERT error

I've implemented an AJAX form file upload using jQuery. After testing my code across multiple computers and browsers, I've encountered an issue on one Windows 8 machine running Chrome where the upload functionality fails with the following error ...

javascriptphpjqueryajax

Issue with AngularJS UI Router not loading the inline template and controller

I am trying out UI Router for the first time in my AngularJS project. I am facing an issue where, when I click on a link to view a post, it doesn't display. The post template is not visible and I remain on the home page. The URL flashes as http://loc ...

javascriptangularjsroutesangular-ui-router

Leveraging External Scripts with Vue.js and Laravel: A Comprehensive Guide

I am new to using vue js and laravel mix, and I am facing some confusion. Previously, I manually loaded scripts without compiling them. However, now that I want to integrate vue js into my project, adding the app.js script at the end of my blade template c ...

laravelvue.jsmaterialize

Utilize middleware in a separate controller file to handle specific tasks within an Express application

Currently, I have implemented a code snippet that utilizes the express-fileupload middleware for file uploads: const fileUpload = require('express-fileupload'); app.use(fileUpload({useTempFiles: true})); app.post('/upload', (req, re ...

javascriptnode.jsexpress

Parcel React component library throws an error stating that "require is not defined

Error message: Uncaught ReferenceError: require is not defined at index.js?5WdmUIncGTkIrWhONvlEDQ:1:1 (anonymous) @ index.js?5WdmUIncGTkIrWhONvlEDQ:1 First lines of index.js: require("./index.css"); var $cI6W1$lodash = require("lodash&q ...

javascriptparceljs

Is it possible to utilize a Directive for nesting content within an ng-template in Angular?

I'm working on a project where I need to dynamically nest my code into the ng-template using a Directive. Is there a method to accomplish this in Angular? Here's an example of the code I have: <button> Click Me </button> If I use a ...

javascriptangulartypescript

Refreshing an iFrame in NextJS from a different component

I am working on a NextJS application that includes a specific page structure: Page: import Layout from "@/components/app/Layout"; import Sidebar from "@/components/app/Sidebar"; export default function SiteIndex() { return ( < ...

javascriptreactjsnext.js

Tips for utilizing multiple triggers with multiple calls in the "jquery-mentions-input" plugin

I recently discovered a fantastic plugin called that I'm using for my textarea. Currently, I have set the "@" trigger to pull from a list of members, but I am curious if there is a way to implement a "#" trigger on the same form to fetch tags from a ...

javascriptjquerypluginsinputtags

Tips for creating a toggle menu using JavaScript

I am trying to create a toggle menu using CSS and JavaScript, but I have encountered an issue where clicking on the bars displays the navbar, but then the bars disappear and there is no option to close the navbar. <a href="#" class="fas ...

javascripthtmlcss

What is the significance of including the Angular component selector in HTML?

I'm brand new to Angular and html/html5, so please bear with me if my questions seem basic. I've included a screenshot below: https://i.sstatic.net/UXobT.png Here are the questions on my mind: Q1- The component selector name paproductform is n ...

javascripthtmlangular