search

knocklabs / javascript

Official JavaScript packages for interacting with Knock
https://knock.app/
MIT License
10 stars 2 forks source link

fix: use jsx classic runtime to avoid issues on react < 18 #115

Closed cjbell closed 2 months ago

cjbell commented 2 months ago

When using React < 18 users will run into this error: 

Module not found: Error: Can't resolve 'react/jsx-runtime' in '[FILE]'
Did you mean 'jsx-runtime.js'?
BREAKING CHANGE: The request 'react/jsx-runtime' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

The issue is described in this thread: https://github.com/facebook/react/issues/20235

The fix was implemented in React 18, but the only "fixes" that exist if we're using the JSX runtime are to patch webpack configs, which is not great.

Instead, this PR implements an option to use the "classic" JSX runtime, which is the createElement API as a workaround so that react/jsx-runtime is never referenced. To do so, we also needed to ensure that import React from "react" was at the top of all of our JSX components, which is what the babel-plugin-require-react does.

I tested this locally in our example apps with a build and everything works

changeset-bot[bot] commented 2 months ago

🦋 Changeset detected

Latest commit: 7f21868fa9648a2dc5731b5970607f99ceea1f76

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages | Name | Type | | ------------------------------- | ----- | | @knocklabs/react-core | Patch | | @knocklabs/react | Patch | | @knocklabs/react-native | Patch | | nextjs-example | Patch | | @knocklabs/react-native-example | Patch |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel[bot] commented 2 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
javascript-slack-connect-example ✅ Ready (Inspect) Visit Preview 💬 Add feedback Apr 11, 2024 2:48am
javascript-slack-kit-example ✅ Ready (Inspect) Visit Preview 💬 Add feedback Apr 11, 2024 2:48am