-
-
Notifications
You must be signed in to change notification settings - Fork 9.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
React: Support JSX react transform introduced in 16.14.0 #12899
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🚀 Coudn't do it better
Test: jsx runtime
…ookjs/storybook into 12881-jsx-transform-react
|
||
export async function babelDefault(config: TransformOptions) { | ||
const presetReactOptions = hasJsxRuntime() ? { runtime: 'automatic' } : {}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Wouldn't a better approach be to use path.dirname(config.filename)
to get the directory for the file being transformed, pass that to hasJsxRuntime
, and use it as the paths
value for the require.resolve
lookup (rather than poking into an arbitrary nm folder)?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
const context = storybookReactDirName.includes('node_modules') | ||
? path.join(storybookReactDirName, '../../') // Real life case, already in node_modules | ||
: path.join(storybookReactDirName, '../../node_modules'); // SB Monorepo | ||
|
||
const hasJsxRuntime = () => { | ||
try { | ||
require.resolve('react/jsx-runtime', { paths: [context] }); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why does it try to use node_modules folder for lookup? It can't work with yarn 2 pnp.
CRA uses require.resolve('react/jsx-runtime');
for the detection:
https://github.com/facebook/create-react-app/blob/282c03f9525fdf8061ffa1ec50dce89296d916bd/packages/react-scripts/config/webpack.config.js#L79-L85
Issue: #12881
What I did
Hack to add the
automatic
runtime per the NextJS implementationHow to test
Added it by hand in a copy of
examples/react-ts
's node_modules 🙈==> Unfortunately it's getting Storybook's React version, not the user's version...