_react.default.createContext 不是使用 react-redux 时的函数 [英] _react.default.createContext is not a function when using react-redux

问题描述

我在入口点添加组件时出现问题，这里立即弹出这个错误，如何解决?我也尝试只添加 Main 组件，但无论如何我都接受了那个错误，在 main.jsx 中只是使用 render 方法返回hello world"

_react.default.createContext 不是函数

//App.jsx从反应"导入反应；从'react-dom'导入{渲染}；从'react-redux'导入{提供者}；从'react-router-dom'导入{ BrowserRouter}；导入 'react-select/dist/react-select.css';从 './Data/store/configureStore' 导入 configureStore；从 "./Templates/Main/Main" 导入 Main；const store = configureStore();使成为(<div><提供者商店={商店}><浏览器路由器><主要/></BrowserRouter></提供者>

,document.getElementById('app-root'));

Webpack 配置

'use strict';var path = require('path');var webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');模块.出口 = {开发工具:'评估源地图'，入口: ['webpack-hot-middleware/client?reload=true',path.join(__dirname, 'src/app.jsx')],解决: {根: [path.resolve(__dirname, "src"),],扩展名:['', '.js', '.jsx', '.css']},输出: {路径:path.join(__dirname, '/public/'),文件名:'[名称].js'，公共路径:'/'},插件: [新的 HtmlWebpackPlugin({模板:'src/index.tpl.html'，注入:'身体'，文件名:'index.html'}),新的 webpack.optimize.OccurenceOrderPlugin(),新的 webpack.HotModuleReplacementPlugin(),新的 webpack.NoErrorsPlugin(),新的 webpack.DefinePlugin({'process.env.NODE_ENV': JSON.stringify('development')})],模块: {装载机:[{测试:/\.jsx?$/,排除:/node_modules/，装载机:'通天塔'，询问: {预设:['es2015'，'反应']}}, {测试:/\.css$/,loader: 'style!css'}]}};

和依赖项

 "react": "^15.6.2","react-addons-update": "^15.6.2","react-bootstrap": "^1.0.0-beta.5","react-dom": "^15.6.2","反应头盔": "^5.2.0","react-redux": "^6.0.0",反应路由器":^ 4.3.1"，"react-router-dom": "^4.3.1",反应选择":^1.0.0-beta13"，"redux": "^4.0.1","redux-thunk": "^2.3.0","续集": "^3.20.0",sqlite3":^4.0.6"

Google 建议升级到 ract 16 版本，但我认为这不是旧版本的问题.

解决方案

react-redux v6.0.0 使用 React 提供的新上下文 api，为了使其工作，需要将 react-redux 降级到 v5.xx 或 升级 react 和 react-dom 到 v16.4 或更高版本

如果你使用的是纱线，你可以运行

yarn upgrade react react-dom

否则你可以使用 npm 运行

npm update react react-dom

您也可以在 package.json 中手动更改版本并运行 yarn install 或 npm install

I have a problem when adding components to the entry point, this error immediately pops up here, how to fix it? I also try add only Main component but anyway i take that error, in main.jsx just class with render method return "hello world"

_react.default.createContext is not a function

// App.jsx

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';

import 'react-select/dist/react-select.css';

import configureStore from './Data/store/configureStore';
import Main from "./Templates/Main/Main";

const store = configureStore();
render(
    <div>
        <Provider store={store}>
            <BrowserRouter>
                <Main/>
            </BrowserRouter>
        </Provider>
    </div>,
    document.getElementById('app-root')
);

Webpack config

'use strict';

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  devtool: 'eval-source-map',
  entry: [
    'webpack-hot-middleware/client?reload=true',
    path.join(__dirname, 'src/app.jsx')
  ],
  resolve: {
    root: [
      path.resolve(__dirname, "src"),
    ],
    extensions: ['', '.js', '.jsx', '.css']
  },
  output: {
    path: path.join(__dirname, '/public/'),
    filename: '[name].js',
    publicPath: '/'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.tpl.html',
      inject: 'body',
      filename: 'index.html'
    }),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development')
    })
  ],
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['es2015', 'react']
      }
    }, {
      test: /\.css$/,
      loader: 'style!css'
    }]
  }
};

and dependencies

    "react": "^15.6.2",
    "react-addons-update": "^15.6.2",
    "react-bootstrap": "^1.0.0-beta.5",
    "react-dom": "^15.6.2",
    "react-helmet": "^5.2.0",
    "react-redux": "^6.0.0",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "react-select": "^1.0.0-beta13",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0",
    "sequelize": "^3.20.0",
    "sqlite3": "^4.0.6"

Google advises to upgrade to version 16 of the ract, but I do not think that this is the problem of the old version.

解决方案

react-redux v6.0.0 uses the new context api provided by React and in order for it work, either you need to downgrade react-redux to v5.x.x or upgrade react and react-dom to v16.4 or above

If you are using yarn, you can run

yarn upgrade react react-dom

else with npm you can run

npm update react react-dom

You could also change the versions manually in package.json and run yarn install or npm install

这篇关于_react.default.createContext 不是使用 react-redux 时的函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！