使用react-hot-loader反应警告：

Question

I am getting errors like below

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

And

Uncaught TypeError: Cannot read property 'unmountComponent' of null

Trying to use react-hot-loader with my basic setup.

webpack.config.js

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const ExtractTextPlugin = require("extract-text-webpack-plugin")

const context = path.resolve(__dirname, "src")

module.exports = {
  context,
  entry: [
    "react-hot-loader/patch",
    "./js/index.js"
  ],
  output: {
    path: path.resolve(__dirname, "build/js"),
    filename: "index.js"
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        loader: "babel-loader",
        options: {
          plugins: [
            [
              "react-css-modules",
              {
                context
              }
            ]
          ]
        }
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: [
            {
              loader: "css-loader",
              options: {
                modules: true,
                importLoaders: 1,
                localIdentName: "[path]___[name]__[local]___[hash:base64:5]",
                sourceMap: true
              }
            },
            'postcss-loader'
          ]
        })
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html",
      filename: "index.html",
      inject: "body"
    }),
    new ExtractTextPlugin("css/app.css")
  ],
  devServer: {
    contentBase: path.resolve(__dirname, "src"),
    historyApiFallback: true
  },
  devtool: "eval"
}

index.js

import ReactDOM from "react-dom"
import React from "react"
import {AppContainer} from "react-hot-loader"
import App from "./App.jsx"
import "../css/global.css"

const render = Component => {
  ReactDOM.render(
    <AppContainer>
      <Component />
    </AppContainer>,
    document.getElementById("app")
  )
}

render(<App />)

if (module.hot) {
  module.hot.accept("./App.jsx", () => render(<App />))
}

App.jsx

Even when I just do

export default () => <h1>Hello</h1>

I get error

I am doing a more complete class tho

import React from 'react'
import {createStore, applyMiddleware} from "redux"
import {Provider} from "react-redux"
import createHistory from "history/createBrowserHistory"
import {Route, Switch} from "react-router"
import {NavLink} from "react-router-dom"
import {ConnectedRouter, routerMiddleware} from "react-router-redux"
import {
  Layout,
  Panel,
  AppBar,
} from "react-toolbox"
import Navigation from "react-toolbox/lib/navigation"

import financeApp from "./reducers"
import SbpInvestmentsIndex from "./sbpInvestments/SbpInvestmentsIndex.jsx"
import Http404 from "./Http404.jsx"
import "./app.css"

const history = createHistory()
const historyMiddleware = routerMiddleware(history)
const store = createStore(
  financeApp,
  applyMiddleware(historyMiddleware)
)

export default class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      drawerActive: false
    }

    this.toggleDrawerActive = this.toggleDrawerActive.bind(this)
  }

  toggleDrawerActive() {
    this.setState({
      drawerActive: !this.state.drawerActive
    })
  }

  render() {
    return (
      <Provider store={store}>
        <ConnectedRouter history={history}>
          <Layout>
            <Panel>
              <AppBar title="Personal Finance">
                <Navigation type="horizontal">
                  <NavLink to="/" styleName="app-link">
                    SBP Investments
                  </NavLink>
                </Navigation>
              </AppBar>

              <Switch>
                <Route exact path="/" component={SbpInvestmentsIndex} />
                <Route component={Http404} />
              </Switch>
            </Panel>
          </Layout>
        </ConnectedRouter>
      </Provider>
    )
  }
}

Whats wrong here? Code on Github

Answer 1

Inside render() , you are trying to render Component , which has already been instantiated ( <... /> ) before the function call.

Instead, pass the Component itself into render() :

render(App)

if (module.hot) {
  module.hot.accept("./App.jsx", () => render(App))
}