What would be the best practice for a scenario: <script> tags in JSX scoped which does not get build unless it's place outside JSX?
{ SUBMITTED ? (
// No <script>
) : (
<script></script>
)}
#<script> tag in JSX logic
stoic walrus
plush hinge
You could put the condition inside the script tag
<script define:vars={{SUBMITTED}}>
if (SUBMITTED){
...
}
</script>
Actually for inline scripts you could just do that
For bundled scripts though they would get injected by the compiler regardless
stoic walrus
Let's say if a form is submitted, the <script> won't load on the Thank you page after the form is submitted
plush hinge
Is it that you don't want the script to load, or you found that it is not loading?
stoic walrus
Does not want the script to load as the thank you message doesn't need <script> which was used for form validation.
stoic walrus
The strange thing is, JS does not build unless I place outside JSX
stoic walrus
You can test by adding this code, no trace of console.log was build
<layout>
{
<script>
console.log('Hello World');
</script>
}
</layout>
More like a bug or expected behaviour?
To add on, I use Node for SSR
plush hinge
You can test by adding this code, no trace of console.log was build
```
<layou...
This builds just fine on my side
Without a reproduction I won't be able to see the exact issue you're having, you can start here
https://astro.new/basics?on=stackblitz
stoic walrus
Without a reproduction I won't be able to see the exact issue you're having, you...
Until I have const name = document.getElementById('name') as HTMLInputElement; in my code, the whole script get stripped off. So it's likely a bug.
---
import Layout from '../layouts/Layout.astro';
---
<Layout title="Welcome to Astro.">
{
<script>
alert('hello');
const name = document.getElementById('name') as HTMLInputElement;
</script>
}
</Layout>