React: useContext: TypeError: Object(...) is not a function

[lmachens]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
import React, { useContext } from 'react';
useContext is undefined.

TypeError: Object(...) is not a function error when processing const context = useContext(UserContext);.

Uncaught (in promise) TypeError: Object(...) is not a function
    at eval (user.tsx?7220:147)
    at mountIndeterminateComponent (react-dom.development.js?61bb:14811)
    at beginWork (react-dom.development.js?61bb:15316)
    at performUnitOfWork (react-dom.development.js?61bb:18150)
    at workLoop (react-dom.development.js?61bb:18190)
    at renderRoot (react-dom.development.js?61bb:18276)
    at performWorkOnRoot (react-dom.development.js?61bb:19165)
    at performWork (react-dom.development.js?61bb:19077)
    at performSyncWork (react-dom.development.js?61bb:19051)
    at requestWork (react-dom.development.js?61bb:18920)

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.
16.7.0: https://codesandbox.io/s/mq3ozw5j2y
16.7.0-alpha.2: https://codesandbox.io/s/2zw4o533mp

What is the expected behavior?
useContext should not throw an error.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
Issue appears after updating React from 16.7.0-alpha to 16.7.0.

[muqg]

You should update to react@next, since the live 16.7 version only includes critical bugfix and does not export the hooks, just as 16.6 did.

[lmachens]

@muqg thx, but react@next will install 16.7.0, which doesn't include hooks.
So if we want to use hooks, we still have to use 16.7.0-alpha?

[lmachens]

To avoid updating to 16.7.0 (without hooks), we can fix the version like this:

{
  "dependencies": {
    "react": "16.7.0-alpha.2",
    "react-dom": "16.7.0-alpha.2"
  }
}

But I think it would be better if react@next installs react with included hooks like it did before.
In https://reactjs.org/blog/2018/11/27/react-16-roadmap.html they say:

Status in React DOM: The first version of react and react-dom supporting Hooks is 16.7.0-alpha.0. We expect to publish more alphas over the next months (at the time of writing, the latest one is 16.7.0-alpha.2). You can try them by installing react@next with react-dom@next. Don’t forget to update react-dom — otherwise Hooks won’t work.

It is not valid anymore.

[muqg]

Exactly, my project is running a fixed 16.7.0-alpha.2 version and it is fine. However, I expected there to be a following 16.8.0-alpha or something for react@next after the 16.7 release.

[gaearon]

It was an unintentional side effect from publishing 16.7. We should fix next to point at a Hooks-enabled release. Sorry.

[lmachens]

Ok np :).
Seems like you already changed next -> Thx! Issue closed.

[pitops]

I tried to use the following in package.json but do not work.

    "react": "16.7.0-alpha.2",
    "react-dom": "16.7.0-alpha.2",

What worked is the following

    "react": "next",
    "react-dom": "next",

[gaearon]

16.7.0-alpha.2 should work — are you sure you didn't accidentally put ^ before it?

[pitops]

16.7.0-alpha.2 should work — are you sure you didn't accidentally put ^ before it?

Dan yes you are right. I might have accidentally put a ^ before it.

[philipjc]

I'm still having this issue, even with using 16.7.0-alpha.2

