Error message "Encountered an unknown type 'ForOfStatement' when attempting to execute an npm library"

Currently, I am in the process of integrating the PhotoEditor SDK library into my Ruby on Rails project. To achieve this, I have been meticulously following the installation guidelines provided in the official documentation. However, during the setup process, a particular error has surfaced in the DOM console:

"Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: /Users/robeen/dev/cocoon-immo/node_modules/photoeditorsdk/esm/chunk-2FC7YEBB.js: unknown Statement of type "ForOfStatement""

Despite diligently executing all the necessary steps outlined in the instructions, including installing the required peer dependencies such as React, React DOM, and Styled Components, I am continuing to experience the aforementioned error. Any assistance or guidance offered to help resolve this matter would be greatly appreciated. Thank you.

Development Environment :

 - Node : v14.15.5
 - Ruby : ruby 2.7.5p203 (2021-11-24 revision f69aeb8314) [arm64-darwin21]
 - Rails : Rails 6.1.7.3
 - NPM : 8.11.0
javascriptruby-on-railsnpm

Answer №1

A quick Google search for 

Unknown error message "ForOfStatement"
reveals numerous conversations related to Babel and the need to re-enable compatibility with IE11.

Consider revising your .browserlistrc configuration file to ensure it includes support for IE11.

Your updated file may resemble the following:

defaults
IE 11

Answer №2

Our recommendation at this time is to consider implementing the VanillaJS approach by utilizing scripts from a CDN or the vendor folder instead of relying on NPM packages. For example:

<!DOCTYPE html>
<html>
  <head>
    <title>IntegrateWithRails</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>

    <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0674636765724637302837352837">[email protected]</a>/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="75071014160158111a183544435b44465b44">[email protected]</a>/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2755424644530a43484a6716110916140916">[email protected]</a>/umd/react-dom-server.browser.production.min.js"></script>
    <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1665626f7a73723b75797b66797873786265562238223827">[email protected]</a>/dist/styled-components.min.js"></script>
    <script src="https://cdn.img.ly/packages/imgly/photoeditorsdk/latest/umd/no-polyfills.js"></script>
  
  </head>

  <body>
      <%= yield %>
      <div id="editor" style="width: 100vw; height: 100vh;"></div>
      <script>
        PhotoEditorSDK.PhotoEditorSDKUI.init({
          container: '#editor',
          // Please replace this with your license: https://img.ly/dashboard
          license: '',
          image:
            'https://cdn.img.ly/packages/imgly/photoeditorsdk/latest/assets/example.jpg',
          assetBaseUrl:
            'https://cdn.img.ly/packages/imgly/photoeditorsdk/latest/assets',
        });
      </script>
  </body>
</html>

Answer №3

When working with a Rails application, the javascript can be loaded using a gem such as https://github.com/rails/webpacker/

The issue at hand seems to stem from the configuration being utilized by webpacker and passed to babel.

Despite the expectation that this could have been customizable through .browserslistrc, the v6 upgrade migration guide for webpacker advises:

Transition any custom browserlist configurations from .browserslistrc (if present) to the "browserslist" key in package.json and delete .browserslistrc.

To address this, consider adjusting your package.json to include:

  "browserslist": [
    "defaults",
    "IE11"
  ]

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

No elements can be located within the iframe as per Cypress's search

