marsidev / react-turnstile

Cloudflare Turnstile integration for React.
https://www.npmjs.com/package/@marsidev/react-turnstile
MIT License
414 stars 25 forks source link

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

Open lauterry opened 3 days ago

lauterry commented 3 days ago

Bug Report Checklist

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