TranspiledModule error: module hasn't been transpiled yet

[andyjakubowski]

Bug report

Packages affected

• [✔] sandpack-client
• [✔] sandpack-react

Description

A /some/module/path: hasn't been transpiled yet. error gets displayed in SandpackPreview’s ErrorOverlay under certain conditions.

🚨 Severity

This seems to prevent Sandpack from working correctly in Safari.

I’d love to get some guidance on how to arrange the files, import statements, or how to halt the execution of the bundled modules until everything is transpiled.

What were you doing when the problem occurred?

I added a large number of files, and a few library dependencies, and then imported them inside the files. After working in Firefox 100 and Chrome 100 for a while, I noticed the error in macOS Safari 15.4 and iOS Safari 15.4.1.

What steps can we take to reproduce the problem?

Quick reproduction

• Open this page in Safari: https://andyjakubowski.github.io/bug-sandpack-module-not-transpiled-yet.
• Click the Reload button a few times in the second Sandpack.
• You may need to click the reload button several times, sometimes it takes 10 reloads before the error is thrown.
• You should see an error that says /subfolder/cranberry.js: hasn't been transpiled yet..

Additional observations

• In the example, changing the path of a bundled file from a nested path subfolder/cranberry.js to a root path /cranberry.js makes a difference.
• In the example, removing an import statement for a library like xstate also removes the error.
• But when I bundle more files in my real project, having all files’ paths set up at the root level no longer helps, and the error is displayed again.
• This error is thrown in the TranspiledModule.evaluate method in sandpack-core. It has this comment: This scenario only happens when we are in an inconsistent state, the quickest way to solve this state is to just hard reload everything..
• When the reproduction repo is run in CodeSandbox in Safari, the error doesn’t seem to be thrown as much upon reloading.

Reproduction repo: link

Live demo: link

Link to sandbox: link

Your Environment

Software	Name/Version
Sandpack-client version
Sandpack-react version	^0.19.9
Browser	Safari 15.4
Operating System	macOS Monterey 12.3

[danilowoz]

Thanks @andyjakubowski for all the details! Meanwhile, I'd recommend using the Sandpack bundler v2, which is faster, more reliable, and lighter than the current one, to get over this bug. Here's a snippet of how to use it:

<Sandpack options={{ bundlerURL: "https://sandpack-bundler.pages.dev" }} />

@DeMoorJasper could you please take a look at this issue?

[DeMoorJasper]

I can't seem to reproduce this issue, but the new bundler is probably more reliable for react as Danilo already mentioned, it's also usually easier to debug issues there

[andyjakubowski]

The v2 doesn’t throw the error in the simple demo case anymore ✨. Thanks @danilowoz!

But I can’t tell if the v2 fixes the issue in my project, because I’m getting Cannot find module errors now when using the inline loader syntax like import stylesRaw from '!!raw-loader!/styles.css'. The bundler v1 seems to include raw-loader as a dependency, but the v2 doesn’t.

The alternative to raw-loader could be Webpack 5 Asset Modules and setting a resourceQuery, but I can’t change the Webpack config of the bundler.

Any way to achieve this in v2? Would you be able to add raw-loader to the bundler @DeMoorJasper?

[DeMoorJasper]

The v2 doesn’t throw the error in the simple demo case anymore ✨. Thanks @danilowoz!

But I can’t tell if the v2 fixes the issue in my project, because I’m getting Cannot find module errors now when using the inline loader syntax like import stylesRaw from '!!raw-loader!/styles.css'. The bundler v1 seems to include raw-loader as a dependency, but the v2 doesn’t.

The alternative to raw-loader could be Webpack 5 Asset Modules and setting a resourceQuery, but I can’t change the Webpack config of the bundler.

Any way to achieve this in v2? Would you be able to add raw-loader to the bundler @DeMoorJasper?

V2 doesn't support these custom loaders yet. Planning to add this soonish but that specific syntax will probably be just for compatibility, we'll likely do something similar to vite/parcel

[andyjakubowski]

Thanks @DeMoorJasper! I was able to solve my issue and deliver raw code inside the preview iframe by reading the sandpack object returned by useSandpack and dispatching the code strings to the iframe.

I experienced a few challenges with the v2 bundler unrelated to this GitHub issue. Mostly related to CSS modules, cyclic dependencies, and what triggers a reload.

Do you have a separate space for discussing and/or documenting the v2 bundler?

[DeMoorJasper]

Yes the v2 bundler has it's own repository where you can post all the issues you encounter https://github.com/codesandbox/sandpack-bundler

[danilowoz]

Closing this issue, feel free to reopen it if necessary. Thanks all!

[andyjakubowski]

Closing this issue, feel free to reopen it if necessary. Thanks all!

The bundler v2 doesn’t support the same features as the v1, so it’s a bit hard for me to tell at this point if I can replace the v1.

I’m not sure how to address the transpilation error in v1 given it doesn’t seem to reproduce on your machine. Would there be a way in the v1 to skip transpilation altogether, and avoid this error entirely?

[ryanbliss]

This seems questionably related, but I have a dependency that doesn't work with Webpack5 without Webpack polyfills. As far as I can tell, there is no exposed access to webpack. With the v1 bundler there is a separate issue with this dependency regarding circular dependency errors as such Class extends value undefined is not a constructor or null (3:0), which I haven't seen using this dependency outside of Sandpack.

This may be a separate issue, so happy to repost with more details and repro, but this thread helped me get this far. Cheers!