React useState не определен при работе с webpack-dev-server - PullRequest
Новая
       10

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

0 голосов
/ 05 января 2019

Я создаю простое приложение реагирования с перехватчиками 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'));

Для зависимостей я использую реагировать и реагировать с версией 16.7.0-альфа.2. Реактивный загрузчик версии 4.6.3

1 Ответ

0 голосов
/ 05 января 2019

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

...