[BUG] directly referencing a .jsx from <script> doesn't work

Offirmo commented 3 years ago

Bug Report Quick Checklist

[x] I am on the latest version of Snowpack & all plugins.
[x] I use package manager yarn
[x] I run Snowpack on OS Mac
[x] I run Snowpack on Node.js v12+

Describe the bug

Just tried snowpack on my working parcel.js v1 app, snowpack serves the index.html but fails to resolve the jsx referenced from the html (404)

To Reproduce

basic config mount: { "src": "/" }
simple src folder containing index.html with <script async importance="high" src="./index.jsx"></script> (relative import) + index.jsx
snowpack dev

Get this error: [21:45:15] [snowpack] [404] Not Found (/index.jsx)

Looking at the demo project, I realize that the script should be modified to use . .js extension instead of .jsx

Expected behavior

Why forcing to change the extension in the script reference? Why not serving the .jsx as it's named?

Anything else?

I had a good look at snowpack's entire doc and couldn't find any hint. I had to inspect a demo react project to figure this out.

drwpow commented 3 years ago

Be sure to add type="module" to all your scripts! That was you can use ESM. This is important for browsers. Please let me know if that doesn’t fix your issue.

Offirmo commented 3 years ago

Hi @drwpow , thanks. However in this issue I'm questioning/challenging the need for renaming my .jsx to .js in the <script> reference.

What are the reasons for doing that?

drwpow commented 3 years ago

Oh sorry; I misunderstood. Basically, it has to do with exposing ESM to the browser. Most servers won’t serve .jsx as application/javascript, so Snowpack must rename it to .js so the browser can handle it properly.

But as to your question of: “why don’t we just require you always use .jsx when developing,“ I guess the answer is it’s just a decision Snowpack made. In the case of .jsx it’s moot, but in something like Svelte, it makes a difference:

<link rel="stylesheet" href="./src/MyComponent.svelte" />
<script type="module" src="./src/MyComponent.svelte">

It’s basically a challenge to serve one .svelte file as 2 different content types (.css or .js), so we made the decision not to. So in Snowpack, you must always reference your final output files, which in Svelte’s case means requesting MyComponent.svelte.css or MyComponent.svelte.js. And in the case of .jsx, it means that .js must always be requested.

I definitely agree that maybe we could have a more helpful error or something, making this suggestion clearer.

FredKSchott / snowpack