[Bug]: Error when using v10 packages with Node 18

[reshmpk1]

Package

@carbon/upgrade

Browser

Chrome

Package version

v10

React version

react-script: 4.0.3
react: 17.0.0

Description

We were using our IBM privacy portal( node 16.19.1), which is now updated to node 18.16.0. After that, our React Carbon application is not loading in our Cirrus environment. We debugged the issue, mainly carbon dependency compatibility. As you suggested, we followed all the steps, but still, we could not run our application on node 18.

Reproduction/example

https://jsw.ibm.com/browse/CPOPP-303

Steps to reproduce

Updated the node version to 18.16.0 and updated the carbon sass package dependency
removed node-sass installed sass etc. as suggested. Still, we were getting docker build failures due to the version compatibility.

even we followed these steps in my local system:
https://carbondesignsystem.com/migrating/guide/develop/
These steps were not giving the success result in my system itself. We are looking for a carbon support team to help in this area. what is the right dependency for the node 18 version?

Suggested Severity

Severity 1 = Must be fixed ASAP. The response must be swift. Someone from the team must drop all current work and be immediately reassigned to address the issue.

Application/PAL

IBM privacy portal

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[tay1orjones]

I don't have access to view the reproduction. Could you provide a small reproduction repository showing an issue with Node 18?

Also could you please share specific package and version details of what you're using so we could look into this further?

I think right now all the CI jobs for v10 test against Node 16, but this is the first I've heard that it's incompatible with Node 18. What's the specific error you're seeing?

[tay1orjones]

I'm personally not able to reproduce an issue using v10 with Node 18. Here's two examples of v10 packages working with Node 18:

• Carbon v10 w/ React v16
• Carbon v10 w/ React v17

[reshmpk1]

We are using this dependencies:
"dependencies": {
"@carbon/colors": "^10.30.0",
"@carbon/ibmdotcom-react": "^1.50.0",
"@carbon/ibmdotcom-styles": "^1.50.0",
"@carbon/ibmdotcom-web-components": "latest",
"@carbon/icons-react": "~10.22.0",
"@carbon/layout": "^10.29.0",
"@carbon/pictograms-react": "^11.15.0",
"@carbon/react": "^1.37.0",
"@carbon/type": "^10.33.0",
"@carbon/web-components": "^1.31.0",
"@ramonak/react-progress-bar": "^5.0.3",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"axios": "^0.21.3",
"carbon-components": "^10.58.10",
"carbon-components-react": "^7.59.13",
"carbon-icons": "^7.0.7",
"crypto-js": "^4.1.1",
"downshift": "^6.1.7",
"html-react-parser": "^1.2.8",
"html-to-react": "^1.5.0",
"i18next": "^20.5.0",
"i18next-browser-languagedetector": "^6.1.2",
"i18next-xhr-backend": "^3.2.2",
"node-sass": "^6.0.1",
"react": "^17.0.0",
"react-datepicker": "^4.7.0",
"react-dom": "^17.0.0",
"react-helmet": "^6.1.0",
"react-i18next": "^11.11.4",
"react-redux": "^7.2.0",
"react-router-dom": "^5.2.1",
"react-scripts": "^4.0.3",
"react-tooltip": "^4.4.3",
"redux": "^4.1.2",
"web-vitals": "^1.1.2"
}
"node": "18.17.0",
"npm": "10.1.0"

_The above code running fine locally, but in our development environment, it's failing._

Please refer to the attachments, which we were getting in the build failure. It would be great if your team could guide us and let us know the react-carbon dependency that supports the v18 node. We are stuck with this version upgrade work.
We have to move to node18 due to the CI/CD pipeline migration but the carbon package also needs to support accordingly.

[tay1orjones]

@reshmpk1 Most importantly, you'll need to remove node-sass and use sass instead. More on this here

Beyond that, @carbon/react fully replaces the need for carbon-components and carbon-components-react packages.

@kennylam could you share any info you might see on the above package list regarding the usage of the various web components and dotcom packages listed there? I think there may be some incompatibilities, but I'm not 100% sure.

[kennylam]

Nothing stands out as being problematic, especially since many of those dependencies aren't maintained by any Carbon squads. It builds locally so it seems like a config/environment issue on the remote hosts?

[reshmpk1]

https://dev-privacyportal.968d96a4.public.multi-containers.ibm.com/privacy/portal/us-en

This is working with the Node 16 version; when it moves to Version 18, we get a black page. Could you be able to suggest the required dependency version?

[tay1orjones]

@reshmpk1 Both the error messages you screenshotted above reference node-sass. node-sass is deprecated and should no longer be used. You'll need to remove node-sass from your build pipeline and dependencies and replace it with sass instead. This should resolve your issue.