I've been attempting to access elements within an iframe using the guidance provided in this article here, but I'm facing an issue where Cypress is unable to locate anything within the iframe. Below is a snippet of my test code: describe('s ...

javascriptreactjsiframecypress

Tips for effectively utilizing the Ngrx navigation function

While exploring NgRx, I stumbled upon navigation. According to the documentation, it seems like this effect should trigger when the component loads. However, I'm facing an issue where this effect is not getting triggered. Other effects that I've ...

javascriptangularngrxngrx-storengrx-effects

What is the best way to split an array into four columns and allocate 10 <li> items from the array to each column?

If I have a dynamic array with 40 elements that changes on every render, how can I loop through the array and return 4 groups of elements, each containing 10 items without any repetition? I want to style these objects in the array using a parent flex con ...

javascriptcssreactjsarrays

What is the process for integrating a gltf model into Aframe & AR.js with an alpha channel?

--Latest Update-- I've included this code and it appears to have made a difference. The glass is now clear, but still quite dark. Note: I'm new to WebAR (and coding in general).... but I've spent days researching online to solve this issue. ...

javascriptblenderaframegltfar.js

When you drag down on mobile Safari on an iPad, touch events may cease to fire in HTML5

When I implement event listeners to handle touch events like touchmove and touchstart document.addEventListener("touchstart", function(event){ event.preventDefault(); document.getElementById("fpsCounter").innerHTML = "Touch ...

javascriptipadhtmlios5webkit

The array is arranged properly, yet React is failing to render it in the correct order

Here's the code snippet I am working with: { this.state.rows.map((qc) => qc.BinsByDayByOrchardsQCs.map((qc2) => qc2.BinsByDayByOrchardsQCsDefects.map((qc3) => !defectsArray.includes(qc3.Defect) &am ...

javascriptarraysreactjssorting

Ways to navigate a div within an iframe that has been loaded

As I load a page(A) inside an iframe, the HTML structure of the embedded content is as follows: <html><body> <div id="div1"></div> <div id="div2"><button>Hello</button></div> </body></html> The ...

javascriptjqueryhtmlcssiframe

Guide on plotting latitude and longitude coordinates on Google Maps with Vue.js through JSON data fetched via AJAX

I have implemented a Vue.js script to fetch JSON data through an AJAX request. However, I am encountering issues with the code. <script> new Vue({ el: '#feed' , data: { details: [], }, mounted() { this.$nextTick(fu ...

javascriptjqueryvue.jsvue-componentvue-resource

python using selenium to bypass javascript popups

I have a project where I need to visit a specific website and interact with it using the Python selenium module. However, I am encountering a popup (a cookie acceptance form) when trying to access the site with a bot. I must accept this popup in order to p ...

javascriptpythonseleniumpopup

Tips for creating a responsive image using Material-UI

I’m facing some challenges in making my page responsive. Specifically, I'm having trouble ensuring that an image remains within the grid container in material UI. Is there a method for making images responsive in this context? Even when I try adding ...

javascriptreactjsimagematerial-uiresponsive

When using nextjs, there is an issue that arises when attempting to define the property 'id' using context.params.id. This results in

Attempting to retrieve data from a JSON file (response.json) hosted on localhost:8000/response.json. Below is the code snippet from pages/test.js: import React from "react"; import Link from "next/link"; import Image from "next/ima ...

javascripthtmljsonreactjsnext.js

What is the best approach to concurrently update a single array from multiple functions?

In my React app, I have a form with various input fields and checkboxes. Before making an API call to submit the data, I have functions set up to check if any fields are left blank or unchecked. These check functions are triggered when the form button is ...

javascriptreactjsarrays

Is there a way to access and troubleshoot the complete source code within .vue files?

I've been struggling for hours trying to understand why I'm unable to view the full source of my .vue files in the Chrome debugger. When I click on webpack://, I can see the files listed there like they are in my project tree, but when I try to o ...

javascripttypescriptvue.jswebpack

Establishing an efficient development environment with continuous integration for react-native using typescript and nodejs

Unfortunately, we encounter the challenge of working with different nodejs versions in our projects. I am unsure if this is similar to Java where multiple jdks can be installed (multiple nodejs installations), and each project automatically utilizes the co ...

node.jstypescriptreact-nativenpmexpo

I am looking to update the background color of the material UI helper text

In the image below, you can see that my background color is gray and my text field color is white. When an error is shown, the text field's white color extends and the password error message doesn't look good. I want the text field to remain whit ...

javascriptreactjsmaterial-ui

What's the best way to use the like query in Mongoose?

Struggling with applying a Like query using Mongoose in the MEAN stack. Despite trying various solutions found online, nothing seems to work for me. Here is the model schema: const mongoose = require('mongoose'); const ItemTransactionSchema = ...

javascriptnode.jsmongodbexpressmongoose

Executing a function in the view/template with Angular 2+

Whenever a function is called in the view of an Angular component, it seems to be executed repeatedly. A typical example of this scenario can be seen below: nightclub.component.ts import { Component } from '@angular/core'; @Component({ selec ...

javascriptangulartypescriptangular-components

Exploring Angular 2 Application Testing: Tips for Interacting with HTML Elements

In my Angular 2 Frontend testing journey, I came across a blog post ( ) where the author utilized ng-test TestBed for core testing in Angular. While the example provided was helpful for basic understanding, it lacked details on how to manipulate Elements. ...

javascriptangularkarma-jasmine

Executing script once the DOM has completed loading

In my project, I'm dynamically generating menu items for a menu bar based on headers from external files that are imported using an XMLHttpRequest(). The menu bar is then updated as I navigate through different pages. Everything works smoothly. Each ...

javascripthtml

Choose a specific 24-hour range with the Date Interval Selector

I am currently utilizing the Date Range Picker plugin for bootstrap from the website http://www.daterangepicker.com/#examples, and I have a requirement to set the maximum date time range to be within 24 hours. Below is an example demonstrating how I can s ...

javascriptjquerybootstrap-daterangepicker