Error on reloading page in the initial next.js installation

[RobertB4]

Describe the bug
I get the following error shown in the console when I reload a page in firefox:
The connection to http://localhost:3000/_next/webpack-hmr was interrupted while the page was loading.

This seems to happen even with a new next.js installation.

To Reproduce

• Create a new folder mkdir nextjs-test
• navigate to the folder and install dependencies npm install --save next react react-dom
• add the dev script to package.json "dev": "next"
• create ./pages/index.js and copy the following code:
  export default () => <div>Welcome to next.js!</div>
• npm run dev and open localhost:3000 in firefox.
• Reload the browser and open the console. The error should show up in your console.

Expected behavior
I expect no error since I only followed the basic setup.

System information

• OS: macOS
• Browser: firefox 60.0.1 (no error when using chrome)
• Version of Next.js: 6.0.3

[tranvansang]

I got another error

Error in ./pages/index.js
Module build failed: Error: Plugin/Preset files are not allowed to export objects, only functions. In /home/transang/carstay/test/node_modules/babel-preset-react-app/index.js
at createDescriptor (/home/transang/carstay/test/njs/node_modules/@babel/core/lib/config/config-descriptors.js:179:11)
at /home/transang/carstay/test/njs/node_modules/@babel/core/lib/config/config-descriptors.js:104:12
at Array.map ()
at createDescriptors (/home/transang/carstay/test/njs/node_modules/@babel/core/lib/config/config-descriptors.js:103:27)
at createPresetDescriptors (/home/transang/carstay/test/njs/node_modules/@babel/core/lib/config/config-descriptors.js:95:10)
at /home/transang/carstay/test/njs/node_modules/@babel/core/lib/config/config-descriptors.js:67:19
at presets (/home/transang/carstay/test/njs/node_modules/@babel/core/lib/config/config-descriptors.js:57:25)
at mergeChainOpts (/home/transang/carstay/test/njs/node_modules/@babel/core/lib/config/config-chain.js:298:68)
at /home/transang/carstay/test/njs/node_modules/@babel/core/lib/config/config-chain.js:251:7
at buildRootChain (/home/transang/carstay/test/njs/node_modules/@babel/core/lib/config/config-chain.js:85:20)
at loadPrivatePartialConfig (/home/transang/carstay/test/njs/node_modules/@babel/core/lib/config/partial.js:41:53)
at Object.loadPartialConfig (/home/transang/carstay/test/njs/node_modules/@babel/core/lib/config/partial.js:66:16)
at Object. (/home/transang/carstay/test/njs/node_modules/babel-loader/lib/index.js:82:26)
at Generator.next ()
at step (/home/transang/carstay/test/njs/node_modules/babel-loader/lib/index.js:3:221)
at _next (/home/transang/carstay/test/njs/node_modules/babel-loader/lib/index.js:3:409)

[timneutkens]

Sounds like you have a babelrc in a directory above the next.js app, next itself doesn’t use babel-preset-react-app, that’s a create-React-app preset

[anshumanv]

Hey @RobertB4 did you find a workaround?

[timneutkens]

I'm going to close this as it's probably outdated and fixed already if there was an issue before.

[StephD]

Hello,

October 2019 here, I still have this error with a lightly different message :
The connection to http://localhost:3000/_next/webpack-hmr?page=/ was interrupted while the page was loading.

Anyway to clean a bit the console in dev mod?

Thanks

[jleei]

Hello,

October 2019 here, I still have this error with a lightly different message :
The connection to http://localhost:3000/_next/webpack-hmr?page=/ was interrupted while the page was loading.

Anyway to clean a bit the console in dev mod?

Thanks

Bump, same problem here. Next 9.1.1

[Nicolas-Menettrier]

Same, only with firefox.

[fveauvy]

Same problem, only with Firefox too

[adam-beck]

@timneutkens can this issue be reopened? Or should we create a new one, separate for Firefox issues?

[wesbos]

Getting this on firefox too. Good news is that soon firefox will be able to negate things from the filter with "-webpack" - but not yet :(

[wesbos]

I've created a new issue for this:

#9776

[bfunc]

having similar error
GET http://localhost:3000/_next/webpack-hmr?page=/
(canceled) | eventsource

hot reload do not works (no updating triangle)

issue happens from version 10.0.5 and greater, versions from 10.0.0 to 10.0.4 are working ok, I was able to downgrade and work normally

it is strange but looks like it is only browsers (tested Chrome and Firefox on two diffrent machines) cannot perfom request, commands like wget or curl do receive data

[edikabe]

having similar error
GET http://localhost:3000/_next/webpack-hmr?page=/
(canceled) | eventsource

hot reload do not works (no updating triangle)

issue happens from version 10.0.5 and greater, versions from 10.0.0 to 10.0.4 are working ok, I was able to downgrade and work normally

it is strange but looks like it is only browsers (tested Chrome and Firefox on two diffrent machines) cannot perfom request, commands like wget or curl do receive data

Hey bfunc I had similar issue and removing an old registered service-worker solved my problem, please take a look --> #9776 (comment)

[ShahriarKh]

I resolved this by removing the assetPrefix from the config file.

//next.config.js

module.exports = withOptimizedImages({
   assetPrefix: ".", //remove this when in development mode
});

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.