Javascript React useState未定义使用webpack开发服务器_Javascript_Reactjs_Webpack Dev Server_React Hooks

Javascript React useState未定义使用webpack开发服务器

javascript reactjs

Javascript React useState未定义使用webpack开发服务器,javascript,reactjs,webpack-dev-server,react-hooks,Javascript,Reactjs,Webpack Dev Server,React Hooks,我正在用react钩子和webpack开发服务器构建一个简单的react应用程序。我想启用热重新加载运行webpack dev server--mode development，我得到一个错误：TypeError:Object（…）不是函数，它在编译的下面一行中抱怨 var _useState = Object(react__WEBPACK_IMPORTED_MODULE_0__["useState"])(0), 这是我的密码 webpack.config.js const path = r

我正在用react钩子和webpack开发服务器构建一个简单的react应用程序。我想启用热重新加载

运行

webpack dev server--mode development

，我得到一个错误：

TypeError:Object（…）不是函数，它在编译的下面一行中抱怨
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;

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);

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

index.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;

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);

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

从“React”导入React；
从“react dom”导入react dom；
从“./components/App”导入应用程序；
ReactDOM.render（，document.getElementById（'app'））；

对于依赖项，我在版本16.7.0-alpha.2中使用react和react dom。
react hot loader是4.6.3版遗憾的是，react hot loader与钩子不兼容，至少就我所知及其发布的github页面而言。