"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": "",
    "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"
    }
  }
}

8 Answers

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?

2

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:

yarn upgrade [email protected]

Or if you are using NPM:

npm install [email protected]
2

Try upgrading React to React to 16.4.1

3

Using npm I solved it by upgrading to 16.4.1:

npm i [email protected]
0

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.

3

run

npm install react@latest

and

npm install react-dom@latest

fixed my error with this update.

If npm i react@latest react-dom@latest doesn't work try doing npm update , it will update all packages.

Try importing createContext

import React, { createContext } from "react";

Your Answer

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

David Miller

David Miller

Executive Financial & Market Analyst

David Miller brings 15 years of experience in global economics, personal finance strategy, and market dynamics. He specializes in turning complex economic trends into actionable insights for everyday readers.

Share this article
Twitter Facebook Pinterest