SSR render fails with HTMLElement reference in 2.38.0+

[David-Yuen]

Package

Carbon for IBM Products

Description

During server side rendering, I am seeing this error: ReferenceError: HTMLElement is not defined, and server fails to render the page and then the browser fails to load the page.
This error is coming from /node_modules/@carbon/ibm-products/lib/components/Coachmark/Coachmark.js:232:42

npm install is fine,
npm run build is fine (reactJS application using webpack to build client node/web js files.. uses @loadable/component and @loadable/server)
npm start starts up fine.. But, when i browse to one of our pages, the page fails on server side rendering with the above error.

We were on carbon v10 and everything was fine.. we're upgrading to carbon v11, so we updated to ibm-products 2.38.0 (latest at the time) and this wasnt working.
We are only using Tearsheet from ibm-products, i'm guessing it might reference this Coachmark component or something, i'm not sure, never used it directly..
If i comment out Tearsheet component, and re-run npm run build, npm start, then the SSR renders without errors, and page loads in the browser. If i re-add the Tearsheet while running the server (in dev mode, where it auto rebuilds on client side), the Tearsheet will build and work.
But once i stop my server, and do a full build (includes server side build), starting up again and etc, it wont work..

My understanding is HTMLElement is a client side (browser) element and doesnt exist on server side, so it fails to render on server side only.

I found in the slack channel that someone had similar problem and was suggested to use 2.37.0 instead, so i switched and this works fine. So something broken in 2.38.0+

Component(s) impacted

I am only using Tearsheet from my component, but error is coming from Coachmark, i'm not sure but maybe Tearsheet references Coachmark, or the whole library broken..

Error thrown during Server side rendering:

Error: Failed to render app on server with exception HTMLElement is not defined ReferenceError: HTMLElement is not defined
    at Object.<anonymous> (/git/my-project/node_modules/@carbon/ibm-products/lib/components/Coachmark/Coachmark.js:232:42)
    at Module._compile (node:internal/modules/cjs/loader:1358:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1416:10)
    at Module.load (node:internal/modules/cjs/loader:1208:32)
    at Function.Module._load (node:internal/modules/cjs/loader:1024:12)
    at Module.require (node:internal/modules/cjs/loader:1233:19)
    at require (node:internal/modules/helpers:179:18)
    at Object.<anonymous> (/git/my-project/node_modules/@carbon/ibm-products/lib/index.js:92:17)
    at Module._compile (node:internal/modules/cjs/loader:1358:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1416:10)
    at Module.load (node:internal/modules/cjs/loader:1208:32)
    at Function.Module._load (node:internal/modules/cjs/loader:1024:12)
    at Module.require (node:internal/modules/cjs/loader:1233:19)
    at require (node:internal/modules/helpers:179:18)
    at Object.@carbon/ibm-products (/git/my-project/build/node/dashboard.js:14532:18)
    at __webpack_require__ (/git/my-project/build/node/dashboard.js:14776:41)
    at Object../src/components/Dashboard/DashboardSettings/DashboardSettings.js (/git/my-project/build/node/dashboard.js:6168:78)
    at __webpack_require__ (/git/my-project/build/node/dashboard.js:14776:41)
    at Object../src/components/Dashboard/DashboardSettings/DashboardSettingsContainer.js (/git/my-project/build/node/dashboard.js:6286:76)
    at __webpack_require__ (/git/my-project/build/node/dashboard.js:14776:41)
    at Object../src/components/Dashboard/DashboardSettings/index.js (/git/my-project/build/node/dashboard.js:6477:85)
    at __webpack_require__ (/git/my-project/build/node/dashboard.js:14776:41)
    at Object../src/components/Dashboard/Dashboard.js (/git/my-project/build/node/dashboard.js:188:76)
    at __webpack_require__ (/git/my-project/build/node/dashboard.js:14776:41)
    at Object../src/components/Dashboard/DashboardContainer.js (/git/my-project/build/node/dashboard.js:309:69)
    at __webpack_require__ (/git/my-project/build/node/dashboard.js:14776:41)
    at Object../src/components/Dashboard/index.js (/git/my-project/build/node/dashboard.js:7000:77)
    at __webpack_require__ (/git/my-project/build/node/dashboard.js:14776:41)
    at Object../src/components/Dashboard/routes.js (/git/my-project/build/node/dashboard.js:7023:59)
    at __webpack_require__ (/git/my-project/build/node/dashboard.js:14776:41)
    at /git/my-project/build/node/dashboard.js:14895:37
    at Object.<anonymous> (/git/my-project/build/node/dashboard.js:14898:12)
    at Module._compile (node:internal/modules/cjs/loader:1358:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1416:10)
    at Module.load (node:internal/modules/cjs/loader:1208:32)
    at Function.Module._load (node:internal/modules/cjs/loader:1024:12)
    at Module.require (node:internal/modules/cjs/loader:1233:19)
    at require (node:internal/modules/helpers:179:18)
    at smartRequire (/git/my-project/node_modules/@loadable/server/dist/cjs/loadable-server.cjs.js:67:22)
    at /git/my-project/node_modules/@loadable/server/dist/cjs/loadable-server.cjs.js:439:7
    at Array.forEach (<anonymous>)
    at ChunkExtractor.requireEntrypoint (/git/my-project/node_modules/@loadable/server/dist/cjs/loadable-server.cjs.js:438:36)
    at ReactExpressView._render [as engine] (webpack://my-project/./src/utils/ssr-util.js?:66:29)
    at ReactExpressView.render (webpack://my-project/./src/server/express-view.js?:16:10)
    at tryRender (/git/my-project/node_modules/express/lib/application.js:657:10)
    at Function.render (/git/my-project/node_modules/express/lib/application.js:609:3)
    at ServerResponse.render (/git/my-project/node_modules/express/lib/response.js:1048:7)
    at _renderPage (webpack://my-project/./src/utils/page-util.js?:65:7)
    at eval (webpack://my-project/./src/utils/page-util.js?:37:5)
    at processTicksAndRejections (node:internal/process/task_queues:95:5) 
    at eval (webpack://my-project/./src/utils/page-util.js?:68:14)
    at ReactExpressView._render [as engine] (webpack://my-project/./src/utils/ssr-util.js?:74:5)
    at ReactExpressView.render (webpack://my-project/./src/server/express-view.js?:16:10)
    at tryRender (/git/my-project/node_modules/express/lib/application.js:657:10)
    at Function.render (/git/my-project/node_modules/express/lib/application.js:609:3)
    at ServerResponse.render (/git/my-project/node_modules/express/lib/response.js:1048:7)
    at _renderPage (webpack://my-project/./src/utils/page-util.js?:65:7)
    at eval (webpack://my-project/./src/utils/page-util.js?:37:5)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)

Browser

Chrome

@carbon/ibm-products (previously @carbon/ibm-cloud-cognitive) version

v2.38.0

Severity

Severity 1 = The design is broken in a critical way that blocks users from completing tasks or damages the brand. Affects major functionality, no workaround.

Product/offering

IBM Cloud Data Replication

CodeSandbox or Stackblitz example

N/A: error occurs on server side rendering

Steps to reproduce the issue (if applicable)

Hard to give exact steps.. we build our application with npm run build, which builds server code, and client (reactjs) code for both node and web environments. The build and start works, but once executing server-side-rendering of our page that includes Tearsheet (from ibm-products), it fails on the HTMLElement reference. Not sure if this happens on any other components from ibm-products library..

Release date (if applicable)

No response

Code of Conduct

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