Can't Get @wordpress/scripts to Render JSX on public front-end (Worked with version 27.x.x)

[LearnWebCode]

Hello everyone,

I'm using @wordpress/scripts for a classic theme. It's worked wonderfully for me for years, as it has built in webpack aliases for react and WordPress's copy of react ('wp-element') and I've used it to render React components on the public front-end. Always had great luck.

I've isolated my tests, since updating beyond version 27.x.x to anything newer, including today's current version, I cannot seem to render any React components on the front-end, and get this message in the browser's console: ""Uncaught TypeError: Cannot read properties of undefined (reading 'jsx')"

Here's my code:

Key files:

My index.js
Example component
functions.php

With no other changes to my code, just jumping @wordpress/scripts beyond 27.x.x causes the issue.

Previously no further configuration was required, am I missing something in terms of setting up the @wordpress/scripts to work?

Thank you for any pointers in the right direction.

[LearnWebCode]

To anyone who might be running into this same issue, I found my solution.

In functions.php, when I'm enqueuing my JS file, in addition to 'wp-element' I also needed to include 'react-jsx-runtime' as a dependency as well.

Happy coding to you all 🎉

[t-hamano]

I think this issue is related to the new JSX change in @wordpress/scripts 29.

https://make.wordpress.org/core/2024/06/06/jsx-in-wordpress-6-6/

See #62202 for more details on the discussion.