Open sauloquirino opened 3 years ago
Thank you for the hint.
Unfortunately it didn't work for me at all. It actually broke the loading of most Next Modules
What does your config look like? Not 100% familiar with Next.js, but you might have to keep the existing aliases instead of overriding the entire field, i.e.:
return {
resolve: {
...config.resolve,
alias: {
...config.resolve.alias,
'react/jsx-runtime': require.resolve('react/jsx-runtime')
}
}
}
https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config
Running into the same problem here.
I tried the suggestions above with react-data-grid@react-data-grid
, but no luck there.
Had to roll back to next@11.0.1
for the time being.
module.exports = {
webpack5: true,
webpack: (config) => {
// Unset client-side javascript that only works server-side
config.resolve.fallback = { fs: false, module: false }
config.resolve.alias['react/jsx-runtime'] = require.resolve('react/jsx-runtime')
config.resolve.alias['react/jsx-dev-runtime'] = require.resolve('react/jsx-dev-runtime')
return config
},
reactStrictMode: true,
i18n: {
locales: ['de-DE'],
defaultLocale: 'de-DE',
},
}
Can you try replacing
require.resolve('react/jsx-runtime')
with
path.resolve('./node_modules/react/jsx-runtime.js')
This is what we use internally with webpack 5.
Might need some tweaking depending on the location of your config file/node_modules
.
Just tried your recommendation, but no avail. both path.resolve
and require.resolve
resulted in the same path.
{
path: 'C:\\Data\\Development\\someproject\\node_modules\\react\\jsx-runtime.js',
require: 'C:\\Data\\Development\\someproject\\node_modules\\react\\jsx-runtime.js'
}
The only thing of note I can add, is that the node_modules
folder lies within the root of the yarn workspace, while the next project is within ./packages/client
. Although I somehow doubt that would influence it.
Does the jsx-runtime.js
file actually exist at that path? 🤔
Does the
jsx-runtime.js
file actually exist at that path? 🤔
I checked just now and yes, it does.
Might not be an issue with webpack then, might be node failing to import as it respects its esm import semantics. https://github.com/facebook/react/issues/20235#issuecomment-728405448
Best bet would be to have it fixed upstream in React. Try bugging the React devs on GitHub/Twitter. It's just a matter of adding the exports
field which exists in the React 18 alphas. 🤷♂️
Might not be an issue with webpack then, might be node failing to import as it respects its esm import semantics. facebook/react#20235 (comment)
Best bet would be to have it fixed upstream in React. Try bugging the React devs on GitHub/Twitter. It's just a matter of adding the
exports
field which exists in the React 18 alphas. 🤷♂️See also vercel/next.js#27977
Seems to definitely be the solution. I just tried by applying a yarn patch
to react, that would add the fields that you mentioned in https://github.com/facebook/react/issues/20235#issuecomment-728824662 and it seems to be compiling fine again.
I'll try and bug them upstream then. Thanks for the help so far.
I was able to update React to 18 Alpha and the error is gone!
@sauloquirino what's the version of the package?
Latest of everything as of today (sorry, not in front of my computer right now)
It's working! Thanks! :)
npm install react@alpha react-dom@alpha
Adding webpack aliases did not help.
Upgrade to react 18 beta works for me
npm install react@beta react-dom@beta
I have nextjs 11.1.0 and use MUI 5 - it seems nothing is broken after upgrade to react 18.
upd: I had to downgrade back to react 17 in 18beta it seems some desync exists between main render cycle and native (non-react) events handlers so if you are using some e.g. to set not passive listeners - test carefully. In v17 code called in listener and in changes made in render was in same js event loop cycle so visually all looked instant, now it's going to different ones and it causing visual jerking in my case. Other "normal" stuff works fine, so I maybe will get back to beta and fix my issues when will have time.
ERROR in ./node_modules/react-data-grid/lib/bundle.js 3:0-56
Module not found: Error: Can't resolve 'react/jsx-runtime' in '/Users/alamothe/Projects/car-manager/fleet-client/node_modules/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.
For those who can't upgrade to react18 yet, this is the only solution that worked for me with NextJS 12.1:
https://github.com/vercel/next.js/issues/27977#issuecomment-1009413994
If you click through to the original issue, the library author of react-timezone-select claims they fixed it by exporting "a correct esm + cjs version".
What version of React Data Grid are you using? ^7.0.0-beta.2
What version of Next.js are you using? 11.1.0
What version of Node.js are you using? 16.6.2
What browser are you using? Chrome
What operating system are you using? Windows 10
How are you deploying your application? local
Describe the Bug After upgrading the Next to 11.1.0 isn't more possible to run my application. I'm receiving the error below:
Expected Behavior Expect to works as before, with no errors in the compiling.
To Reproduce Create a small project nextjs project (11.1.0) using the react-data-grid in the ^7.0.0-beta.2. link and next run npm run dev or yarn run dev;