React useState 未定义与 webpack-dev-server 一起使用答案

【问题标题】：React useState is undefined working with webpack-dev-serverReact useState 未定义与 webpack-dev-server 一起使用
【发布时间】：2019-01-05 07:27:03
【问题描述】：

我正在使用 React hooks 和 webpack-dev-server 构建一个简单的 react 应用程序。我想启用热重载。

运行webpack-dev-server --mode development，我得到一个错误：TypeError: Object(...) is not a function，它在编译的以下行抱怨。

var _useState = Object(react__WEBPACK_IMPORTED_MODULE_0__["useState"])(0),

这是我的代码 webpack.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: './src/index.jsx',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx'],
    mainFiles: ['index']
  },
  output: {
    path: path.join(__dirname, 'public'),
    publicPath: '/',
    filename: 'bundle.js'
  },
  plugins: [new webpack.HotModuleReplacementPlugin()],
  devServer: {
    contentBase: './public',
    hot: true
  }
};

.babelrc

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "react-hot-loader/babel"
  ]
}

Body.jsx

import React, { useState } from 'react';

const Body = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{`You clicked ${count} times`}</p>
      <button type="button" onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
};

export default Body;

App.jsx

import React from 'react';
/* eslint-disable import/no-extraneous-dependencies */
import { hot } from 'react-hot-loader/root';
import { setConfig } from 'react-hot-loader';

import Body from './Body';

const App = () => (
  <div className="App">
    <Body />
  </div>
);

export default hot(App);

index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
ReactDOM.render(<App />, document.getElementById('app'));

对于依赖项，我使用版本 16.7.0-alpha.2 的 react 和 react-dom。 react-hot-loader 是 4.6.3 版

【问题讨论】：

标签： javascript reactjs webpack-dev-server react-hooks

【解决方案1】：

遗憾的是 react-hot-loader 与钩子不兼容，至少据我所知以及他们的问题 github 页面。 https://github.com/gaearon/react-hot-loader/issues/1088

【讨论】：