Repository: codesandbox/codesandbox-client (language: javascript)

Issue:
Angular & Vue Sandboxes suddenly stopped working. Error "Cannot use import statement outside a module"
# 🐛 bug report

## Preflight Checklist
- [x] I have read the [Contributing Guidelines][contributing] for this project.
- [x] I agree to follow the [Code of Conduct][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
Angular and Vue Sandboxes are suddenly throwing error "Cannot use import statement outside a module". The code in the sandbox had previously been running fine, it also [seems to work correctly in other platforms](https://stackblitz.com/edit/angular-ps36a5?file=tsconfig.json).

I have encountered issues with codesandboxes before [due to Webpack/Sandpack configuration](https://github.com/codesandbox/codesandbox-client/issues/6105). I suspect this might be such an issue.

## How has this issue affected you? What are you trying to accomplish?
This error breaks the sandbox.

### To Reproduce
Visit: https://codesandbox.io/s/confident-fermi-3dtw5?file=/src/main.ts

### Link to sandbox: [https://codesandbox.io/s/confident-fermi-3dtw5?file=/src/main.ts](https://codesandbox.io/s/confident-fermi-3dtw5?file=/src/main.ts)

### Your Environment

| Software         | Name/Version |
| ---------------- | ------------ |
| Сodesandbox      |e6a3e092b|
| Browser          |Edge 93.0.961.38|
| Operating System |Windows 10|

<!-- prettier-ignore-start -->
[code_of_conduct]: https://github.com/codesandbox/codesandbox-client/blob/master/CODE_OF_CONDUCT.md
[contributing]: https://github.com/codesandbox/codesandbox-client/blob/master/CONTRIBUTING.md
<!-- prettier-ignore-end -->



Discussion / hints:
Hey @hodgef 

I'm afraid I can't replicate this using the Sandbox you linked - that Sandbox seems to be broken but the error I have is

"Unable to open 'sandboxroot': File not found (file:///sandboxroot)."
Thanks for looking into this @JamesACS

The problem is that the sandbox shouldn't be broken but is for some reason. It breaks as soon as I import a library in [`app.component.ts` (line 15)](https://codesandbox.io/s/confident-fermi-3dtw5?file=/src/app/app.component.ts:291-299).

The same code works in Stackblitz https://stackblitz.com/edit/angular-ps36a5

I had a similar issue in a Vue codesandbox where importing a library triggered an issue. This was narrowed down to a problem in Codesandbox Webpack configuration: https://github.com/codesandbox/codesandbox-client/issues/6105

Cc'ing @DeMoorJasper in case these are related. Thanks!
another step to reproduce
1. Click new sandbox. Then select vue3 templates
![image](https://user-images.githubusercontent.com/7280952/142149360-59649753-a79d-4cf9-a0fd-52e9baa6b0b0.png)
2. wait 
![image](https://user-images.githubusercontent.com/7280952/142149492-92a49911-8bba-44f9-a346-71dc34043249.png)

@DeMoorJasper 


@dabuside seems to be working fine for me, can you create a new issue if this still happens. Seems unrelated
> @dabuside seems to be working fine for me, can you create a new issue if this still happens. Seems unrelated

Maybe some cache issue. I have a another try just now, it's still report `cannot use import statement outside a module` as last time.
When I open it in private mode or with devTools opened, it works fine.
I can confirm on multiple sandboxes, new and old, that **this is also an issue for Vue 3 projects, not only Angular**. The issue seems to be that when package.json is invalid for even a fraction of a second, CSB defaults to the React template, which installs a react service worker and runs an unkillable react daemon. I've never touched a React sandbox, so explaining this away as a temporary cache problem seems inaccurate.

I also get the exact same import React error when running a new unmodified Vue 3 sandbox from the CSB official template. The issue isn't just for new projects, but can be extremely problematic with popular Vue sandboxes that need dependency updates, but get corrupted with irrelevant React code.
![Screenshot 2021-11-19 20 54 01](https://user-images.githubusercontent.com/876076/142712289-a35b9d22-49d5-457e-8968-b9a4f09c06d4.png)

- Go to https://v00pi.csb.app/ (Works even in incognito)
- Wait for it to load
- Hit refresh on the browser
- Witness the confusing error message

I can't reproduce this with the TS Parcel template... indicating it could be an issue with the ESLint integrations. While working on this Vue 3 sandbox I encountered the error around 50 times per hour https://codesandbox.io/s/xk52mqm7o
I cannot shake this either and I'm going insane. Tried cognito, multiple browsers, and computers: [codesandbox](https://codesandbox.io/s/v3-gmaps-demo-1flr5)
We've found the problem, it's a cache issue and we'll be fixing it tomorrow or sometime next week
@DeMoorJasper not sure if you fixed other's problems, but [my codesandbox](https://codesandbox.io/s/v3-gmaps-demo-1flr5) is still showing the same error: **Cannot use import statement outside a module**
@xon52 No hasn't been fixed, it was fixed originally but Ives didn't like the changes so I had to revert it
I'm still seeing it as well

Minimal: https://v00pi.csb.app/ (P.S. It's hard to debug this without a stackblitz style terminal)
![Screenshot 2021-12-02 10 46 40](https://user-images.githubusercontent.com/876076/144465948-c9dcfe85-7a93-43b9-941a-a42b7ff4ea5c.png)

Has anyone figured out how to mitigate the issue? non-sse CodeSandbox's are almost unusable due to this regression. Hitting refresh on the internal browser for the following sandbox makes it go away temporarily. Hitting the internal-refresh again causes it to come back. Hitting the internal-refresh again, re-transpiles the sandbox and makes it go away.

Using the external preview does not trigger re-transpilation and thus the warning is stuck in the error mode. What is this service worker for? It's not the one that comes from vue-devtools and it's not coming from my code. I've also noticed CSB interferes with my manifest.json. It would be nice to have a list of all these "magic" features and how to get rid of them.

Real world sandbox affected: https://codesandbox.io/s/xk52mqm7o?file=/src/index.js
![Screenshot from 2021-12-08 09-34-04](https://user-images.githubusercontent.com/876076/145236456-643b8db2-906a-43ae-8b26-52eb34786140.png)

> Has anyone figured out how to mitigate the issue? 

Nope. I have just had to switch to [stackblitz.io](stackblitz.io)
The only downside is that you can't host image files on their free tier; but you can just change src URLs to point to GitHub files to work around that.
In my case I had to add a toggle between Codesandbox and Stackblitz. They both allow pointing to Github branches.

![image](https://user-images.githubusercontent.com/25509135/145313688-7a7774cc-357a-4a92-a014-4ed144b62e3f.png)

I hope this issue is resolved soon so we can fully rely on Codesandbox moving forward.

> @DeMoorJasper not sure if you fixed other's problems, but [my codesandbox](https://codesandbox.io/s/v3-gmaps-demo-1flr5) is still showing the same error: **Cannot use import statement outside a module**

@xon52 the sandbox linked can be fixed by installing `@babel/core@7` and `@babel/runtime@7` I'm trying to get us to default us to babel 7 to prevent these issues in the future, but we don't want to break too many old sandboxes by doing so
@DeMoorJasper 
- https://codesandbox.io/s/vite-vue-3-0zgs3?file=/package.json
- https://codesandbox.io/s/xk52mqm7o?file=/package.json

Both of those sandboxes have babel 7  installed and the issue persists. 

They work in other sandboxes:

- https://vite.new/vue
- https://stackblitz.com/edit/feathersjs-ebux7j?file=app.js
@rayfoss yes, it only fixes the sandbox I quoted, will look into the other ones tomorrow, which are caching issues as I already mentioned a couple replies ago, they're just a bit hard to fix
Thanks for the update and solution around babel 7 @DeMoorJasper 🥳 
It works most of the time but it's a little flakey still. On saving, or refreshing inside the view panel, I still get the same error. Full page refresh works.
Will someone please update the name of this issue to include Vue 3?
Also, will someone please take down the official Vue 3 template until this is fixed, or replace it with a static site template that uses a script tag instead of a bunder?
Also, note that this bug is more consistently reproducible in Firefox than in Chrome. For the Vue 3 official template, any syntactically-correct modification to any .vue or .js file will cause the bug to show up, if you are using Firefox. It is still reproducible on Chrome, just intermittently.
I was going to suggest replacing all the bundler templates with SSE backed ones until a vite or webcontainer backed one can be released... 

But in the process of making a Vite SSE template... I managed to seriously break CodeSandbox. The sandbox's restart button won't show, in the error logs it appears it's defaulted to a react broken template, there is no way to fix it without installing the binary importer that I can see. This code does normally run on SSE, and will probably start working in a couple days.

https://codesandbox.io/s/vue-vite-ts-super-broken-0kj4uh
![Screenshot from 2022-02-25 21-31-14](https://user-images.githubusercontent.com/876076/155827534-4fde7f2c-4e74-44c2-8fdc-327e5a37c395.png)

Even with all the issues SSE faces, I'd still support a switch to hide all bundler backed projects in CSB. That way I could discover and prototype production-like projects without stumbling on "Ye olde bundler experience". Promoting them and leaving them so public is a waste of many many people's time and energy that could be spent on SSE, etc... Specially as Vue 3 + Vite without Volar is a really poor experience as the code will always false positive
Hey, I am running into the same problem. Here are the minimal steps to reproduce the issue.

Create a new Codesandbox with the official Vue 3 Template:

![Screenshot 2022-03-18 14 55 20](https://user-images.githubusercontent.com/29412934/159026814-bdeb2c34-5ffc-4b00-8012-3b69be332b8a.png)

Then we get the error:

![Screenshot 2022-03-18 14 56 57](https://user-images.githubusercontent.com/29412934/159027029-2a258890-b5ca-4307-a016-35f5f623c133.png)

Here is a link to the sandbox I just created that has the issue: https://codesandbox.io/s/angry-solomon-8k7bus

Generally the problem goes away when I reload the page again.

I tried the fix suggested above adding @babel/core@7 and @babel/runtime@7 but it does not help, here is a forked sandbox that has this change and we can still see the issue happening:

https://codesandbox.io/s/practical-goodall-2mdlw0

The pattern seems to be that the issue occurs when the sandbox is first created, then on reload it works and then comes back and whenever a change is made to it and I save and reload and so I have to reload again, and it usually works again until the next time I save a new change and reload.

![Screenshot 2022-03-18 15 06 10](https://user-images.githubusercontent.com/29412934/159028646-86e23126-ef8a-43eb-b2c3-68ff6af87513.png)

Cheers

Fix patch:
diff --git a/packages/app/src/sandbox/eval/presets/vue-cli/index.ts b/packages/app/src/sandbox/eval/presets/vue-cli/index.ts
index e048690b241..38b195a839e 100644
--- a/packages/app/src/sandbox/eval/presets/vue-cli/index.ts
+++ b/packages/app/src/sandbox/eval/presets/vue-cli/index.ts
@@ -63,9 +63,8 @@ export default function initialize() {
         try {
           const vueModule = await manager.resolveTranspiledModule('vue', '/');
 
-          if (!vueModule.source) {
-            await vueModule.transpile(manager);
-          }
+          await vueModule.transpileTree(manager);
+
           const Vue = vueModule.evaluate(manager);
 
           if (Vue) {
diff --git a/packages/sandpack-core/src/transpiled-module/transpiled-module.ts b/packages/sandpack-core/src/transpiled-module/transpiled-module.ts
index bdf04c9d7de..fb2bba79081 100644
--- a/packages/sandpack-core/src/transpiled-module/transpiled-module.ts
+++ b/packages/sandpack-core/src/transpiled-module/transpiled-module.ts
@@ -749,6 +749,13 @@ export class TranspiledModule {
     );
   }
 
+  /** Transpile current module and ensure the surrounding tree (dependencies and initiators) are also transpiled */
+  async transpileTree(manager: Manager): Promise<TranspiledModule> {
+    await this.transpile(manager);
+    await manager.verifyTreeTranspiled();
+    return this;
+  }
+
   logWarnings = () => {
     if (this.warnings.length) {
       this.warnings.forEach(warning => {


Test patch: