search

abereghici / remix-themes

An abstraction for themes in your Remix app.
https://www.npmjs.com/package/remix-themes
MIT License
123 stars 14 forks source link

Can't get the demo to run #3

Closed marksmall closed 2 years ago

marksmall commented 2 years ago

Hi there,

I have this working on a personal app, following the README, but I cannot see any cookie. I therefore tried to get the demo app to run so as to compare and am having some trouble. I

  1. Ran : npm install && npm run build in the repo root
  2. Ran: npm install && npm run dev in the demo directory

The app starts, but I get the following error:

Application 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 (/home/msmall/dev/projects/github/remix-themes/node_modules/react/cjs/react.development.js:1476:13)
    at Object.useState (/home/msmall/dev/projects/github/remix-themes/node_modules/react/cjs/react.development.js:1507:20)
    at ThemeProvider (/home/msmall/dev/projects/github/remix-themes/build/theme-provider.js:40:37)
    at processChild (/home/msmall/dev/projects/github/remix-themes/demo/node_modules/react-dom/cjs/react-dom-server.node.development.js:3353:14)
    at resolve (/home/msmall/dev/projects/github/remix-themes/demo/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5)
    at ReactDOMServerRenderer.render (/home/msmall/dev/projects/github/remix-themes/demo/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22)
    at ReactDOMServerRenderer.read (/home/msmall/dev/projects/github/remix-themes/demo/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
    at renderToString (/home/msmall/dev/projects/github/remix-themes/demo/node_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27)
    at handleRequest (/home/msmall/dev/projects/github/remix-themes/demo/build/index.js:389:51)
    at renderDocumentRequest (/home/msmall/dev/projects/github/remix-themes/demo/node_modules/@remix-run/server-runtime/server.js:404:18)

I looked at the index.tsx file and the hook is called within the body of the function, so I'm a bit confused. Any help would be appreciated.

What I really want to understand is why I cannot see any cookie in my browser, representing the theme, as I want to read this cookie on each subsequent visit to the app and have it's value applied.

abereghici commented 2 years ago

Hey @marksmall . I forgot to mention that we have to link the packages in order to run the demo project. In root and in demo folders you have to run npm link react. The error Error: Invalid hook call. is thrown because without npm link we end up with two react libraries in the bundle and this is not allowed.

Once you toggle the theme, you should be able to see the cookie in Application tab with remix-themes key. Example:

Screenshot 2022-02-13 at 21 06 54

Please let me know if you managed to start the demo.

marksmall commented 2 years ago

That's great@abreghici, in fairness, I should have thought of that myself, but didn't, for others that don't know, or just plain stupid like myself, it might be worth putting steps into the demo's README. Cheers for the help and I can confirm it did work after following those steps.

abereghici commented 2 years ago

@marksmall Happy to help! I'll update the README with these steps. Good catch!