js. and .ts files must import React explicitly: (Uncaught ReferenceError: React is not defined) about ladle HOT 10 CLOSED

Added a note to the setup. Again, not going to fork Vite because of this.

from ladle.

I cannot reproduce that locally or with StackBlitz.

Using npx vs yarn should not matter. Maybe you can provide a repo? From your screenshots it seems that JSX runtime was not injected correctly and React is still referenced.

from ladle.

I'm setting up a full repro, but quick question just in case, I'm using it as hello.stories.js, does it matter? Should I be using .jsx instead? (.js is def the common way of doing JSX today AND from the docs seems like both .js and .jsx are supported)

from ladle.

Full repro can be done with these lines of code; I also set up a repo in Github:

mkdir repro-ladle
cd repro-ladle
npx create-react-app .
npm i --save-dev @ladle/react
echo "export const World = () => <p>Hey</p>;" > src/hello.stories.js
npx ladle serve

The browser opens but there's no "Hey"; opening the console you can see the error above, "React is not defined".

from ladle.

Thanks for the repro.

Should I be using .jsx instead?

Yes. I know there are a lot of heated arguments about this but the fact is that modern tools like esbuild and vite are primarly built around the assumption that JSX is only present in .jsx or .tsx files. CRA is really weird in this respect.

What's probably happening here is Vite (or its plugin) thinking that module is plain JS and not injecting the JSX runtime into it.

I can check if there's is some solution for this but my recommendation would be using keeping .js only for JS valid syntax. Also the workaround of importing React is not that bad anyway.

from ladle.

React team officially recommends using .js for JSX files and .jsx is "not recommended", so I think we could/should at least add a tip on the documentation if this tool is not going to work with the React official way? Is there a way to configure ladle to use js for JSX?

from ladle.

Also the workaround of importing React is not that bad anyway.

That's what I found odd, it's not complaining about JSX <p> syntax, it's complaining about the lack of React, so I thought might be a different bug.

from ladle.

.js and .ts files must always import React

import * as React from 'react';

Vite is not injecting JSX runtime in that case, only for .jsx and .tsx files. It seems it's something they are not going to change since it also has some performance reasons (babel transforming all .js files would be costly)

https://github.com/vitejs/vite/blob/main/packages/plugin-react/src/index.ts#L168

Closing this as won't fix.

Also, JSX can still be used in .js / .ts files but it will not get the automatic import.

from ladle.

I understand Vite is the exception here about requiring .jsx for JSX files and in my experience the vast majority of React projects use .js for JSX files; I'd at least suggest to check the top N React projects and evaluate whether they use .js or .jsx before dismissing using JSX inside .js as a "really weird" case.

Closing this as won't fix.

My suggestion and why I kept this open is that even if this is a "won't fix" code-wise (100% respect that), I'd suggest adding a note somewhere in the "Setup". Something along the lines:

"When using JSX syntax for your stories you must make sure to use the extension .jsx or .tsx since Vite uses this for performance. If you want to write JSX inside a *.stories.js file, you'll need to add import * as React from 'react'; manually to the top of those files."

from ladle.

Again, not going to fork Vite because of this.

Never was my suggestion to fork Vite :)

Added a note to the setup.

Awesome, that works, thanks!

from ladle.