`Element type is invalid` passing to v3 version

[ciaoben]

Description

I am upgrading to react-hot-loader@next

  const render = Component => {
    ReactDOM.render(
      <HotContainer>
        <Provider store={store}>
          <Router history={history}>{Component}</Router>
        </Provider>
      </HotContainer>,
      document.getElementById('app')
    )
  }

  render(routesToRender)

   if (module.hot) {
     module.hot.accept('./index.js', () => {
       render(
         <Provider store={store}>
           <Router history={history}>{routesToRender}</Router>
         </Provider>
       )
     })
   }

Expected behavior

I expect to render my <Provider> and its children

Actual behavior

It raises this:
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

Environment

React Hot Loader version: react-hot-loader@next
react-router v2.8.1

[robwierzbowski]

I have the same error on a minimal project using:

"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-hot-loader": "^3.0.0-beta.7"

The stack trace leads to the HotContainer component, double checked everything works when commenting it out.

Checked that this error throws on both dev and prod versions.

[robwierzbowski]

OK, I tracked down the issue. The new docs are for master, BUT it seems the beta-7 release I get from npm install --save react-hot-loader@next installs a version with the earlier API:

package.json:

  "dependencies": {
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-hot-loader": "^3.0.0-beta.7"
  },

Installed module:

---

@ciaoben: Using the <AppContainer> element instead of <HotContainer> fixed my issue.

[ciaoben]

@robwierzbowski thanks, now the error is gone. But every chance triggers a full reload.. 😖

[robwierzbowski]

Did you add the Babel preset, entry file, and wrapper code?

[ciaoben]

@robwierzbowski

Thanks for the help, here my situation:

// webpack.config.js
  entry: ['react-hot-loader/patch', './src/index.js'],
 ....
 use: [{ loader: 'babel-loader', options: { plugins: ['lodash'] } }]

// package.json
     "babel": {
         "presets": [
            [
                "es2015",
                {
                    "modules": false
                }
            ],
             "react",
             "stage-2"
         ],
       "plugins": ["lodash", "recharts", "react-hot-loader/babel"]
     },

I suspect that has something to do on react-router v2 and how I use it... If notice something wrong in my config please tell me, anyway I think this specific issue can be closed!

[robwierzbowski]

In your configuration here:

if (module.hot) {
     module.hot.accept('./index.js', () => {
       render(
         <Provider store={store}>
           <Router history={history}>{routesToRender}</Router>
         </Provider>
       )
     })
   }

You're not wrapping with the <AppContainer>. That might have something to do with it.

The suggested pattern uses the container in both the render and the reloader:

const render = (Component) => {
  ReactDOM.render(
    <AppContainer>
      <Component />
    </AppContainer>,
    document.getElementById('root'),
  );
};

render(App);

if (module.hot) {
  module.hot.accept('./components/App', () => { render(App); });
}

[robwierzbowski]

The closing of this issue could be updates to the mismatched element name / documentation. Let's make sure the maintainers see so other people don't run into the same issue 🙂

[gregberge]

Documentation issue is now fixed by 00404dd

No release since React 16, so it is probably bugged. I need to try and to fix it.

[gregberge]

React 16 is not yet compatible, you can follow this PR #658

[gregberge]

I close this issue because it was related to HotContainer / AppContainer and it is now solved.