Remix + Vite unable to use client only libs about remix HOT 7 CLOSED

You can call a hook anywhere you want in a compnent as long as it's not called conditionally. I put it in stringify here just for the simple example, most folks would call it at the top of the function so it's more obvious:

function NetworkState() {
  let network = useNetworkState()
  return <pre>{JSON.stringify(network)}</pre>;
}

from remix.

I am experiencing a similar error, but I am using the "module" folder approach. The module has several folders, each with its own exported index.ts file. Before Vite, I was able to import everything from '~/modules/foo', but now I can't.

Is there a way to solve this "issue" without creating a separate folder called .server?

franklinjavier/remix-starter-template#75

from remix.

From a quick glance, it looks like this library uses useSyncExternalStore to detect "server" which also means that it will detect "server" during the initial hydration render on the client - which makes sense to avoid hydration issues. That also explains why you still see the error when moving it into a .client folder. That avoids the issue during SSR but still tries to use the hook during the initial hydration render and the useSyncExternalStore snapshot triggers the error.

Error: useNetworkState is a client-only hook
    at getNetworkStateServerSnapshot 
    at Object.useSyncExternalStore 
    ...

Instead, you want to avoid running this hook until after hydration - which you can do with the remix-utils ClientOnly component:

import { useNetworkState } from "@uidotdev/usehooks";
import { ClientOnly } from "remix-utils/client-only";

export default function Index() {
  return (
    <div>
      <NetworkState />
      <ClientOnly>{() => <NetworkState />}</ClientOnly>
    </div>
  );
}

function NetworkState() {
  return <pre>{JSON.stringify(useNetworkState())}</pre>;
}

from remix.

@brophdawg11 should I open a new issue or discussion about my doubt?

from remix.

I would see if the vite-env-only solution solves it via https://remix.run/docs/en/main/future/vite#splitting-up-client-and-server-code - and if not, yeah, please open a new issue for that since it's not related to this specific hook use-case.

from remix.

@brophdawg11 how would you use hook in this case? Can you elaborate before closing?
would you add let network = useNetworkState() inside stringify

from remix.

Thanks @brophdawg11
I'll add this for future references

// using with context
import { createContext } from 'react'
import { ClientOnly } from 'react-utils/client-only' <-- v7.0.0-pre.7
import { useClientHook } from 'lib-with-probs'

const Context = createContext({})

function ForContext({ children }) {
  const foo = useClientHook()

  // To test I just added divs

  return (
    <div>
      {foo ? <div>its on</div> : <div>its off</div>}

      {children}
    </div>
  )
}

export const ContextProvider = ({ children }) => (
  <Context.Provider>
    <ClientOnly fallback={children}>
      {() => <ForContext>{children}</ForContext>}
    </ClientOnly>
  <Context.Provider>
)

from remix.