Pwa-studio: [bug]: React Refresh is not working with webpack mode dev

[fooman]

Describe the bug
React refresh is throwing error.

To reproduce
Steps to reproduce the behavior:

1. with latest develop branch
2. Run webpack --no-progress --env.mode development
3. Note error

Error: [React Refresh] Hot Module Replacement (HMR) is not enabled! React Refresh requires HMR to function properly.

Expected behavior
no error

Additional context
Same as reported here https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/169

Possible solutions
possible fix is to change
node_modules/@magento/pwa-buildpack/lib/WebpackTools/configureWebpack/getClientConfig.js

            new ReactRefreshWebpackPlugin()

to

            new webpack.HotModuleReplacementPlugin(),
            new ReactRefreshWebpackPlugin()

However it might be better to move the above completely into the development section? Or am I missing something here?

Please complete the following device information:

• Device [e.g. iPhone6, PC, Mac, Pixel3]:
• OS [e.g. iOS8.1, Windows 10]:
• Browser [e.g. Chrome, Safari]:
• Browser Version [e.g. 22]:
• Magento Version:
• PWA Studio Version:
• NPM version npm -v:
• Node Version node -v:

Please let us know what packages this bug is in regards to:

• [x] venia-concept
• [ ] venia-ui
• [x] pwa-buildpack
• [ ] peregrine
• [ ] pwa-devdocs
• [ ] upward-js
• [ ] upward-spec
• [ ] create-pwa

[m2-assistant[bot]]

Hi @fooman. Thank you for your report.
To help us process this issue please make sure that you provided sufficient information.

Please, add a comment to assign the issue: @magento I am working on this

---

• Join Magento Community Engineering Slack and ask your questions in #github channel.

[awilcoxa]

Linked to internal JIRA PWA-919

[NandiniJivainfotech123]

@magento I am working on this

[NandiniJivainfotech123]

I executed the steps which you have provided I didn't find any issue,

1.with latest develop branch
2.Run webpack --no-progress --env.mode development
3.Note error

[sirugh]

@fooman are there other steps? Is this from the repo or from a scaffolded app?

[fooman]

Indeed this was with the scaffolded app. The command is taken from
https://github.com/magento/pwa-studio/blob/develop/packages/venia-concept/package.json#L16

git clone [email protected]:magento/pwa-studio.git
cd pwa-studio
DEBUG_PROJECT_CREATION=true ../pwa-studio/packages/pwa-buildpack/bin/buildpack create-project scaffold-test-1 --template "venia-concept" --name "scaffold-test-1" --author "test123 [email protected]" --backend-url "" --braintree-token "" --npm-client "yarn"
cd scaffold-test-1
./node_modules/webpack-cli/bin/cli.js --no-progress --env.mode development

To note both
./node_modules/webpack-cli/bin/cli.js --no-progress --env.mode production and
./node_modules/.bin/webpack-dev-server --progress --color --env.mode development compile successfully.

[NandiniJivainfotech123]

@fooman ,i executed the below steps, I didn't find any issue.
git clone [email protected]:magento/pwa-studio.git
cd pwa-studio
DEBUG_PROJECT_CREATION=true ../pwa-studio/packages/pwa-buildpack/bin/buildpack create-project scaffold-test-1 --template "venia-concept" --name "scaffold-test-1" --author "test123 [email protected]" --backend-url "" --braintree-token "" --npm-client "yarn"
cd scaffold-test-1
yarn install (probably not needed)
./node_modules/webpack-cli/bin/cli.js --no-progress --env.mode development

[fooman]

@NandiniJivainfotech123 Thanks for checking. As this still reproduces for me I wonder what differences there may be.

I did note in your output the Experimental Warning which I don't get. So I tested with various node versions
v14.12.0
v12.13.1
v10.18.1
on Macos and they all produce the same error.

