v3.0.1 compatibility with React 17.0.2 (Reproducible)

[SalahHamza]

Hey! Seems like the react-compare-slider isn't compatible with react 17.0.2.

Error:

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

Here's the code to the issue:
https://github.com/SalahHamza/react-compare-slider-repro

[nerdyman]

Thanks for opening this @SalahHamza! I'll take a look

[nerdyman]

@SalahHamza Can you provide your node.js and OS version too? I haven't tried it locally yet but it works as expected on CodeSandbox https://codesandbox.io/p/sandbox/github/SalahHamza/react-compare-slider-repro/tree/main/

[SalahHamza]

@nerdyman thanks for the quick reply. Here you go:

• OS: macOS Sonoma 14.0
• Node Version: v18.17.1 (using nvm)
• npm Version: 9.6.7

Additional note: I think the main cause of the issue is this:

react-compare-slider/lib/tsconfig.json

Line 6 in 8d90e6f

"moduleResolution": "Bundler",

[SalahHamza]

I haven't tried it locally yet but it works as expected on CodeSandbox https://codesandbox.io/p/sandbox/github/SalahHamza/react-compare-slider-repro/tree/main/

@nerdyman I think the main reason why this is working, is because in the Sandbox it uses Vite, while the repro uses CRA.

[nerdyman]

@SalahHamza Thanks for raising this issue. It looks like the error is due to the JSX config used by this lib but I can't change it now as it might break other things. You can use a tool such as CRACO as a workaround.

You'll need to do the following to get it working:

Install craco:

yarn add --dev @craco/craco

Create craco.config.js in the root of your repo:

// craco.config.js in the same directory as your package.json
module.exports = {
  webpack: {
    alias: {
      'react/jsx-dev-runtime': 'react/jsx-dev-runtime.js',
      'react/jsx-runtime': 'react/jsx-runtime.js',
    },
  }
}

Change the react-scripts references in your package.json to use craco:

- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test",
+ "start": "craco start",
+ "build": "craco build",
+ "test": "craco test",

The error looks to be isolated to ES modules and Webpack 5, you can check out facebook/react#20235 for more info.