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

What kind of problem do you need help?

We're working on an application where we have Agora integrated already. However we're trying to migrate the the react sdk.

I installed the package via npm i agora-rtc-react and I get the following error while running npm run start:

Failed to compile.

Module not found: Error: Can't resolve 'react/jsx-runtime' in '.../node_modules/agora-rtc-react/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/agora-rtc-react/dist/agora-rtc-react.mjs 2:0-56
Module not found: Error: Can't resolve 'react/jsx-runtime' in '.../node_modules/agora-rtc-react/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 my package.json:

...
  "type": "commonjs",
  "dependencies": {
    ...
    "agora-extension-ai-denoiser": "^1.1.0",
    "agora-extension-virtual-background": "^1.2.0",
    "agora-rtc-react": "^2.1.0",
    "agora-rtc-sdk-ng": "^4.20.2",
    "agora-rtm-sdk": "^2.1.9",
    ...
    "react": "^17.0.2",
    ...
    "react-router-dom": "^5.3.4",
    ...
  },
  "overrides": {
    "react-scripts": {
      "typescript": "^5.4.5",
      "postcss": "8.4.31",
      "@typescript-eslint/eslint-plugin": "^6.12.0",
      "@typescript-eslint/parser": "^6.12.0"
    }
  },
  "scripts": {
    "start": "react-scripts start",
  },
  ...
  "devDependencies": {
    ...
    "react-scripts": "^5.0.1",
    ...
  }
}

AgoraIO-Extensions / agora-rtc-react

Module not found: Error: Can't resolve 'react/jsx-runtime' in '.../node_modules/agora-rtc-react/dist' #195

What kind of problem do you need help?