❯ ./node_modules/webpack-cli/bin/cli.js --no-progress --env.mode development
Emitting no ServiceWorker in development mode.
/Users/kristof/Projects/__OpenSource-Contributions/pwa-temp/scaffold-test-1/node_modules/@magento/pwa-buildpack/node_modules/@pmmmwh/react-refresh-webpack-plugin/lib/index.js:219
                  throw createError(
                  ^

Error: [React Refresh] Hot Module Replacement (HMR) is not enabled! React Refresh requires HMR to function properly.
    at createError (/Users/kristof/Projects/__OpenSource-Contributions/pwa-temp/scaffold-test-1/node_modules/@magento/pwa-buildpack/node_modules/@pmmmwh/react-refresh-webpack-plugin/lib/utils/createError.js:7:10)
    at compilation.hooks.normalModuleLoader.tap (/Users/kristof/Projects/__OpenSource-Contributions/pwa-temp/scaffold-test-1/node_modules/@magento/pwa-buildpack/node_modules/@pmmmwh/react-refresh-webpack-plugin/lib/index.js:219:25)
    at SyncHook.eval [as call] (eval at create (/Users/kristof/Projects/__OpenSource-Contributions/pwa-temp/scaffold-test-1/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:15:1)
    at SyncHook.lazyCompileHook (/Users/kristof/Projects/__OpenSource-Contributions/pwa-temp/scaffold-test-1/node_modules/tapable/lib/Hook.js:154:20)
    at NormalModule.createLoaderContext (/Users/kristof/Projects/__OpenSource-Contributions/pwa-temp/scaffold-test-1/node_modules/webpack/lib/NormalModule.js:233:40)
    at NormalModule.doBuild (/Users/kristof/Projects/__OpenSource-Contributions/pwa-temp/scaffold-test-1/node_modules/webpack/lib/NormalModule.js:285:30)
    at NormalModule.build (/Users/kristof/Projects/__OpenSource-Contributions/pwa-temp/scaffold-test-1/node_modules/webpack/lib/NormalModule.js:438:15)
    at Compilation.buildModule (/Users/kristof/Projects/__OpenSource-Contributions/pwa-temp/scaffold-test-1/node_modules/webpack/lib/Compilation.js:702:10)
    at factory.create (/Users/kristof/Projects/__OpenSource-Contributions/pwa-temp/scaffold-test-1/node_modules/webpack/lib/Compilation.js:949:14)
    at factory (/Users/kristof/Projects/__OpenSource-Contributions/pwa-temp/scaffold-test-1/node_modules/webpack/lib/NormalModuleFactory.js:409:6)
    at hooks.afterResolve.callAsync (/Users/kristof/Projects/__OpenSource-Contributions/pwa-temp/scaffold-test-1/node_modules/webpack/lib/NormalModuleFactory.js:155:13)
    at AsyncSeriesWaterfallHook.eval [as callAsync] (eval at create (/Users/kristof/Projects/__OpenSource-Contributions/pwa-temp/scaffold-test-1/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:18:1)
    at AsyncSeriesWaterfallHook.lazyCompileHook (/Users/kristof/Projects/__OpenSource-Contributions/pwa-temp/scaffold-test-1/node_modules/tapable/lib/Hook.js:154:20)
    at resolver (/Users/kristof/Projects/__OpenSource-Contributions/pwa-temp/scaffold-test-1/node_modules/webpack/lib/NormalModuleFactory.js:138:29)
    at process.nextTick (/Users/kristof/Projects/__OpenSource-Contributions/pwa-temp/scaffold-test-1/node_modules/webpack/lib/NormalModuleFactory.js:346:9)
    at process._tickCallback (internal/process/next_tick.js:61:11)

Really not sure what other info I can provide at this stage.

Tested with commit
commit 5a1f0347f0913176c7e4aa0f3b2f9a2bc1e70aea (HEAD -> develop, origin/develop, origin/HEAD)

[papiliond]

I think the ReactRefreshWebpackPlugin should only be included when running the dev server. In case I want to make a development build with webpack --no-progress --env.mode development, I don't necessarily want to hot reload.