Issue using Hooks with exported component

[oliverdunk]

Bug

When I render an imported component which uses the useContext hook, I get the following error:

Uncaught TypeError: Cannot read property 'context' of undefined
    at Module.useContext (index.js:173)
    at d../src/example.tsx.exports.Example [as constructor] (example.tsx:7)

It appears that currentComponent is undefined, but I'm not sure what that means or how to fix it.

I think the issue is related to my build process, so have created a repository which demonstrates the problem.

Steps to reproduce

1. Clone https://github.com/oliverdunk/preact-bug
2. Run npm install
3. Run npm run-script run

Expected behaviour

The number 5 is rendered on the page, inside of a H1.

Actual behaviour

When the Example component is rendered, the previously mentioned error is thrown.

[marvinhagemeister]

Thank you so much for reporting it. That's one of the most detailed issues we've received in a while 👍 💯 I had a look at the repo and I could narrow the issue down to a wrong import path 🍀

preact/hooks will import the minified distribution files whereas preact/hooks/src will import the original source files. We use variable mangling for the distribution files and because of different namings the currentComponent variable will not be set correctly.

To fix the error change the imports like this:

- import { useContext } from "preact/hooks/src";
+ import { useContext } from "preact/hooks";

[oliverdunk]

Thanks for the quick response, that fix worked perfectly! I went with the detailed issue because I had no idea what bit of my setup was relevant 😅

IIRC, VSCode did offer the import to me - I wonder if there's a way to prevent that? No big deal though.

[OngeUK]

FWIW - I had the same issue where VSCode's auto importing used preact/hooks/src...

[developit]

@marvinhagemeister I wonder if this could be fixed if we excluded preact/hooks/src from the npm package via pkg.files?

[marvinhagemeister]

@developit That would work too 👍 I don't think anybody uses that anyway since it's not referenced in main or module 💯

[kossnocorp]

I've encountered the same issue with the VS Code and 10.0.0-rc.3.

[artalar]

@developit @marvinhagemeister
10.0.0-rc.3 - same bug.

(reproduce, see Header.tsx)

I try to import { useContext } from "preact/hooks"; and import { useContext } from "preact/compat";, but every time get the same error: TypeError: Cannot read property 'context' of undefined.

By the way, all works fine if I firstly start the server with code without hooks, and after that try to add code with hooks (hot reload -> all works fine). May be the problem related to SSR (next.js)?

[cristianbote]

Hey @artalar when using aliasing of react to preact/compat you should use react imports rather than preact. In other words, you should use import { useContext } from "react".

Check out the amended version https://codesandbox.io/s/hello-world-1xs58

[artalar]

@cristianbote it works! Thanks a lot!

[marvinhagemeister]

I'm wondering why this leads to errors though, because preact/compat just re-exports preact/hooks. Maybe we need to check out bundler config and make sure that it isn't inlined into preact/compat