TranspiledModule error: module hasn't been transpiled yet
See original GitHub issueBug 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.
![Screen Shot 2022-05-24 at 2 01 50 PM](https://user-images.githubusercontent.com/477212/170029958-cb8be9ea-e5f5-405d-914f-6ec4483a9826.png)
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 likexstate
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 insandpack-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 |
Issue Analytics
- State:
- Created a year ago
- Comments:9 (5 by maintainers)
Top Results From Across the Web
Babel/JSX Transpiler error on build when importing a module ...
You're correct, the issue is that the react-collision-provider hasn't been properly transpiled to be understood by the browser.
Read more >How to transpile ES modules with webpack and Node.js
Learn how webpack interacts with and supports ES modules in this deep dive tutorial on transpilation in Node.js.
Read more >Transpiling Typescript into double packages (CommonJS + ...
This happens because you are trying to connect an ES module from the CommonJS module. Alas, in recent years, the number of such...
Read more >Content Types - ESBuild
Newer syntax may not be supported by older browsers, however, ... But such code will not work with real ECMAScript module implementations such...
Read more >The JavaScript Modules Limbo - Andrea Giammarchi - Medium
would fail to load a real ESM module that hasn't been transpiled. ... to standard JavaScript as meant by specifications, the result will...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Yes the v2 bundler has it’s own repository where you can post all the issues you encounter https://github.com/codesandbox/sandpack-bundler
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!