Comments (10)
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 addimport * 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.
Related Issues (20)
- Allow duplicate story name HOT 2
- Missing Accessibility Report button with @ladle/react v3.1.0 and up HOT 2
- ladle.css leaks on @reach/dialog inside stories HOT 1
- Internal server error: Header name must be a valid HTTP token [":path"] HOT 2
- ladle build error HOT 3
- Should the msw implementation be created as an independent plugin? HOT 2
- RTL config using MDX code block breaks formatting HOT 1
- Stylesheet ordering bug with @mui/material and styled-components HOT 9
- Head elements not being synchronized between the iframe and its parent
- Range control with a default value of zero does not adopt default value
- Source maps are broken
- MDX anchor links do not work
- Allow exports in `export` block HOT 5
- Toggling view should retail the filter query
- Vite HMR config does not override Ladle default config HOT 2
- Ladle seems to conflict with remix vite plugin HOT 4
- Allow export function which are not in the same file HOT 2
- Code blocks in .mdx files display warnings in browser console HOT 1
- Embeddable Isolated Story HOT 1
- Some way to customize the story navigation tree HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ladle.