🐛 Bug: Module not found: Error: Can't resolve 'react/jsx-runtime'

[lauterry]

Bug Report Checklist

• I have tried restarting my IDE and the issue persists.
• I have pulled the latest main branch of the repository.
• I have searched for related issues and found none that matched my issue.

Expected

I expect my project to build without error

Actual

When I build my project, I have the following error :

ERROR in ./node_modules/@marsidev/react-turnstile/dist/index.js 2:170-211
**Module not found: Error: Can't resolve 'react/jsx-runtime'** in '/Users/thierrylau/workspace/front/node_modules/@marsidev/react-turnstile/dist'
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.

My project use react 16 so I update react version to 17 for the error persist.

Here are some of my package.json dependencies :

"@babel/plugin-proposal-class-properties": "^7.17.12",
    "@babel/plugin-proposal-private-methods": "^7.17.12",
    "@babel/plugin-proposal-private-property-in-object": "^7.17.12",
    "@babel/preset-env": "^7.18.2",
    "@babel/preset-react": "^7.17.12",
    "@babel/register": "^7.17.7",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

Here is the content of my babel.sonfig.js

function isWebTarget(caller) {
	return Boolean(caller && caller.target === "web");
}

module.exports = api => {
	api.cache(() => process.env.NODE_ENV);

	// Jest will set process.env.NODE_ENV to 'test' if it's not set to something else.
	// You can use that in your configuration to conditionally setup only the compilation needed for
	// Jest
	const isTest = api.env("test");

	const isWeb = api.caller(isWebTarget);

	const presets = [
		[
			"@babel/preset-env",
			{
				corejs: 3,
				useBuiltIns: "usage",
				loose: true,
			},
		],
		[
			"@babel/preset-react",
			{
				runtime: "automatic",
				loose: true,
			},
		],
	];

	const plugins = [
		["@loadable/babel-plugin"],
		["@babel/plugin-proposal-private-methods", { loose: true }],
		["@babel/plugin-proposal-private-property-in-object", { loose: true }],
		["@babel/plugin-proposal-class-properties", { loose: true }],
	];

	if (isTest || !isWeb) {
		plugins.push(["dynamic-import-node", { noInterop: true }]);
	}

	if (process.env.INSTRUMENT) {
		plugins.push([
			"istanbul",
			{
				useInlineSourceMaps: false,
			},
		]);
	}

	return {
		presets,
		plugins,
	};
};

Best regards

Package Version

1.1.0

Browsers

Chrome

Additional Info

node version is v20.12.0

[marsidev]

Sorry, are you still facing this? Have you tried deleting node_modules and npm i again?

These articles may help too:

• https://www.dhiwise.com/post/how-to-fix-the-error-cant-resolve-react-jsx-runtime
• https://bobbyhadz.com/blog/react-module-not-found-cant-resolve-react-jsx-runtime

[TheKidCoder]

Also hit this issue - Had to add this package to my list of nextTranspileModules = require('next-transpile-modules'); to fix it.