Module not found: Error: can't resolve 'react/jsx-runtime'

[jfideler]

Describe the bug

Right out of the box:

Compiled with problems: ERROR in ./node_modules/react-data-grid/lib/bundle.js 3:0-56

_Module not found: Error: Can't resolve 'react/jsx-runtime' in '...\nodemodules\react-data-grid\lib' 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.

To Reproduce

1. npx create-react-app my-app --template typescript
2. npm install
3. npm run start
4. npm install react-data-grid
5. create a new page and add 'import DataGrid, { SelectColumn } from 'react-data-grid';'
6. Add a simple reference in the code such as 'my columns=[SelectColumn, {key: 'name'}];

Link to code example: see line 15 in Hompage.tsx

Expected behavior

Referencing SelectColumn in typescript code should not cause a compile error.

Environment

windows 10 node@v16.13.1 npm@8.3.0

-"react": "^17.0.2", -"react-data-grid": "^7.0.0-beta.7", -"react-dom": "^17.0.2",

Additional context

It seems that we can solve the problem if we change the version from "react-data-grid": "^7.0.0-beta.7", to "react-data-grid": "7.0.0-canary.30", (without the '^') in all of these places: -package.json -package-lock.json -node-modules/react-data-grid/package.json

Should we really have to do this? or have we done something wrong?

[wisehackermonkey]

same issue:

Module not found: Error: Can't resolve 'react/jsx-runtime' in 'C:\Users\o\github\vsedit\node_modules\.pnpm\react-data-grid@7.0.0-beta.7_react-dom@17.0.2+react@17.0.2\node_modules\react-data-grid\lib

[jamrsim]

@jfideler Thank you!

I too am experiencing this as described. Following @jfideler lead ...

1) In package.json change the version of "react-data-grid": "^7.0.0-beta.7", to "react-data-grid": "7.0.0-canary.30", 2) Delete the package-lock.json file 3) Delete the entire node_modules directory 4) Run npm install to recreate the package-lock.json and node_modules directory are rebuilt accordingly

This is a valid work around for my instance.

[phibar]

for me another solution works

downgrading react-scripts from v5 to v4 so minimal dependencies in my case:

  "dependencies": {
    "@types/react": "^17.0.38",
    "@types/react-dom": "^17.0.11",
    "react": "^17.0.2",
    "react-data-grid": "^7.0.0-beta.7",
    "react-dom": "^17.0.2",
    "react-scripts": "^4.0.3",
    "typescript": "^4.5.4"
}

working great without downgrading react or data-grid

using

    "@types/react": "^17.0.38",
    "@types/react-dom": "^17.0.11",
    "react": "^17.0.2",
    "react-data-grid": "^7.0.0-beta.7",
    "react-dom": "^17.0.2",
    "react-scripts": "^5.0.0",
    "typescript": "^4.5.4"
  }

results in Can't resolve 'react/jsx-runtime'error

[Berkays]

setting jsx: react-jsx in tsconfig.json

and using alias in webpack.config solves for me.

  resolve: {
      alias: {
          "react/jsx-dev-runtime": "react/jsx-dev-runtime.js",
          "react/jsx-runtime": "react/jsx-runtime.js",
      }
  },

[peetjvv]

Seeing the same issue in version 7.0.0-beta.8. The solution suggested by @Berkays worked for me as well.

[Chrysippus]

@Berkays' solution doesn't work with NextJS -- Next requires using jsx: preserve. Currently, the only workaround seems to be using the react + react-dom 18 release candidate (react@next, react-dom@next), but this isn't great for a production app currently.

[yairEO]

I don't want to downgrade react-scripts from 5 to 4 :/

[farukbigez]

@yairEO Same. This is still happening, is there any updates on that issue?

[jfideler]

Our answer was to ditch this flaming POS and use react-table. What a relief!

[amanmahajan7]

Please check https://github.com/facebook/react/issues/20235 and a workaround

[noah-ellman]

The solution for NextJS is to use the nextJs transpile module plugin and update your nextjs config file, look it up. There are a couple packages that have this bug.

[relyada]

Here is a solution that work for me.

Our codebase was running on react 17

Upgrading those package in package.json fixed the issue "react": "^18.1.0", "react-dom": "^18.1.0", "react-is": "^18.1.0",

Too, i'm using the last react-data-grid version (now it is "react-data-grid": "7.0.0-beta.12")