Parcel: Parcel 2: React HMR error when changes occur

[Cristy94]

🐛 bug report

🎛 Configuration (.babelrc, package.json, cli command)

Command: parcel src/index.html

package.json:

{  
  ...
  "react-hot-loader": "^4.12.20",
  "react-dom": "npm:@hot-loader/react-dom@^16.13.0",
  "parcel": "^2.0.0-alpha.3.2",
  "app": "dist/index.html",
  "source": true,
  "targets": {
    "app": {
      "publicUrl": "./"
    }
  }
}

.babelrc:

{
    "presets": ["@babel/preset-typescript", "@babel/preset-react", "@babel/preset-env"],
    "plugins": [
      [
        "@babel/plugin-proposal-class-properties",
        {
          "loose": true
        }
      ]
    ]
  }

🤔 Expected Behavior

HMR works

😯 Current Behavior

When I make a change and save the file, this error is thrown:

version-3.e9b82067.js:84 Uncaught TypeError: Cannot read property '../../../../node_modules/@parcel/transformer-react-refresh-wrap/lib/helpers/helpers.js' of undefined
    at Function.resolve (version-3.e9b82067.js:84)
    at localRequire (version-3.e9b82067.js:80)
    at Object.eval (eval at hmrApply (HMRRuntime.js:170), <anonymous>:5:15)
    at newRequire (version-3.e9b82067.js:68)
    at hmrAcceptRun (HMRRuntime.js:232)
    at WebSocket.ws.onmessage (HMRRuntime.js:69)

💁 Possible Solution

No idea.

🔦 Context

I am trying to enable react-hot-loader in a React + TypeScript project.

💻 Code Sample

import { hot } from 'react-hot-loader';
const App = () => <div>Hello!</div>;
export default hot(module)(App);

// I also tried adding this
if ((module as any).hot) {
    (module as any).hot.accept();
}

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 2.0.0-alpha.3.2 |
| Node | 10.16|
| npm/Yarn | npm 6.9 |
| Operating | System Windows 10 |

[mischnic]

Please take a look at https://github.com/mischnic/parcel-example-react-refresh.

