How can I use scripts in a static codesandbox template?

Question

I have created a static codesandbox template, but can't seem to get javascript working:

   <html>
     <head>
     <script src="./app.js"></script>
     </head>
     <body>
       <p>Just a test</p>
       <script>console.log("heyyy")</script>
     </body>
    </html>

app.js

 console.log("boink")

The console does not show any console output at all. Are scripts not allowed in static websites without a bundler?

It seems like a webpack is clearing the console. You can tell that by hitting F12 and seeing the *"Console was cleared"* statement coming from webpack source files. Try with `alert('boink');` and it should work. — Sebastian Kaczmarek, Jan 10 '20 at 12:01
A simple `setTimeout(() => console.log("boink boink"), 1000);` will also work. Not sure why the console is cleard though — Sebastian Kaczmarek, Jan 10 '20 at 12:03

score 3 · Accepted Answer · answered Jan 10 '20 at 12:13

3

Expanding my comments. It looks like there's a setting which by default causes the console to be cleared. You can change it by clicking the gear icon:

and then changing this option (if it's enabled it will be green):

After turning it off, the console is not cleared anymore for me.

answered Jan 10 '20 at 12:13

Sebastian Kaczmarek

8,120
4
20
38

2

Thanks for the reply. That cog icon is actually not showing in my codesandbox editor, but I disabled the setting `clear console` under `file > preferences`. Strangely, this has no effect on the initial log statements, they still don't show. But, the `setTimeout` works, so I guess the script is actually running! – Kokodoko Jan 10 '20 at 13:55
2

I also found that `app.js` is actually a system name so that file got ignored automatically. But the console is still cleared for whatever reason. – Kokodoko Jan 10 '20 at 13:58
1

Maybe try contacting the Codesandbox crew directly via GH: https://github.com/codesandbox/codesandbox-client/issues. Some parts of their system are open-sourced – Sebastian Kaczmarek Jan 10 '20 at 14:05
2

Finally, I found that including multiple scripts doesn't work, because type checking fails for variables in external scripts (`x is not defined` when `x` comes from another file). These static templates really are not meant for use with scripting I guess. Not a real problem, but good to know! – Kokodoko Jan 10 '20 at 14:08

How can I use scripts in a static codesandbox template?

1 Answers1