Encountering a SyntaxError while executing babel on babel-runtime/helpers/typeof-react-element.js (what's up with _symbol."for")?

My Project Structure (src folder contains react component classes using jsx syntax):

root
- src/
- package.json
- webpack.config.js

The command I am trying to run: babel src --out-dir lib

Unfortunately, I encountered the following error:

SyntaxError: src/node_modules/babel-runtime/helpers/typeof-react-element.js: Unexpected token (5:62)
  3 | var _Symbol = require("babel-runtime/core-js/symbol")["default"];
  4 | 
> 5 | exports["default"] = typeof _Symbol === "function" && _Symbol."for" && _Symbol."for"("react.element") || 60103;
    |                                                               ^
  6 | exports.__esModule = true;

npm ERR! Darwin 15.4.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build:lib"
npm ERR! node v5.7.1
npm ERR! npm  v3.6.0
npm ERR! code ELIFECYCLE
npm ERR! <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="02766b6f6067702f776b42322c322c33">[email protected]</a> build:lib: `babel src --out-dir lib`
npm ERR! Exit status 1

These are my main babel devDependencies (excluding plugins)

"babel-cli": "^6.7.7",
"babel-core": "^6.7.7",
"babel-loader": "^6.2.4",

Could this issue be a bug in babel? Do I need a different version of node or dependency? Any advice on how to resolve this would be greatly appreciated.

javascriptnpmsyntax-errorbabeljs

Answer №1

Upon discovering a duplicate node_modules folder in my src directory, I realized that Babel had been inadvertently processing all of the contents within it. To troubleshoot, I streamlined my babel.rc configuration to include only the following...

{
    "presets": ["es2015", "react", "stage-1"]
}

Following this adjustment, everything started functioning correctly. It seems that either Babel was interacting oddly with certain elements in node_modules, or perhaps one of the numerous manually specified plugins was causing issues.

Although the error message remained cryptic, I no longer attribute any blame to Babel for the problem.

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

Receiving a null result when parsing a JSON file from a URL in JavaScript

My data loading query loads JSON data without any issues, as shown in this snippet: $(document).ready(function () { var json = [{"id":1,"first_name":"Debra","last_name":"Rodriguez","email":"[email protected]","gender":"Female","ip_address":"90. ...

javascripthtmljsonparsinghtml-table

How to add a jQuery function to a Rails 3 if statement?

I followed a Rails 3 tutorial on creating a multi-step form which you can check out here. Additionally, I incorporated Stripe payment functionality in my app using another railscast found here. Within my application, the payment form is hidden using jQuer ...

javascriptjqueryruby-on-railsruby-on-rails-3stripe-payments

The issue with Internet Explorer failing to adhere to the restrictions set on maximum width and

I'm attempting to scale my images precisely using CSS: HTML: <div id="thumbnail-container"> <img src="sample-pic.jpg"/> </div> CSS: #thumbnail-container img { max-height: 230px; max-width: 200px; } In this scenario, ...

javascripthtmlcssinternet-explorer

Why is this basic HTML code not functioning as expected?

I attempted to combine HTML and JS to change the color of a box upon clicking it, but after reviewing the code multiple times, I am unable to pinpoint the issue. <!doctype html> <html> <head> </head> <body> <d ...

javascripthtml

Easy steps to launch Excel application with an HTML button using a web browser

How can I create a button on an HTML page that will launch an Excel application when clicked by the user? <button class="btn btn-primary" onclick="window.open('excelApplication.url','_blank')">Launch Excel</button> ...

javascriptjqueryhtml

Assistance with AJAX Reload Interval (Polling) Functionality

My project involves extracting small portions of text from multiple files (often just single words) and then applying a stylized script to them. Currently, everything is functioning correctly in terms of loading and displaying the text. However, since the ...

javascriptjqueryajaxpollingajax-polling

Alter or Delete one character in the src attribute

In my iframe, there's a need to alter just one character. UPDATE: including extensive additional code, as this task is proving more challenging than anticipated. <iframe href="https://derpxample.com/"> <video id="post_html5_api" class="vjs- ...

javascriptjquery

Working with arrays of objects in D3.js using Javascript

Seeking guidance as I navigate through the world of javascript and D3.js. I have two distinct data sets (arrays of objects) that I hope to merge. My goal is to align the National Average Scores with the State Average Scores by matching the 'Answer&ap ...

javascriptarraysjoind3.jsjavascript-objects

Obtain a listing of values that appear multiple times within an array

I need a solution to find values that appear more than once in an array. The current code I have is quite complex. var arr = [1, 2, 3, 4, 2, 3]; var flag = {} var exist2arr = []; for(var i = 0; i < arr.length; i++){ for(var j = 0 ; j < arr.leng ...

javascriptarraysloops

Using Inline Styling to Showcase a Background Image in a REACTJS Component

import React from 'react'; import Slick from 'react-slick'; import style from './Slider.module.css'; import {Link} from 'react-router-dom'; const SliderTemplates = (props) => { let template = null; const ...

javascriptcssreactjs

Receiving JSON dynamically (using socket.io) may result in parsing issues

I am currently working with JSON data that is correctly formatted at 100% accuracy. My issue arises when I execute the following code successfully: var data = {"datas":[{"matts":{"active":"1","status":"off"},"config":null,"adapters":[]}}]}; console.dir( ...

javascriptjqueryjsonsocket.io

JavaScript Control for Embedding Facebook Videos (Start / Stop)

I need assistance on how to correctly utilize this API with the code provided in the following URL: https://developers.facebook.com/docs/plugins/embedded-video-player/api/#control-reference https://i.sstatic.net/jQQeN.png window.fbAsyncInit = function() ...

javascriptfacebook-graph-api

Having trouble with sending a list of items from a VueJS form

I have a VueJS application that calls a patch method to update a user's profile. For example, I am attempting to update the field cities. I created a serializer and views.py using Postman during development. I used Postman to call the patch method fo ...

javascriptformsvue.jsvuejs2django-forms

Creating a Vue 3 component and embedding it as an HTML string

Currently, I am tackling a project in vue.js (version 3) and find myself in a situation where I need to incorporate the HTML output of one component into another component's method. In my Vue project, I have developed an SVG component as shown below: ...

javascriptvue.jssvgleafletvuejs3

How can you retrieve the Adobe Marketing Cloud ID if cookies have not been set before using DTM?

Looking for a solution to capture the Adobe Marketing Cloud ID (MID) when a page loads using a Data Element or any other alternative method. The current Data Element logic works well if the Marketing Cloud cookie already exists. However, if there is no exi ...

javascriptdynamicadobeadobe-analytics

The AngularJS element fails to display on the screen

I am currently learning AngularJS and I am struggling to understand how components are linked to the view in the tutorial. I have created a component that is quite similar: angular.module('phonecatApp').component('nameList', { temp ...

javascripthtmlangularjs

Is the JQuery ajax xhr fully completed before it begins?

Having a long script that can take a few minutes to execute, I decided to create a progress bar to display the current state. However, I encountered a problem where xhr evt.loaded/evt.total (30/30) returns 1 (100%) before the long script starts executing. ...

javascriptphpjqueryajaxxmlhttprequest

Utilizing innerHTML in JavaScript along with an if/else statement for controlling a dropdown menu in Bootstrap 4

My project is almost complete, but I'm struggling to include innerHTML statements when a user fails to select an item from the two dropdown menus. While I know how to achieve this using alerts, I want the message to be displayed on the page itself if ...

javascriptjqueryhtmlbootstrap-4

Selecting items with dynamic search using select2 ajax

Having an issue with my select box listing using select2 ajax. I am able to retrieve data from the server, but it's not appearing in the select box. Any suggestions on how to troubleshoot this? HTML <input type="hidden" class="js-data-example-aja ...

javascriptjqueryajax

When using create-react-app, the value of 'process.env.NODE_ENV' can be accessed as either a string or a process object during runtime

Have you come across code that looks like this: if(process.env.NODE_ENV === 'development') { // Perform operations specific to DEVELOPMENT mode } Similarly, you might see process.env.NODE_ENV === 'production. When we run npm run ...

javascriptreactjswebpackcreate-react-app