Carbon Design System sandboxes do not work

[tay1orjones]

🐛 bug report

Preflight Checklist

• [x] I have read the Contributing Guidelines for this project.
• [x] I agree to follow the Code of Conduct that this project adheres to.
• [x] I have searched the issue tracker for an issue that matches the one I want to file, without success.

Description of the problem

Sandboxes using @carbon/react error out or do not get past "transpiling modules".

How has this issue affected you? What are you trying to accomplish?

We ask that all bug reports submitted to Carbon have a codesandbox reproduction of the issue. We additionally use codesandbox a ton for examples and help/support. It's put a strain on our team trying to field support requests recently.

To Reproduce

We've had a hard time nailing down why this is happening. Unclear what from our package might be causing it. The sandboxes simply do not finish transpiling:

https://codesandbox.io/s/flamboyant-phoebe-oezq0f?file=/index.js

Additionally the example/template hosted in our repo gives an error:

Could not fetch dependencies, please try again in a couple seconds: Cannot read properties of null (reading 'match')

https://codesandbox.io/s/github/carbon-design-system/carbon/tree/main/examples/codesandbox

It might be related to https://github.com/codesandbox/codesandbox-client/issues/6443#issuecomment-1115103020 or https://github.com/codesandbox/codesandbox-client/issues/6607#issuecomment-1098993096, but am unsure.

Your Environment

Software	Name/Version
Сodesandbox	060861cf8
Browser	Chrome
Operating System	MacOS 12.3.1

[JamesACS]

Hey @tay1orjones - Sorry for the delay. The Sandboxes are fixed now

[tay1orjones]

@JamesACS Thanks! I see they're now working. Would you happen to have any suggestions on how we could cut transpile/compile time down? Or how to debug what part of our setup is causing the super long set up and compile time?

I'm assuming it's related to sass compilation, but am unsure. We've found that using our vite example project inside Stackblitz is significantly faster.

[JamesACS]

Thanks @tay1orjones - I'm afraid it will likely just be a consequence of the resources that the Sandbox has on hand to load your project

[tay1orjones]

I understand, thanks @JamesACS

I'm seeing the original error again on this codesandbox: https://codesandbox.io/s/github/carbon-design-system/carbon/tree/main/examples/codesandbox

[lee-chase]

@tay1orjones is this the error you've been getting? I get this any time I import a Carbon SCSS which results in a further import from node_modules, in this case @use '@carbon/layout'; found in _reset.scss.

https://codesandbox.io/s/nervous-glitter-5wogw6?file=/src/styles.scss

[tay1orjones]

@lee-chase No

We've moved on to primarily using StackBlitz due to this issue. Here's the Vite-based template we're using - sass compilation is significantly faster than CodeSandbox as well.

[marcellobarile]

Omg it has been such a struggle finding a working playground for @carbon/react ! This should be better documented.