Incompatible with React 18

[bradenmitchell]

The react and react-dom libraries have been updated to version 18. Using version 18 with the react-refresh and this webpack plugin throws the following error when running webpack dev server:

ERROR in ./src/index.tsx
Module build failed (from ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js):
Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './runtime.js' is not defined by "exports" in /Users/Braden/Projects/test-app/node_modules/react-refresh/package.json
    at new NodeError (node:internal/errors:371:5)
    at throwExportsNotFound (node:internal/modules/esm/resolve:453:9)
    at packageExportsResolve (node:internal/modules/esm/resolve:729:3)
    at resolveExports (node:internal/modules/cjs/loader:482:36)
    at Function.Module._findPath (node:internal/modules/cjs/loader:522:31)
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:919:27)
    at Function.resolve (node:internal/modules/cjs/helpers:108:19)
    at Object.<anonymous> (/Users/Braden/Projects/test-app/node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js:20:4)
    at Module._compile (node:internal/modules/cjs/loader:1103:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1155:10)

ERROR in ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js 4:23-58
Module not found: Error: Package path ./runtime.js is not exported from package /Users/Braden/Projects/test-app/node_modules/react-refresh (see exports field in /Users/Braden/Projects/test-app/node_modules/react-refresh/package.json)

Versions
node: 16.14.0
react: 18.0.0
react-dom: 18.0.0
webpack: 5.70.0
webpack-dev-server: 4.7.4
react-refresh: 0.12.0
react-refresh-webpack-plugin: 0.5.4

Current work around is to disable react-refresh & react-refresh-webpack-plugin or downgrade to react/react-dom 17

[1111mp]

+1

[jussikinnula]

I tested, and apparently the master version works well. There has been changes this year to change imports from react-refresh/runtime.js to react-refresh' (in loader.js) and to react-refresh/runtime(inclient/ReactRefreshEntry.js`).

I tested with React 18 and changing my package.json dependency from:

"@pmmmwh/react-refresh-webpack-plugin": "^0.5.4",

to:

"@pmmmwh/react-refresh-webpack-plugin": "github:pmmmwh/react-refresh-webpack-plugin",

Works without issues.

@pmmmwh, could we have a new release from master? :-)

[ntucker]

This is fixed in #576 but we are all waiting on a version with this fix to be published.

Important to note that this is still compatible with React 18, just not react-refresh 0.12. react-refresh 0.11 still works with React 18.

[kimbaudi]

i agree that these errors are related to react-refresh 0.12.0 and not react 18. you should be able to use react 18 as long as you don't upgrade from react-refresh 0.11.0 to 0.12.0. we just need to wait for a newer release of react-refresh w/ the fix.

[moquette]

I tested, and apparently the master version works well. There has been changes this year to change imports from react-refresh/runtime.js to react-refresh' (in loader.js) and to react-refresh/runtime(inclient/ReactRefreshEntry.js`).

I tested with React 18 and changing my package.json dependency from:

"@pmmmwh/react-refresh-webpack-plugin": "^0.5.4",

to:

"@pmmmwh/react-refresh-webpack-plugin": "github:pmmmwh/react-refresh-webpack-plugin",

Works without issues.

@pmmmwh, could we have a new release from master? :-)

I can confirm updating package.json with following changes fixes the issue.

"@pmmmwh/react-refresh-webpack-plugin": "github:pmmmwh/react-refresh-webpack-plugin",

[luckymore]

are you ok?

[jussikinnula]

Thanks for noting this. Slava Ukraini.

I can take action and publish an npm package Tomorrow which could be used until we hear back from @pmmmwh.

[pmmmwh]

@jussikinnula I know the reason...

Hi, I really do not appreciate the attempt to misinterpret what I write on my PERSONAL Twitter account. The fixes just have not been released simply because I did not have the time and effort to go through more planned work.

Thanks for noting this. Slava Ukraini.

I can take action and publish an npm package Tomorrow which could be used until we hear back from @pmmmwh.

If you haven't done it, I would strongly advise against doing so to reduce fragmentation.

Fix is published in 0.5.5.

[jussikinnula]

@pmmmwh, I agree that reducing fragmentation is very important.

I haven't published anything and of course I will not publish anything.

And I'm very sorry for the misinterpretation from my behalf.

[justin808]

If React 18 is supported, does the home page need updating?

BTW, thanks @pmmmwh for your excellent work! I'm maintaining https://github.com/shakacode/react_on_rails and https://github.com/shakacode/shakapacker, and this is a crucial part of the puzzle.

CC: @tomdracz.