Reputation: 6027

"React.createContext is not a function" - but I am not using it

I am getting "React.createContext is not a function" error while running a react-native application. I searched for 'createContent' in the code, it doesn't exist.

Any idea what may be the reason for the error.

It is an iOS build of an app that is already running on android.

Here is my package.json file:

{
  "name": "newapp",
  "version": "0.0.2",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest --verbose --coverage",
    "test:update": "jest --verbose --coverage --updateSnapshot",
    "test:watch": "jest --verbose --watch",
    "coverage": "jest --verbose --coverage && xdg-open ./coverage/lcov-report/index.html",
    "lint": "npx eslint --fix ./src/*"
  },
  "dependencies": {
    "apollo-boost": "0.1.17",
    "axios": "^0.18.0",
    "babel": "^6.23.0",
    "buffer": "5.1.0",
    "cross-fetch": "^3.0.0",
    "enzyme": "^3.3.0",
    "graphql": "0.13.2",
    "graphql-tag": "2.10.0",
    "jasmine-react-helpers": "^0.2.2",
    "lodash": "4.17.5",
    "moment": "2.21.0",
    "query-string": "^6.1.0",
    "react": "16.2.0",
    "react-addons-test-utils": "^15.6.2",
    "react-apollo": "2.2.4",
    "react-dom": "^16.4.0",
    "react-native": "0.51.0",
    "react-native-elements": "0.19.0",
    "react-native-fabric": "^0.5.1",
    "react-native-htmlview": "^0.12.1",
    "react-native-link-preview": "^1.3.5",
    "react-native-login": "^0.0.1-alpha.2",
    "react-native-login-keycloak": "^1.0.2",
    "react-native-onesignal": "3.2.6",
    "react-native-push-notification": "https://github.com/Dhanraj-bidchat/react-native-push-notification.git",
    "react-native-sleek-loading-indicator": "^0.1.3",
    "react-native-spinkit": "^1.1.1",
    "react-native-svg": "6.2.2",
    "react-native-swipe-cards": "^0.1.1",
    "react-native-swiper": "1.5.13",
    "react-native-vector-icons": "4.5.0",
    "react-navigation": "1.5.6",
    "react-redux": "5.0.7",
    "redux": "^3.7.2",
    "redux-logger": "^3.0.6",
    "redux-persist": "5.9.1",
    "redux-thunk": "^2.2.0",
    "victory-native": "0.17.2",
    "whatwg-fetch": "2.0.4"
  },
  "devDependencies": {
    "babel-eslint": "^8.2.3",
    "babel-jest": "^22.4.4",
    "babel-plugin-dynamic-import-node": "^1.2.0",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react-native": "4.0.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "enzyme-to-json": "^3.3.4",
    "eslint": "^4.19.1",
    "eslint-config-standard": "^11.0.0",
    "eslint-plugin-import": "^2.12.0",
    "eslint-plugin-jest": "^21.17.0",
    "eslint-plugin-node": "^6.0.1",
    "eslint-plugin-only-warn": "^1.0.1",
    "eslint-plugin-promise": "^3.8.0",
    "eslint-plugin-react": "^7.9.1",
    "eslint-plugin-standard": "^3.1.0",
    "jest": "^23.5.0",
    "jest-resolve": "^23.0.0",
    "jest-serializer-enzyme": "^1.0.0",
    "react-native-mock-render": "^0.0.26",
    "react-test-renderer": "^16.3.2",
    "redux-mock-store": "^1.5.1",
    "sinon": "^5.0.10"
  },
  "jest": {
    "preset": "react-native",
    "setupFiles": [
      "./jest-setup.js"
    ],
    "snapshotSerializers": [
      "enzyme-to-json/serializer"
    ],
    "modulePaths": [
      "<rootDir>/src",
      "<rootDir>/node_modules"
    ],
    "transform": {
      "^.+\\.js$": "babel-jest",
      "^.+\\.jsx?$": "babel-jest"
    },
    "transformIgnorePatterns": [
      "node_modules/(?!(react-native-safe-area-view|react-navigation|react-native-htmlview|react-native-fabric|react-native-login|react-native-elements|react-native-vector-icons|react-native-spinkit|victory-pie|victory-chart|victory-core|react-native-svg|react-native|redux-persist|victory-native|react-native-swipe-cards|react-native-swiper)/)"
    ],
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/assetsTransformer.js",
      "\\.(css|less)$": "<rootDir>/assetsTransformer.js"
    }
  }
}

Upvotes: 28

Answers (8)

Aparna Singh

Reputation: 1

Try importing createContext

import React, { createContext } from "react";

Upvotes: 0

Peter Mugendi

Reputation: 945

If this is happening using react 18 or Next JS 13. You are probably trying to use a client component functionalities in a server component. By default all components are treated as server components unless you explicitly specify.

To solve this and add the "use client" directive at the top of the file (before any imports). Here is more details on When to use Server vs. Client Components?

Upvotes: 34

ravina vala

Reputation: 129

run

npm install react@latest

and

npm install react-dom@latest

fixed my error with this update.

Upvotes: 2

Zhiyong

Reputation: 401

Adding @emotion/react resulted in a similar error TypeError: React.createContext is not a function. The error disappeared after I removed @emotion/react and downgraded @emotion/styled from 11 to 10.

Upvotes: 2

Shubham Khatri

Reputation: 281686

In your package react and react-dom are not having the same version which is why you get the error. [email protected] will want to have access to React.createContext but [email protected] won't have it.

In order make it work run the following command: