"Webpack error: Including a comma within a string leads to a syntax problem when bund

I'm attempting to merge this file into my main JS.

var constants = {
    height: 600,
    width: 400,
    default_bezier = "[ { \"startPoint\" : [51.6503017608354,203.464445873753], \"endPoint\" : [-52.41285540263849,202.37245643258615], \"startControlPoint\": [-9.043960791649624,202.53176818590896], \"endControlPoint\" : [-57.822702172883595,218.9418611624324] }, { \"startPoint\" : [-52.41285540263849,202.37245643258615], \"endPoint\" : [-5.570997193470086,172.0221729966046], \"startControlPoint\": [-47.00300863239339,185.8030517027399], \"endControlPoint\" : [-23.03585320491517,179.86237947171952] }, { \"startP...
}

export {constants};

However, I encounter a syntax error stating an unexpected token and pointing at the comma:

ERROR in ./app/public/wp-content/themes/rise-child/js/maker-two/constants.js
Module build failed: SyntaxError: C:\Users\tinti\Local Sites\sextoys\app\public\wp-content\themes\rise-child\js\maker-two\constants.js:
expected token (5:16)

  3 |   height: 600,
  4 |   width: 400,
> 5 |   default_bezier = "[ { 'startPoint' : [51.6503017608354,203.464445873753], 'endPoint' : [-52.41285540263849,202.37245643258615], 'star
ntrolPoint': [-9.043960791649624,202.53176818590896], 'endControlPoint' : [-57.822702172883595,218.9418611624324] }, { 'startPoint' : [-52.41
540263849,202.37245643258615], 'endPoint' : [-5.570997193470086,172.0221729966046], 'startControlPoint': [-47.00300863239339,185.803051702739
 'endControlPoint' : [-23.03585320491517,179.86237947171952] }, { 'startPoint' : [-5.570997193470086,172.0221729966046], 'endPoint' : [9.3243
34959688,9.376975066207507], 'startControlPoint': [10.884005326634842,164.63530320382674], 'endControlPoint' : [-4.968072864533834,110.626186
28577] }, { 'startPoint' : [9.324396434959688,9.376975066207507], 'endPoint' : [5.6297169670964,-110.17611809084356], 'startControlPoint': [2
53152351097606,-88.58724679549941], 'endControlPoint' : [-7.361202275296376,-53.760928830398264] }, { 'startPoint' : [5.6297169670964,-110.17
809084356], 'endPoint' : [53.717335525525975,-176.2424857013046], 'startControlPoint': [14.357981611994795,-148.08003333114038], 'endControlP
t' : [28.00328937556781,-176.2424857013046] } ]"
    |                  ^
  6 | }

Why am I not able to use a comma in a string?

javascriptnpmwebpackbundlees6-modules

Answer №1

Almost there, but the arrow is actually indicating the start of that line (even though it may not be very clear).

default_bezier = "[ { \"startPoint\" : [51...
               ^

Instead of =, it should be a :, just like in the lines above.

Even though it can be hard to spot, you can verify this using the information given by the error message, specifically 

expected token (5:16)

where 5 represents the line number (which is the line with default_bezier = ... in this case), and 16 represents the column (character) number. If you count 17 characters from the beginning of that line (16 + 1 because 0 is the first column), you'll see the = at that position :)

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

Modifying CSS styles in JavaScript based on the user's browser restrictions

My CSS style looks like this: button.gradient { background: -moz-linear-gradient(top, #00ff00 0%, #009900 50%, #00dd00); background: -webkit-gradient(linear, left top, left bottom, from(#00ff00), color-stop(0.50, #009900), to(#00dd00) ...

javascripthtmlcss

Warning: When VueJs OnMount props is utilized, it might display a message stating, "Expected Object, received Undefined."

This is my current component setup: <template> <Grid :items="items" /> </template> <script setup> import { ref, onMounted } from 'vue' import Grid from '@/components/Grid.vue' import { getData ...

javascriptvue.js

Hide all elements in jQuery that do not have a class assigned

I've implemented a straightforward jQuery script that toggles the "active" class on an li element when it is clicked: $('li').click(function() { $(this).toggleClass('active'); }); My goal is to hide all other li elements in t ...

javascriptjquerycssif-statement

Web Browser cross-origin AJAX requests

Recently, I developed an Internet Explorer extension that injects a script every time a page is accessed. The purpose of this script is to send an AJAX request to my localhost. However, I have encountered a roadblock where the request only works if it&apos ...

javascriptjqueryajaxinternet-explorerxmlhttprequest

Developing applications using ReactJS with Typescript can sometimes lead to errors, such as the "onclick does not exist on type x

In the code snippet below, I have a method that renders a delete icon and is used in my main container. Everything functions correctly except for a small cosmetic issue related to the type any that I am struggling to identify. import React from 'reac ...

javascriptreactjstypescriptonclick

Finding repeating elements in an array of objects

Is there a way to identify duplicates in an array based on type, name, and size, increment the amount, and then remove the duplicate entries? [ { "name": "Pizza with pepper", "imageUrl": "...", ...

javascriptarraysjson

Express JS backend causing CSS file to fail to load in React project

After doing some research on Stack Overflow, I came across a few solutions but none of them seemed to work for my specific situation. I am currently attempting to serve my React website from an Express backend server. Here is the layout of my folders: cli ...

javascriptcssnode.jsexpress

What could be the reason for this simple sails socket not functioning properly?

Just curious why the simple web socket code below isn't functioning? io.socket.on('user', function(event){ console.log("RECEIVED EVENT:",event); }) I have included sails.io.js in my index file and the above code is located in a test.js ...

javascriptsocketssails.js

Numerous traditional commits of the `feat` type have been recorded on a single feature

I've recently joined a repository that leverages semantic-release for automating version updates of the NPM package. The repository follows the guidelines set by the Conventional Commits specification, however, the README is quite limited. If I creat ...

gitnpmsemantic-releaseconventional-commits

What is the best way to focus on a specific section of a CSS class name?

Successfully Working Example: HTML: <div class="items"> <div class="item">item 1</div> <div class="prefix-item-suffix">item 2</div> <div class="item">item 3</div> < ...

javascriptjquerycss

Masking input text to allow numbers only using either javascript or jquery

I have experience with javascript and jquery. My goal is to create a masking template for <input type="text"> This template should only accept numbers and automatically format the input with dashes after every two numbers typed. The desi ...

javascriptjqueryajaxinputnumbers

Trouble arises when trying to deploy React application on Github pages

After running npm run deploy and following all the steps, it shows that the project is published successfully. However, upon checking the Github hosted link, only my navbar component is visible. Despite setting up the routes correctly in app.js to display ...

javascriptreactjs

What could be causing the error "Cannot GET /route" in my React app when the user switches browsers?

My React application utilizes React-Router alongside Express. I recently implemented a new route that allows users to auto-login by providing an encrypted private key via a link in their email inbox. Below is the specific route: <PublicRoute path="/lo ...

node.jsreactjsexpressnpmreact-router

What is the method for retrieving all elements, regardless of duplicative data?

I need assistance with a project in which I am attempting to extract brand names and prices from a website. Below is the code I am currently using: List<WebElement> list_of_products = driver.findElements(By.xpath(loc.getProperty("brandName" ...

javascriptjavaseleniumhashmapmapping

Guide to removing a Firebase Storage directory using a Firebase Cloud Function?

I'm having trouble finding the deleteFiles() method and the DeleteFilesOptions argument in the Firebase API reference. My IDE is indicating that this method requires an optional argument, but I can't seem to locate any information on this type. I ...

javascriptnode.jsfirebasegoogle-cloud-functionsfirebase-storage

Discovering the Realm Object Server version that has been installed using NPM

Is there an alternative method or command line to determine the version of the installed Realm Object Server besides using Realm Studio? I have root access and am working with a web app in Node.js v6.14.3 and NPM v3.10.10. Thank you. ...

node.jsnpmrealm

The scripts are mistakenly interpreted as stylesheets, but are actually being transferred with the MIME type text/html

Encountering two console warnings while using Chrome: Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://domain/". domain/:11 Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://domain/". ...

javascriptphphtml.htaccessmime-types

The HTTP server is operating in the background

After successfully installing npm http-server, I am pleased with how well it shares my directory with other local PCs. However, I am now faced with the challenge of running it in the background. Despite attempts to do so using commands like http-server . ...

node.jsnpmcmdserverhttpserver

Unraveling functions from a JavaScript promise in a web application using ExpressJS and NeDB

I have successfully implemented code that retrieves all users from my neDB-promisses: const fetchAllUsers = (res) => { db.find({}) .sort({ name: 1 }) .exec() .then( (content) => { res.status(2 ...

javascriptexpresspromisenedb

In Angular, when a component is clicked, it is selecting entire arrays instead of just a single item at a

I am currently working on implementing a rating feature using Angular. This component will be used to rate different languages based on how proficient I am with them. My issue lies in the fact that when I click on one array element, it automatically selec ...

javascripthtmlcssangulartypescript