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.
11 Answers 11
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 Comments
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
Comments
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.
Comments
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)
1 Comment
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 !!
Comments
Try installing with this version: yarn add [email protected]
Comments
Would happen if you use framer motion or some client hooks too. Just add use client; and thats it
Comments
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 .
Comments
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
Comments
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
Comments
Well I tried all these methods and it worked but I didnt know until i restarted my pc then realized it was all workin fine again.