"dependencies": { "@aspnet/signalr": "^1.0.3", "@babel/core": "^7.1.0", "@babel/polyfill": "^7.0.0", "@babel/preset-env": "^7.1.0", "@babel/preset-react": "^7.0.0", "@babel/runtime": "^7.0.0", "axios": "^0.18.0", "babel-eslint": "^9.0.0", "babel-jest": "^23.6.0", "babel-loader": "^8.0.0", "babel-polyfill": "^6.26.0", "bcryptjs": "^2.4.3", "case-sensitive-paths-webpack-plugin": "^2.1.2", "classnames": "^2.2.6", "css-loader": "^1.0.0", "debounce": "^1.2.0", "eslint": "^5.6.0", "eslint-config-airbnb": "^17.1.0", "eslint-config-prettier": "^3.0.1", "eslint-loader": "^2.1.0", "eslint-plugin-flowtype": "^2.50.0", "eslint-plugin-jsx-a11y": "^6.1.1", "eslint-plugin-react": "^7.11.1", "extract-text-webpack-plugin": "^3.0.2", "history": "^4.7.2", "html-webpack-plugin": "^3.2.0", "html2canvas": "^1.0.0-alpha.12", "immutability-helper": "^2.8.0", "js-cookie": "^2.2.0", "jspdf": "^1.4.1", "lodash": "^4.17.10", "moment": "^2.22.2", "moment-duration-format": "^2.2.2", "nbs-ui-library": "2.42.3", "number-to-words": "^1.2.4", "numeral": "^2.0.6", "postcss-loader": "^3.0.0", "prop-types": "^15.6.2", "query-string": "^5.1.1", "ramda": "^0.25.0", "react": "16.7.0-alpha.2", "react-dom": "16.7.0-alpha.2", "react-file-reader": "^1.1.4", "react-google-recaptcha": "^1.0.2", "react-hot-loader": "^4.6.5", "react-icons": "^2.2.7", "react-json-view": "^1.19.1", "react-markdown": "^4.0.3", "react-router": "^4.2.0", "react-router-dom": "^4.2.2", "react-simple-timefield": "^2.0.0", "semantic-ui-react": "^0.84.0", "store": "^2.0.12", "style-loader": "^0.23.0", "uglifyjs-webpack-plugin": "^2.0.1", "uid": "0.0.2", "url-loader": "^1.1.1", "validator": "^10.7.1", "webpack": "^4.19.0", "webpack-dev-server": "^3.1.8" }, "devDependencies": { "@babel/core": "^7.0.0", "@babel/plugin-proposal-class-properties": "^7.1.0", "@babel/plugin-proposal-object-rest-spread": "^7.0.0", "@babel/plugin-syntax-dynamic-import": "^7.0.0", "@babel/preset-flow": "^7.0.0", "autoprefixer": "^8.6.3", "babel-core": "7.0.0-bridge.0", "babel-preset-minify": "^0.5.0-alpha.3cc09dcf", "babel-preset-react-app": "^7.0.1", "csp-html-webpack-plugin": "^2.3.0", "css-hot-loader": "^1.4.2", "cssnano": "^4.1.0", "enzyme": "^3.8.0", "enzyme-adapter-react-16": "^1.9.1", "enzyme-to-json": "^3.3.4", "eslint-plugin-import": "^2.14.0", "eslint-plugin-ramda": "^2.5.1", "file-loader": "^2.0.0", "fs-extra": "^7.0.0", "jest": "^23.6.0", "jsdom": "^13.0.0", "less": "^3.8.1", "less-loader": "^4.1.0", "less-plugin-rewrite-import": "^0.1.1", "markdown-loader": "^4.0.0", "mini-css-extract-plugin": "^0.4.3", "moxios": "^0.4.0", "npm-check": "^5.8.0", "npm-run-all": "^4.1.5", "optimize-css-assets-webpack-plugin": "^5.0.1", "postcss-flexbugs-fixes": "^4.1.0", "pre-commit": "^1.2.2", "prettier": "^1.15.3", "pretty-quick": "^1.8.0", "raw-loader": "^0.5.1", "react-dev-utils": "6.0.0-next.3e165448", "react-router-test-context": "^0.1.0", "regenerator-runtime": "^0.11.1", "webpack-command": "^0.2.1" }

[pitops]

Use React v16.8.0. Hooks are included

[philipjc]

We were. "react": "16.7.0-alpha.2", "react-dom": "16.7.0-alpha.2", seems to be working now.

[gaearon]

I'll lock this issue since the original problem got resolved and now it'll likely only attract confused reports. If you have this problem please file a new issue with a reproducing case.