React useState не определен при работе с webpack-dev-server

Я создаю простое приложение для реагирования с помощью перехватчиков React и webpack-dev-server. Я хочу включить горячую перезагрузку.

Запустив 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'));

Для зависимостей я использую react и react-dom с версией 16.7.0-alpha.2. react-hot-loader - версия 4.6.3


reactjs javascript react-hooks webpack-dev-server
person Ryuta Udo    schedule 05.01.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

К сожалению, react-hot-loader несовместим с хуками, по крайней мере, насколько мне известно и их странице проблемы на github. https://github.com/gaearon/react-hot-loader/issues/1088

person Lukáš Gibo Vaic    schedule 05.01.2019