Potentially unhandled rejection [3] TypeError: Cannot read properties of undefined (reading 'prototype')

Question

Recently, in my React application, I updated the following dependencies:

• jquery-ui from version 1.12.1 to version 1.13.2,
• and gridstack from version 0.4.0 to version 7.1.1.

In my local environment the application works fine. However, now the application has stopped working in the production environment, and in the browser we can see the following error:

Potentially unhandled rejection [3] TypeError: Cannot read properties of undefined (reading 'prototype')
at eval (https://myapp.com/bundles/app-loader.js:3:12720232)
at Function.eval (https://myapp.com/bundles/app-loader.js:3:12729741)
at execute (https://myapp.com/steal-with-promises.production.js:12:53460)
at h (https://myapp.com/steal-with-promises.production.js:12:43416)
at h (https://myapp.com/steal-with-promises.production.js:12:43378)
at h (https://myapp.com/steal-with-promises.production.js:12:43378)
at h (https://myapp.com/steal-with-promises.production.js:12:43378)
at h (https://myapp.com/steal-with-promises.production.js:12:43378)
at h (https://myapp.com/steal-with-promises.production.js:12:43378)
at h (https://myapp.com/steal-with-promises.production.js:12:43378)

But this error doesn't tell me anything concrete that lets me know where the problem is. Does anyone have any idea what it could be?

Other information that may be of interest:

• I'm also using these dependencies (I know these versions must be updated. This is a work in progress):

jquery: "3.5.1", react: "17.0.1", steal: "^2.2.4",

• the app-loader.js code is something like this:

import $ from 'jquery';
import {init} from 'myReactApp/appManager';

//!steal-remove-start
// import debug from "can-debug";
// debug();
//!steal-remove-end

const AppLoader = {
  applicationRenderer: stache(`<my-app />`),
  loadApp(param1= false, param2, param3) {
    init("#app");

    $('#app').html(AppLoader.applicationRenderer({param1, param2, param3}));
  }
};

export default AppLoader;

Any idea about the problem or the solution?

Again... The app was working fine before this update.

And the jquery-ui and the gridstack are related. So I can't update just one of them.

Answer 1

I finally found the problem. First of all, to help figure out the source of the problem, I changed my StealJS settings by setting the properties "doSourceMaps" and "minify" with the value "false". So in the browser I could clearly see where the problem was.

And the problem were in the Gridstack plugin. For some reason, after compiled, the plugin doesn't work for me if I do the import like this:

import {GridStack} from 'gridstack';

I changed to:

import GridStack from 'gridstack/dist/es5/gridstack-all';

And now this work fine.