search

alephjs / aleph.js

The Full-stack Framework in Deno.
https://aleph.deno.dev/
MIT License
5.26k stars 168 forks source link

Hooks can only be called inside of the body of a function component. #232

Closed vincenzopalazzo closed 3 years ago

vincenzopalazzo commented 3 years ago

With the last version of the library https://github.com/alephjs/aleph.js/releases/tag/v0.3.0-alpha.22 i receive the following error

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (http://localhost:8080/_aleph/-/cdn.esm.sh/v33/react@17.0.1/deno/react.development.js:1069:31)
    at Object.useContext2 [as useContext] (http://localhost:8080/_aleph/-/cdn.esm.sh/v33/react@17.0.1/deno/react.development.js:1075:34)
    at useTheme (http://localhost:8080/_aleph/-/cdn.esm.sh/v33/@material-ui/core@4.11.3/deno/core.development.js:5888:24)
    at ThemeProvider (http://localhost:8080/_aleph/-/cdn.esm.sh/v33/@material-ui/core@4.11.3/deno/core.development.js:6462:22)
    at renderWithHooks (http://localhost:8080/_aleph/-/cdn.esm.sh/v28/react-dom@17.0.1/deno/react-dom.development.js:12057:32)
    at mountIndeterminateComponent (http://localhost:8080/_aleph/-/cdn.esm.sh/v28/react-dom@17.0.1/deno/react-dom.development.js:14238:29)
    at beginWork (http://localhost:8080/_aleph/-/cdn.esm.sh/v28/react-dom@17.0.1/deno/react-dom.development.js:15037:36)
    at HTMLUnknownElement.callCallback2 (http://localhost:8080/_aleph/-/cdn.esm.sh/v28/react-dom@17.0.1/deno/react-dom.development.js:4303:34)
    at Object.invokeGuardedCallbackDev (http://localhost:8080/_aleph/-/cdn.esm.sh/v28/react-dom@17.0.1/deno/react-dom.development.js:4328:34)
    at invokeGuardedCallback (http://localhost:8080/_aleph/-/cdn.esm.sh/v28/react-dom@17.0.1/deno/react-dom.development.js:4362:45)

I import some dependences that use react but before it works with this dependence, it is possible to avoid bundling different versions of react.js? For example, bundle only the version that this library required?

ije commented 3 years ago

alpha.23 fixed this

c0per commented 3 years ago

I still got this error v0.3.0-beta.10 using Material-ui.

ije commented 3 years ago

@c0per try to remove the cache with command aleph dev -r

c0per commented 3 years ago

@c0per try to remove the cache with command aleph dev -r

I tried that. It didn't work. But I did make it work by https://github.com/alephjs/aleph.js/issues/75#issuecomment-913130086.

Is it still because "two reacts" pulled when importing material-ui? The deps option in esm.sh seems to solve that problem.