Module not found: Error: Can't resolve 'react/jsx-runtime' in 'node_modules/react-share/dist'

[himavan]

Hey the following is the error

Module not found: Error: Can't resolve 'react/jsx-runtime' in '/node_modules/react-share/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.

[nygardk]

Hello! Are you on React 18?

[himavan]

Hey! I'm react 17.0.2

[mmacarth]

Hello, we have the same issue. On 17.0.2 as well. It seems to only happen when running on Windows, not on Mac or Ubuntu.

[mmacarth]

For others, fyi. We use webpack and we'd solved the issue by adding the following rule:

           {
              test: /\.js$/,
              include: /node_modules\/react-share/,
              resolve: {
                fullySpecified: false,
              },
            },

This matches .js files in node_modules/react-share and sets fullySpecified to false as there's no extension on the import from jsx-runtime in react-share.

On windows, the include regex wasn't working as it includes a "/". Instead using:

     include: path.resolve('node_modules', 'react-share'),

does match the windows formatting for path and the build succeeds.

[loishobe]

Hello is there any workaround or fix for this?

[monecchi]

So sad :( Moving to other library until this is solved...

[sudhanshutech]

same happening for us

[zachandblue]

bummer

[kerematam]

It was creating same issue on vitest.

Fix was simply adding this package as inline, so that vite process the package:

In vite.config.js:

export default defineConfig({
  test: {
    globals: true,
    environment: "jsdom",
    // vite apply necessary aliases to react-share
    deps: { inline: ["react-share"] }
  }
});

[monecchi]

I'm using Next.js 14

[serabariq]

What a bug is this. If you guys using nextjs, please move to another library. This library not maintained anymore, atleast for nextjs

[adrianfaciu]

It was creating same issue on vitest.

Fix was simply adding this package as inline, so that vite process the package:

In vite.config.js:

export default defineConfig({
  test: {
    globals: true,
    environment: "jsdom",
    // vite apply necessary aliases to react-share
    deps: { inline: ["react-share"] }
  }
});

If you are using Vite/Vitest the solution is as simple as this. Thanks 🙏