_react.default.createContext is not a function when using react-redux

Question

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.

Answer 1

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

Answer 2

Got the issue fixed by updating the react and react-dom

npm update react react-dom 

And ofcourse closing the server and restarting by npm start again.