_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.

score 161 · Accepted Answer · answered Feb 04 '19 at 17:57

161

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

answered Feb 04 '19 at 17:57

Shubham Khatri

211,155
45
305
318

1

yup, thatnk, change to old version react-redux help! – Drop Feb 04 '19 at 18:06
1

If its possible to upgrade react, i will advise you to do that, since there are a number of good features available in the newer versions – Shubham Khatri Feb 04 '19 at 18:08
2

yup, but maybe later, for test task 15 version be enough :) – Drop Feb 04 '19 at 18:31
Cool, glad to have helped though – Shubham Khatri Feb 04 '19 at 18:37
Hi @ShubhamKhatri I am getting this error when I am using react-i18n library. What can be the issue? – Ashh Sep 18 '19 at 12:44
@Ashh, can you share more details on its version. and whether its react-18next or react-i18n – Shubham Khatri Sep 18 '19 at 17:43
FFS why do they have to change things all the time??!??? its impossible to work with – Oliver Watkins May 27 '20 at 12:01
In my case, it worked with react & react-dom version 16.2 too – Kewal Shah May 28 '20 at 14:12
This fixes error related to using "react-transition-group v4.4.1" with "react v16.0.0" and "react-dom v16.0.0" as well. Running npm update fixed the issue for me. Thank you. – Webalation Nov 06 '20 at 12:45

Kamesh Kumar Singh · Answer 2 · 2020-07-01T16:52:51.580

6

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.

edited Jul 01 '20 at 16:52

answered Jun 01 '20 at 09:17

Kamesh Kumar Singh

491
6
10

score 1 · Answer 3 · edited Jun 08 '20 at 16:13

1

Whenever you git pull or use someone's else code, try updating your package to the latest version using:

npm update

always check the React/React-dom versions, especially when you have imported project while following any online course !!

Also, if you don't want to update all packages by npm update just do :

npm i react@latest react-dom@latest

I Hope this helps !!

edited Jun 08 '20 at 16:13

William Brochensque junior

1,422
18
30
38

answered Jun 08 '20 at 14:49

Ashutosh Tiwari

503
3
13

score 1 · Answer 4 · answered Oct 27 '20 at 13:23

1

Try installing with this version: yarn add react-redux@5.0.5

answered Oct 27 '20 at 13:23

user14529064

11
1

score 0 · Answer 5 · answered Jun 30 '20 at 14:20

0

i had this error

_react.default.createContext is not a function

then I updated the react and react-dom to the latest version by using

npm update react react-dom

and this solved my problem .

answered Jun 30 '20 at 14:20

Rohan Devaki

898
4
12

score 0 · Answer 6 · answered Jul 14 '20 at 22:37

0

for me it was a version conflict , i updated npm first then i ran npm install, try fist :

npm i npm@latest -g

then

npm install

answered Jul 14 '20 at 22:37

Djafer Abdelhadi

111
1
3

score 0 · Answer 7 · edited Mar 12 '21 at 09:23

0

Upgrading react-dom package worked for me - try either of these (depending on your package manager)

npm update react react-dom

OR

yarn upgrade react react-dom

edited Mar 12 '21 at 09:23

Rachel Gallen

25,819
19
69
75

answered Mar 12 '21 at 08:18

Jayesh Mungara

1
1

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

7 Answers7

OR

Linked