React-scripts 4.0.3 / react-scripts 5 compatibility


#1

Hello, we are currently using dhtmlxGantt v.7.0.4 Professional which we had purchased in 2019. We are consuming this package in our react 17.0.2 app, which is currently using react-script 3.4.3. Due to some critical security vulnerabilities in transitive dependencies of react-scripts, we are looking to migrate from 3.4.3 -> 4.0.3, then finally to 5.0.0.

I have my entire application working as expected under react-scripts 4.0.3 at this point. Unfortunately I was only able to do this by removing the imports of
import { gantt } from './dhtmlxgantt/dhtmlxgantt';
from the project.

I have also confirmed that reverting back to react-scripts 3.4.3 removes the issue we are seeing.

When we perform the upgrade of react-scripts then run the application locally we see the following errors in the browser console:

Uncaught ReferenceError: process is not defined

dhtmlxgantt.js:8398 Uncaught TypeError: Cannot read properties of undefined (reading 'signature')

Uncaught TypeError: Cannot read properties of undefined (reading 'signature')
    at module.exports (dhtmlxgantt.js:8398:1)
    at module.exports (dhtmlxgantt.js:48651:1)
    at GanttFactory.module.exports [as _factoryMethod] (dhtmlxgantt.js:48815:1)
    at GanttFactory.getGanttInstance (dhtmlxgantt.js:48537:1)
    at Object../sources/dhtmlxgantt.enterprise.ts (dhtmlxgantt.js:40562:1)
    at __webpack_require__ (dhtmlxgantt.js:39:1)
    at dhtmlxgantt.js:132:1
    at dhtmlxgantt.js:136:1
    at webpackUniversalModuleDefinition (dhtmlxgantt.js:13:1)
    at Object.<anonymous> (dhtmlxgantt.js:19:1)
    at Object../src/Pages/CaseManagement/CaseRow/dhtmlxgantt/dhtmlxgantt.js (dhtmlxgantt.js:53026:1)
    at __webpack_require__ (bootstrap:851:1)
    at fn (bootstrap:150:1)
    at Module.<anonymous> (dhtmlxgantt.js:53026:1)
    at Module../src/Pages/CaseManagement/CaseRow/index.tsx (index.tsx:197:1)
    at __webpack_require__ (bootstrap:851:1)
    at fn (bootstrap:150:1)
    at Module.<anonymous> (index.tsx:197:1)
    at Module../src/Pages/CaseManagement/index.tsx (index.tsx:47:1)
    at __webpack_require__ (bootstrap:851:1)
at fn (bootstrap:150:1)
at Module.<anonymous> (index.tsx:20:1)
at Module../src/Pages/index.tsx (index.tsx:20:1)
at __webpack_require__ (bootstrap:851:1)
at fn (bootstrap:150:1)
at Module.<anonymous> (antd.css:7:1)
at Module../src/App.tsx (App.tsx:72:1)
at __webpack_require__ (bootstrap:851:1)
at fn (bootstrap:150:1)
at Module.<anonymous> (configureStore.ts:92:1)
at Module../src/index.tsx (index.tsx:48:1)
at __webpack_require__ (bootstrap:851:1)
at fn (bootstrap:150:1)
at Object.1 (wdyr.ts:14:1)
at __webpack_require__ (bootstrap:851:1)
at checkDeferredModules (bootstrap:45:1)
at Array.webpackJsonpCallback [as push] (bootstrap:32:1)
at main.chunk.js:1:85

Is there some way to fix this? Do we need a newer version of dhtmlxgantt that will support the upgrade?


#2

Hello Kyle,
I tried creating a new React application according to our guide:
https://dhtmlx.com/blog/create-react-gantt-chart-component-dhtmlxgantt/
And I added react-scripts there:

npm install --save react-scripts@latest

After that, I don’t see any issues with the 7.0.2 and 7.1.8 versions:
Here are the demos:
https://files.dhtmlx.com/30d/9567edcecedffa5f6aad1fcd76228f4a/react5-with-gantt_7.1.8_GPL.zip
https://files.dhtmlx.com/30d/657fb3df6a64d4f04bb0825a20288f41/react5-with-gantt_7.1.8_Trial.zip
https://files.dhtmlx.com/30d/cc85046108a766c0fb45d175b7e99cba/react5-with-gantt_7.0.2_Trial.zip

Probably the issue occurs because of the configuration of the React application, but it is hard to suggest what might be wrong.

Please, send me a test demo with all the necessary files to reproduce the issue locally.