[Module not found]: Compiling error when using `DDSLightboxVideoPlayerContainer`

[techtolentino]

Description

For our project, we use the DDSLightboxVideoPlayerContainer by importing it like so:

import DDSLightboxVideoPlayerContainer from '@carbon/ibmdotcom-web-components/es/components-react/lightbox-media-viewer/lightbox-video-player-container'

and we use it like so:

<DDSLightboxVideoPlayerContainer video-id={src} open={open} />

all works well when using @carbon/ibmdotcom-web-components": "^1.37.0

however, when we update to @carbon/ibmdotcom-web-components": "^2.0.0, we encounter this error:

Module not found: Can't resolve '../mixins/on'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/@carbon/ibmdotcom-web-components/lib/components-react-node/lightbox-media-viewer/lightbox-video-player-container.js
./components/LightboxMediaViewer/index.tsx
./app/(home)/HomeLeadSpace/index.tsx
 ○ Compiling /(home)/page ...
 ⨯ ./node_modules/@carbon/web-components/lib/globals/wrappers/createReactCustomElementType.js:12:0

any thoughts on what might be causing this issue?

Screenshot

Component(s) impacted

DDSLightboxVideoPlayerContainer / C4DLightboxVideoPlayerContainer

Browser

Chrome

Carbon for IBM.com version

2.0.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.

Application/website

ibm.com/quantum

Package

@carbon/ibmdotcom-web-components

CodeSandbox example

(the storybook is using 1.38)

Steps to reproduce the issue (if applicable)

No response

Release date (if applicable)

No response

Code of Conduct

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

[sban2009]

Facing similar issue for Footer component:

unhandledRejection Error: Cannot find module '/Users/spandan.banerjee/Projects/DSTM/node_modules/@carbon/ibmdotcom-web-components/lib/components-react-node/footer/footer-container'
    at createEsmNotFoundErr (node:internal/modules/cjs/loader:1171:15)
    at finalizeEsmResolution (node:internal/modules/cjs/loader:1159:15)
    at resolveExports (node:internal/modules/cjs/loader:584:14)
    at Module._findPath (node:internal/modules/cjs/loader:658:31)
    at Module._resolveFilename (node:internal/modules/cjs/loader:1120:27)
    at /Users/spandan.banerjee/Projects/DSTM/node_modules/next/dist/server/require-hook.js:55:36
    at Module._load (node:internal/modules/cjs/loader:975:27)
    at Module.require (node:internal/modules/cjs/loader:1225:19)
    at mod.require (/Users/spandan.banerjee/Projects/DSTM/node_modules/next/dist/server/require-hook.js:65:28)
    at require (node:internal/modules/helpers:177:18) {
  type: 'Error',
  code: 'MODULE_NOT_FOUND',
  path: '/Users/spandan.banerjee/Projects/DSTM/node_modules/@carbon/ibmdotcom-web-components/package.json'
}