React Carbon Components <CodeSnippet> Errors Out on Vite Production Build Only But Works on Dev

[mplatt212]

Describe the bug

I am part of a team that has started work on a preexisting React/Vite project that uses Carbon Components. All is well until Docker serves Nginx with a production build and the component produces the following error:

This is even while just trying to render a simple string:

The strange thing is that this only seems to affect the component and none of the other Carbon Components I have on the page. I've made a simple reproduction in StackBlitz as closely as I could without running it through Docker and Nginx. Running a Vite Build and then Vite Preview sometimes it seems to work but other times is doesn't render to the screen at all but without any errors.

vite.config.ts

package.json

Reproduction

https://stackblitz.com/edit/vitejs-vite-cygruj?file=package.json,vite.config.ts,src%2Fmain.tsx,index.html,src%2FApp.tsx&terminal=dev

Steps to reproduce

vite build
vite preview

System Info

Windows 10

Used Package Manager

yarn

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[haoqunjiang]

Root cause:
<CodeSnippet> uses use-resize-observer/polyfilled (version 6) which depends on resize-observer-polyfill: https://unpkg.com/browse/[email protected]/polyfilled.js
which returns the global ResizeObserver constructor when it's available: https://github.com/que-etc/resize-observer-polyfill/blob/4a148452494a155656e4d04b9732b5914896b2e0/src/index.js#L4
As it's a UMD module, it's transformed by @rollup/plugin-commonjs on building, which would add a getAugmentedNamespace() wrapper (https://github.com/rollup/plugins/blob/master/packages/commonjs/src/helpers.js#L37), which doesn't handle the new case.

Could be easily fixed in Rollup.

[haoqunjiang]

Fixed in @rollup/plugin-commonjs v23.0.3, which is included in vite v4.0.0-alpha.6.

[vctqs1]

Fixed in @rollup/plugin-commonjs v23.0.3, which is included in vite v4.0.0-alpha.6.

i'm using vite@v3, do we have an update in v3?

[haoqunjiang]

Vite 4 contains very few breaking changes, so I recommend upgrading to it if possible.

If not, you can open a PR in the Vite repository to backport the dependency upgrade to the v3 branch.