profile
viewpoint

Ask questionsBug: React Context API is not working from custom NPM library

I have total of three npm packages:

  1. Custom Hook: custom hook wraps useContext
  2. Provider: uses custom hook to Provide Context
  3. Consumer: uses custom hook to Retrieve Context

If I have these components in a single app, everything works as expected. However, if I separate them to their own npm packages, the state is no longer retrievable by the consumer.

React version: 16.13.1

Steps To Reproduce

  1. Since it involves creating three different npm packages to repro, I've created a github repo that demonstrates the problem. Included all source code along with it. a) Repo: https://github.com/ayayalar/ReactContextAPIDefect
  2. Kept the example extremely simple to keep the focus on the problem.

Link to code example: https://github.com/ayayalar/ReactContextAPIDefect

<!-- Please provide a CodeSandbox (https://codesandbox.io/s/new), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem. You may provide a screenshot of the application if you think it is relevant to your bug report. Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve. -->

The current behavior

The context state is not retrievable by the consumer.

The expected behavior

The context state should be retrievable by the consumer.

facebook/react

Answer questions vkurchatkin

React works the same regardless of whether you have a single file or not, whether you use a bundler or not. If you have a problem with context you need to ensure that provider and consumer really use the same Context object. It is most likely that they are not

useful!

Related questions

Disable react strict mode on third party libraries hot 6
Refs - &#34;object is not extensible&#34; hot 4
Warning: Unknown DOM property for. Did you mean htmlFor? hot 4
React@16.9 block `javascript:void(0);` hot 4
TypeError: Object(...) is not a function hot 3
Warning: validateDOMNesting(...): <tr> cannot appear as a child of <table> hot 3
React custom hook "Should have a queue. This is likely a bug in React" error message. hot 2
useEffect causes 'callback is not a function' exception hot 2
DevTools: Updating state or props in devtools does not trigger component update. hot 2
Infinite loop in useEffect using blank object or array hot 2
False-positive security precaution warning (`javascript:` URLs) hot 2
Hooks API - hook breaks when exported from module hot 2
Function components do not support contextType. hot 2
Feedback on useEffect depndencies change error hot 2
[ESLint] Feedback for 'exhaustive-deps' lint rule hot 2
Github User Rank List