Unable to bundle @codesandbox/sandpack-react with Astro for production

[phelipetls]

What version of astro are you using?

1.7.2

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

Linux

Describe the Bug

Running npm run build always fail when using @codesandbox/sandpack-react with the following error:

import { getSandpackCssText, SandpackProvider, SandpackThemeProvider, useSandpack, useSandpackTheme, useSandpackNavigation, SandpackCodeEditor, SandpackPreview } from '@codesandbox/sandpack-react';
                                                                                                                            ^^^^^^^^^^^^^^^^^^
SyntaxError: Named export 'SandpackCodeEditor' not found. The requested module '@codesandbox/sandpack-react' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@codesandbox/sandpack-react';
const { getSandpackCssText, SandpackProvider, SandpackThemeProvider, useSandpack, useSandpackTheme, useSandpackNavigation, SandpackCodeEditor, SandpackPreview } = pkg;

Minimal repo to reproduce the issue here.

I thought this was an issue with how @codesandbox/sandpack-react was packaged, as suggested by publint, but ultimately found that not to be the case because I'm able to build with plain Vite: here's a minimal repro.

Link to Minimal Reproducible Example

https://github.com/phelipetls/sandpack-astro/

Participation

• I am willing to submit a pull request for this issue.

[bluwy]

I thought this was an issue with how @codesandbox/sandpack-react was packaged, as suggested by publint, but ultimately found that not to be the case because I'm able to build with plain Vite: here's a minimal repro.

The Vite example is different as Vite understands pkg.module and uses it when bundling. For Astro's case, we bundle but externalizes @codesandbox/sandpack-react so that it runs in Node. When we execute the bundle (which runs in Node), Node doesn't understand pkg.module and loads pkg.main instead, which is CJS and leads to the import pkg from '@codesandbox/sandpack-react'; suggestion/error. This also means the package doesn't work in Vite SSR in general.

Closing as it's a packaging issue with @codesandbox/sandpack-react. It should have an exports field if it's meant to work in SSR.