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

Tips for implementing $routeProvider's resolve function in electron-angular-boilerplate

I am encountering an issue with loading JSON data before entering the main controller in my project. Using this project as a template, I made alterations to only dist/app/home/home.js where the changes were implemented: angular.module('WellJournal&a ...

javascriptangularjsresolve

Tips for getting a plugin to function properly when the page is refreshed in Nuxt app

I am currently incorporating the vue GAPI plugin into my project. While it functions smoothly when navigating between pages, I encounter an error upon refreshing: vue-gapi.common.js?15fd:241 Uncaught (in promise) Error: gapi not initialized at GoogleAuth ...

javascriptvue.jsvuejs2nuxt.js

Effective Pagination in Rails 5: Retrieving Total Entries with will_paginate and Active Model Serializers

I have implemented pagination using will_paginate and api-pagination for managing data, along with active_model_serializers to serialize the JSON. My goal is to send the total number of entries of the resource to the client side where AngularJS is being ut ...

ruby-on-railsangularjsruby-on-rails-5will-paginate

What could be the reason for not seeing any console.log output while executing findOne using Mongoose?

My goal is to query my MongoDB database using Mongoose. I am searching for the string 13 in the field eClassSegment within the collection eclasses. When I run the code, something gets printed in the console. Why is that? Here is the code I am using: var ...

javascriptnode.jsmongodbmongoose

Find out if all attributes of the object are identical

I am trying to create the boolean variable hasMultipleCoverageLines in order to determine whether there are multiple unique values for coverageLineName within the coverageLines items. Is there a more efficient way to write this logic without explicitly c ...

javascripttypescript

Vue 3 required but not found as a peer dependency

Every time I execute npm list -g --depth=0 command in cmd, npm throws this error. +-- @vue/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="086b6461483c263d263e">[email protected]</a> +-- <a href="/cdn-cgi/l/emai ...

vue.jsnpmdependenciesvuejs3

How can I duplicate an array of objects in javascript?

I'm struggling with a javascript issue that may be due to my lack of experience in the language, but I haven't been able to find a solution yet. The problem is that I need to create a copy array of an array of objects, modify the data in the cop ...

javascriptarraysobjectjavascript-objectsarrayobject

ng-repeat dysregulating the binding of directive models

<input-directive model="config.shared.product.whatevers[0]"></input-directive> <!-- This code is functioning correctly, however the following does not bind properly --> <td ng-repeat="whatever in config.shared.product.whatevers trac ...

javascriptangularjs

Filtering nested arrays in Javascript involves iterating through each nested

I have a nested array inside an array of objects in my Angular app that I'm attempting to filter. Here is a snippet of the component code: var teams = [ { name: 'Team1', members: [{ name: 'm1' }, { name: 'm2' }, { name ...

javascriptangulartypescript

Adding an additional stroke to a Material-UI Circular Progress component involves customizing the styling properties

I am attempting to create a circular progress bar with a determinate value using Material-UI, similar to the example shown in this circular progress image. However, the following code does not display the additional circle as the background: <CircularP ...

javascriptcssreactjsmaterial-ui

Issue with AngularJS pagination: unable to detect the current page number

I am currently developing a compact application that showcases a JSON object of "users" in an HTML5 table. The application is built using Bootstrap 3 and AngularJS, and I have the intention to implement pagination for this table. Instead of having an arra ...

javascripthtmlangularjsjson

Tips for maintaining an active class on parent nav items in NextJS when navigating dynamic routes

In my nextjs-application, I've implemented a Navbar showcasing several navitems: Navbar.tsx: const Navbar = ({ navitems }) => { return ( <div> {navitems?.map((navitem, idx) => ( <NavItem key={idx} navitem={nav ...

javascriptreactjsnext.js

Utilizing Typescript to implement an interface's properties

After declaring an interface as shown below interface Base { required: string; } I proceeded to implement the interface in a class like this class MyClass implements Base{ method(): void { console.log(this.required); } } However, I ...

javascriptjqueryangularjsangulartypescript

Guide on executing a jar file using JavaScript and obtaining a JSON output

Is there a way to execute and capture the output of a jar file that returns a json using javascript? ...

javascriptjsonjar

In JavaScript, split each element in an array into individual elements

Is there a way to split elements separated by commas into an array in JavaScript? ["el1,el2", "el3"] => ["el1", "el2", "el3"] I am looking for a solution to achieve this. Can you help me with that? ...

javascriptarrays

Transferring session data through AJAX in PHP

I'm currently developing an app using PhoneGap. However, PhoneGap only supports HTML, CSS, and JS, not PHP. This led me to the workaround of placing the PHP file on a remote server and using AJAX to call it via the server's URL. My issue now is ...

javascriptphpjqueryajaxcordova

What is the process for switching directories and renaming a file when uploading in nodeJs?

I am currently using multer and fs to handle the upload of an image file. How can I modify the directory where uploaded files are stored? Currently, all files are saved in my "routes" folder instead of the "uploads" folder created by multer. Additionally, ...

javascripthtmlnode.jsexpressmulter

Tips for transforming a nested object into an array using JavaScript

I have a complex array containing multiple objects, each with two or more sub-objects. I am looking to consolidate all sub-objects into a single array of data using JavaScript. How can I achieve this? var array1 = [ { "dfgasg24":{ name:"a", ...

javascriptjqueryarrayslodash

What is the best method for checking if a template has successfully rendered in an Iron:Router route during a mocha test?

I am working on testing if a specific template has rendered in my meteor app for a particular route. My current setup involves iron:router, practicalmeteor:mocha, and I'm using Blaze for rendering. There are a couple of challenges that I am facing: ...

javascriptmeteormocha.jsiron-routermeteor-blaze

The Iframe is preventing the mousemove event from taking place

After attaching an event to the body, a transparent iframe mysteriously appeared in the background of the popup. I am attempting to trigger a mousemove event on the body in order for the popup to disappear immediately when the mouse moves over the iframe ...

javascripthtmlcss