[Bug] Since version 2.0.0-beta.14 including app throw exception on React 17.0.2

[tmarinov82]

Bug Description:
Since version 2.0.0-beta.14 including app throw exception on React 17.0.2

Steps To Reproduce:
Steps to reproduce the bug behavior:

1. npm start with error:
   ERROR in ./node_modules/react-chatbotify/dist/index.js 2:0-72
   Module not found: Error: Can't resolve 'react/jsx-runtime' in 'C:\GitRepos\test\my-app3\node_modules\react-chatbotify\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.

ERROR in ./node_modules/react-chatbotify/dist/index.js 5:0-34
Module not found: Error: Can't resolve 'react-dom/server' in 'C:\GitRepos\test\my-app3\node_modules\react-chatbotify\dist'
Did you mean 'server.browser.js'?
BREAKING CHANGE: The request 'react-dom/server' 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.

Library version:
2.0.0-beta.14 till the latest

Software Stack:
"react": "^17.0.2",
"react-chatbotify": "^2.0.0-beta.26",
"react-dom": "^17.0.2",
"react-scripts": "5.0.1",

[tjtanjin]

Hey @tmarinov82, can I check what you've tried so far (e.g. remove node_modules and do a clean reinstall)?

It will also help if you can provide the full package.json file and your bundler configurations.

[tmarinov82]

I created React app with create react app and downgrade to 17.0.2 which is our production version. I wanted to test the package in isolation. Here is package.json:
"react": "^17.0.2",
"react-chatbotify": "^2.0.0-beta.26",
"react-dom": "^17.0.2",
"react-scripts": "5.0.1",
It is fresh install without node_modules folder and package-lock.json

[tjtanjin]

I created React app with create react app and downgrade to 17.0.2 which is our production version. I wanted to test the package in isolation. Here is package.json:

"react": "^17.0.2",

"react-chatbotify": "^2.0.0-beta.26",

"react-dom": "^17.0.2",

"react-scripts": "5.0.1",

It is fresh install without node_modules folder and package-lock.json

Hmmm, as a sanity check, are you able to try vite instead of create-react-app?

[tmarinov82]

I can but our project is build with create react app and this won't be a solution for us. I even can't upgrade to react 18

[tjtanjin]

I can but our project is build with create react app and this won't be a solution for us. I even can't upgrade to react 18

I did a little digging, it seems like this is due to how CRA specifically handles resolving of imports (requires extension). A possible workaround would be to modify webpack config as follows:

resolve: {
  fullySpecified: false,
}

Are you able to give this a try?

[tmarinov82]

It doesn't work for me if I just add it to resolve section of the webpack file. Would you provide a working version of webpack file which fix this issue?

[tmarinov82]

I just tested to upgrade to React 18.3.1 and it fixed the issue, but I cannot upgrade it in our production environment.

[tjtanjin]

@tmarinov82 To be frank I'm not sure if there's much I can do on my end since this is pretty much a CRA specific issue 😢 A naive solution that comes to mind is to directly add the .js extension to the relevant imports inside index.js. With that said, CRA was deprecated early 2023 so the ideal solution forward is to move to another bundler such as vite.