reactjswebpackreact-data-gridflexicious

EZGrid React DataGrid showing error "Module not found: Error: Can't resolve 'react/jsx-runtime'"?

I'am on React v17 with ruby rails and receive an error like below: Cannot find module

'\jsx\node_modules\react\jsx-runtime' imported from \jsx\index.mjs Did you mean to import react/jsx-runtime.j

AS mentioned in tutorial into the below solution is not working i modified app/javascript/.storybook/webpack.config.ts :

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

still getting the error:

ERROR in ./node_modules/@ezgrid/grid-react/lib/react/ReactDataGrid.js 2:0-56

Module not found: Error: Can't resolve 'react/jsx-runtime' in '/home/Projects/huddle/node_modules/@ezgrid/grid-react/lib/react'
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.

Can anyone help me ? i don't know where exactly its went wrong.

i tried to modifying webpack.config.ts by adding following code:

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

its not working it may possible i putting code in wrong file. anyone can help me to find right webpack config file.

Solution

  • You are on the right track - the solution is to setup the config resolve

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

    There are a couple more things you can try:

    config.resolve.alias= {
        ...config.resolve.alias,
        "react/jsx-dev-runtime": resolve("react/jsx-dev-runtime"),
        "react/jsx-runtime": resolve("react/jsx-runtime")
      }

    If you see an error that gives you the path its trying to use that means you have modified the right webpack file. Without fully knowing the structure of your project, its hard to say where your webpack file is located. If you have a subscription you can always reach out to our support team.

    More information here: http://reactdatagrid.com/docs/intro