Don't use react-hot-loader anymore, React HMR just works.
(There is also some information here: https://github.com/parcel-bundler/parcel/issues/4146)

[Cristy94]

I removed it, but I get same error:

Also deleted node_modules and .parcel-cache and did a new npm install.

Do I have to use the nightly version?

LE: I get same error when using 2.0.0-nightly.157

[mischnic]

Can you please provide a minimal reproduction?

[Cristy94]

Can you please provide a minimal reproduction?

I have a pretty big project, so I will have to create a new project from scratch and hope it brakes, will take some time. I will try to do it tomorrow.

[Cristy94]

I was looking at the source code and saw this:

    function localRequire(x) {
      return newRequire(localRequire.resolve(x));
    }
    function resolve(x) {
      return modules[name][1][x] || x;
    }

And in this case modules[name][1] is undefined. Is it supposed to always be defined?
https://github.com/parcel-bundler/parcel/blob/e2ea84373758ef22da979bc7abaf9b8ca29a1f59/packages/packagers/js/src/prelude.js#L84

I find it a bit disappointing that such a big project as Parcel 2 is written in plain JavaScript and not TypeScript, could have preemptively fixed a lot of those potential issues I think.

The [1] value is indeed undefined, from the code I didn't see yet where it sets the [1] value:

Shouldn't the check be modules[name][1] && modules[name][1][x] || x; ?

The module name is "c8e8a8f9174824d330d92b2fd18f1b49" if it helps in any way, but I think it's just the file that I am changing to test the HMR.

Maybe here asset.deps can be undefined?
https://github.com/parcel-bundler/parcel/blob/d24e09a9797af41a9d2c6c733b1c6cf6671d60c7/packages/core/parcel-bundler/src/builtins/hmr-runtime.js#L155

[Cristy94]

Maybe related change?
https://github.com/parcel-bundler/parcel/pull/4311
https://github.com/parcel-bundler/parcel/commit/9007d6ac51a44cca44ff216ee103baca76be5504#diff-51504a00894cce5c79cfba5b8ae3c38eR181

[dsblv]

Hey everyone! I encountered similar error today. To reproduce my case:

1. Start a worker: let worker = new Worker("./Worker.js");
2. Make sure the worker code has imports: import * as d3Scale from "d3-scale";
3. Restart Parcel (!)

The error comes up every time you hit save, HMR does not work. Edited code isn't related to worker.

Tried the latest nightly "2.0.0-nightly.212" — still breaks.

[kidroca]

I have the same issue, created a new project just today, it started happening after I used React.lazy

And in this case modules[name][1] is undefined. Is it supposed to always be defined?

return modules[name][1][x] || x; 

modules[name][1] is undefined for me too

"parcel": "^2.0.0-alpha.3.2"

Sample code

Making changes inside Login would raise the above exception upon hot reload

import React, { Suspense, lazy } from 'react';
import { Route, Switch } from 'react-router';
import Loader from '../components/Loader';
import Launcher from './Launcher';

const Login = lazy(() => import('../screens/Login'));
const About = lazy(() => import('../screens/About'));

const Routes = () => (
    <Suspense fallback={<Loader />}>
        <Launcher />
        <Switch>
            <Route exact path="/" component={Login} />
            <Route exact path="/login" component={Login} />
            <Route path="/about" component={About} />
        </Switch>
    </Suspense>
);

export default Routes;

Making changes in the <Routes /> component itself does not raise the error
Swapping the dynamic imports and going with regulars at the top of the file did not help and the error still appears

[efeozazar]

I got the same error and don't have lazy loading configured. Problem occurs on every file I changed including the component that has route configuration. That problem is a big blocker for us hopefully it will be resolved soon.

[mischnic]

I have identified a bug where an asset in a child bundle is modified, e.g.

import React, { Suspense, lazy } from "react";

const Login = lazy(() => import("./Login"));
const App = () => {
    return <Suspense fallback={"Loading"}>
        asdasd
        <Login />
    </Suspense>;
};

export default App;

If someone has a project whose the output consists of only one bundle and still gets a Cannot read property 'node_modules/@parcel/transformer-react-refresh-wrap/lib/helpers/helpers.js' of undefined error, please post an example.

[mattlockyer]

@mischnic was there any resolution to the issue?

Using "parcel": "^2.0.0-alpha.3.2", and lazy / suspense in my routing.

If a lazy imported route is using any components from another file. The HMR fails when the file is saved.

Example:

// App.js
const Home = lazy(() => import('./routes/Home'))
<Router>
  <Home {...props} path="/" />
</Router>

// Home.js
import { SomeStyledFunctionalComponent } from './components'
export default function() {
  return <><SomeStyledFunctionalComponent /></>
}

Any changes to the file components.js fails with various import errors, specifically this one:

Cannot read property '../node_modules/@parcel/transformer-react-refresh-wrap/lib/helpers/helpers.js' of undefined

HOWEVER, if I import those components into App.js (not lazy loaded), even if I don't use them. There are no more errors and the HMR works beautifully. Kind of defeats the purpose of lazy loading though...

I hope this helps.

[mattlockyer]

Check out this issue in a boilerplate I made here: https://github.com/mattlockyer/react-parcel-chakra-emotion-bp

Here's the import in App.js that gets everything to work:
https://github.com/mattlockyer/react-parcel-chakra-emotion-bp/blob/356dbf9c5de8ce841b8d076cb286e18cf07f95c9/src/App.js#L8

If you comment that line and then edit some of the css in Styled.js which is imported in routes/Home.js which is lazy loaded into App.js you will get errors from this HMR issue.

[Cristy94]

I think a lot of issues (including this one) are solved in the nightly builds parcel@nightly. The alpha version is pretty old.

[mattlockyer]

I will upgrade to nightly. Thanks @Cristy94

[mattlockyer]

Still experiencing this issue in nightly. Made an update to my bp example here: https://github.com/mattlockyer/react-parcel-chakra-emotion-bp

npm i
npm start
// edit Styled.js -> see error in console

[mattlockyer]

I've found no way around this but to import the file Styled.js into App.js, or designate one of my routes as "not lazy" and import it normally, which kind of defeats the purpose of tree shaking etc...

This is just in order to get HMR to work in development. In a build all the bloat still goes to the main js bundle.

[mischnic]

Still experiencing this issue in nightly. Made an update to my bp example here: mattlockyer/react-parcel-chakra-emotion-bp

I'm editing the CSS in src/theme/Styled.js but I get no error and the page styling updates correctly?

[mattlockyer]

It's because I stopped import all routes as lazy routes and imported Login normally.

Since Login imports Styled everything works.

I left this comment here:
https://github.com/parcel-bundler/parcel/issues/4356#issuecomment-644498905

I ended up scaffolding the same scenario without using emotion styled components and it works. Quite the edge case...

Feel free to close the issue, I'll let you know if I can reproduce it again.

[elliottkember]

I have this same problem. I'm also using emotion styled (MUI) components and the lazy / Suspense code splitting pattern, and if my routes are made lazy, I can't edit styled components inside them.