CODEWITHSUNDEEP
javascriptnode.jsreactjs
MrTaro
MrTaro

Reputation: 23

TypeError: react__WEBPACK_IMPORTED_MODULE_0___default.a.createContext is not a function (react frontend, node backend)

So I am trying to localhost a project but I get an error when opening localhost. I provided what the console states, what I see when on localhost:3000 and the packageJson from both the frontend and the backend. I figured It could have to do with a wrong version that's making it break since I have seen similar posts but I'm unsure. I'm happy to provide more information if necessary.

This is what the console shows:

[0] Find the server at: http://localhost:3001/
[0] Connected to Redis
[0] Connected to MongoDB
[1] [1] ℹ ｢wds｣: Project is running at http://192.168.2.103/
[1] [1] ℹ ｢wds｣: webpack output is served from 
[1] [1] ℹ ｢wds｣: Content not from webpack is served from /Users/taroholtappels/Desktop/rustwebsite-master/client/public
[1] [1] ℹ ｢wds｣: 404s will fallback to /
[1] [1] Starting the development server...
[1] [1] 
[0] Updated prices!
[1] [1] Compiled with warnings.

This is what I see when opening localhost 3000

TypeError: react__WEBPACK_IMPORTED_MODULE_0___default.a.createContext is not a function

Module../node_modules/react-notifications/node_modules/react-transition-group/esm/TransitionGroupContext.js
node_modules/react-notifications/node_modules/react-transition-group/esm/TransitionGroupContext.js:2

  1 | import React from 'react';
> 2 | export default React.createContext(null);

here is the PackageJson from the frontend:

  "private": true,
  "proxy": "http://localhost:3001",
  "dependencies": {
    "body-parser": "^1.17.1",
    "bootstrap": "^3.3.7",
    "express-jwt": "^5.3.0",
    "express-session": "^1.15.2",
    "font-awesome": "^4.7.0",
    "gsap": "^1.20.6",
    "history": "^4.6.1",
    "immutability-helper": "^2.2.0",
    "jsonwebtoken": "^7.4.0",
    "jwt-decode": "^2.2.0",
    "moment": "^2.18.1",
    "passport": "^0.3.2",
    "passport-steam": "^1.0.8",
    "react": "^15.6.2",
    "react-addons-css-transition-group": "^15.5.2",
    "react-bootstrap": "^0.31.0",
    "react-circular-progressbar": "^0.1.4",
    "react-countup": "^2.1.1",
    "react-dom": "^15.6.2",
    "react-fontawesome": "^1.6.1",
    "react-lightweight-tooltip": "0.0.4",
    "react-modal": "^1.7.7",
    "react-notifications": "^1.3.0",
    "react-progressbar.js": "^0.2.0",
    "react-redux": "^5.0.4",
    "react-router": "^4.1.1",
    "react-router-bootstrap": "^0.24.2",
    "react-router-dom": "^4.1.1",
    "react-router-redux": "^5.0.0-alpha.6",
    "redux": "^3.6.0",
    "redux-logger": "^3.0.6",
    "redux-persist": "^4.8.0",
    "redux-thunk": "^2.2.0",
    "semantic-ui-css": "^2.2.10",
    "semantic-ui-react": "^0.70.0",
    "socket.io": "^1.7.3",
    "socket.io-client": "^2.0.1",
    "socketio-jwt": "^4.5.0"
  },
  "devDependencies": {
    "babel-plugin-add-module-exports": "^1.0.2",
    "babel-plugin-react-transform": "^3.0.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-react-display-name": "^6.23.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-plugin-typecheck": "^3.9.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-register": "^6.24.1",
    "concurrently": "^3.4.0",
    "node-sass": "^4.5.2",
    "react-scripts": "^3.4.1"

and the Packagejson from the backend

  "private": true,
  "dependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-plugin-add-module-exports": "^1.0.2",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-plugin-typecheck": "^3.9.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-register": "^6.24.1",
    "bluebird": "^3.5.0",
    "body-parser": "^1.17.1",
    "connect-mongo": "^3.2.0",
    "express": "^4.17.1",
    "express-session": "^1.15.2",
    "jsonwebtoken": "^8.5.1",
    "jwt-decode": "^2.2.0",
    "moment": "^2.18.1",
    "mongoose": "^5.9.10",
    "mongoose-auto-increment": "^5.0.1",
    "node-fetch": "^2.6.0",
    "passport": "^0.4.1",
    "passport-steam": "^1.0.8",
    "path": "^0.12.7",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-redux": "^5.1.2",
    "react-transition-group": "^1.2.1",
    "redis": "^3.0.2",
    "redis-server": "^1.2.2",
    "request": "^2.81.0",
    "socket.io": "^2.0.1",
    "socketio-jwt": "^4.5.0",
    "steam-totp": "^2.1.1",
    "steam-tradeoffer-manager": "^2.10.1",
    "steam-user": "^4.12.4",
    "steamcommunity": "^3.40.1"

Upvotes: 2

Views: 1272

Answers (1)

Jon Baltz
Jon Baltz

Reputation: 232

The most current version of react contexts isn't available until version 16.3 while you are using version 15 (on the frontend). You should update to version 16.3/greater or use the legacy version documentation if you cannot update. https://reactjs.org/docs/legacy-context.html

Upvotes: 1

Related Questions