83

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.

10 Answers 10

178

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

9
  • 2
    yup, thatnk, change to old version react-redux help!
    – Drop
    Commented Feb 4, 2019 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 Commented Feb 4, 2019 at 18:08
  • 2
    yup, but maybe later, for test task 15 version be enough :)
    – Drop
    Commented Feb 4, 2019 at 18:31
  • Cool, glad to have helped though Commented Feb 4, 2019 at 18:37
  • Hi @ShubhamKhatri I am getting this error when I am using react-i18n library. What can be the issue?
    – Ashh
    Commented Sep 18, 2019 at 12:44
52

I got the same issue but updating react and react-dom didn't help. I was using NextJS 13 with react-hook-form and the problem was that I forgot to put "use client" on the top of the page. This error occurred because you can't use hooks in server components.

ex:

"use client"; // top to the file

Extra info: Next.js Error: Hooks are not Allowed in Server Components

0
7

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.

0
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 !!

1

Try installing with this version: yarn add [email protected]

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 .

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
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
0
0

Would happen if you use framer motion or some client hooks too. Just add use client; and thats it

0

Error: (0 , react__WEBPACK_IMPORTED_MODULE_1__.createContext) is not a function

Solution: At the beginning of the file type "use client" for the client-side environment-related files (When the component interacts with client-side)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.