Resolve js files as jsx

[ghost]

Is there an option to refer .js files also as .jsx files?
I've worked with webpack so far and my jsx files had a postfix of .js and not of jsx.

[FredKSchott]

There is not an option, but this has been requested before. Would love to see a PR to add support to customize via a new option: buildOptions.jsxFileExtension: [".jsx", ".js"].

Otherwise, you can add @snowpack/plugin-babel to build your JS for you, which supports JSX in the .js file extension.

[FredKSchott]

@melissamcewen this workaround could be worth adding to the JSX guide (if we have one, or adding a JSX guide if we don't).

[mijamo]

I could take care of the pull request, it's simple enough. However I would first like to raise the question of if something more general would be preferable.

I am thinking something like #2231 or on another direction something to configure more options of esbuilld directly?

Anyway just to make sure, where are the .js loaded into esbuild right now? When looking at the code I can see that some file extensions are passed to esbuild in https://github.com/snowpackjs/snowpack/blob/0fc858cf0e5ff65be57337985be63d68fa94035b/snowpack/src/config.ts#L309 but that is not the case of .js files, how are they handled?

[Reeska]

I was bothered by this issue too, so I made a script to convert all my .js files that contains JSX tags to .jsx: https://gist.github.com/Reeska/05c11a296f90b76548cec45b23674f71

[FredKSchott]

For now, we'll most likely keep this requirement of JSX in .jsx and .tsx files only by default. However, I'd be open to adding a buildOptions config value that would let you customize this behavior and set your own file extensions to handle as JSX.

[mcqj]

Has anyone actually gotten this to work with "@snowpack/plugin-babel".
I've tried every possible configuration I can think of together with reference to various pieces of documentation and SO advice and nothing I've tried has succeeded. Just keep getting:-

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.
[01:04:20] [@snowpack/plugin-react-refresh] [500] /dist/index.js

I've tried both the presets and plugins suggestions. An example project would be great.

[Reeska]

Did your component files has extension .js or .jsx ? It should work with .jsx extension.

[goldhand]

The error messaging in the cli threw me off for a day on this topic. Trying snowpack for the first time, I kept assuming it was a config issue (which is typical with webpack).

Output in terminal was just:

[snowpack] [404] Not Found (/)

Drove me nuts! I eventually figured it out and then I found the Note: in docs about this but that warning wasn't easy to find following the "Get Started" happy-path.

Anyway, just sharing my experience incase it helps organizing docs or error messages—I'm curious how easy it's going to be to just replace a 5yr-old react + webpack code base with this—at least for development 🤞

Our code is not using jsx/tsx for react files btw (I found the note about babel)

[TheCrazyDev64]

Thats likely due to index.html not inside root directory