question: Issue when using library in remix/vite and having trouble with the imports

[netherglaive]

I cannot import 'stream-chat-react' in my remix/vite project. I get the error of "Cannot use import statement" outside a module or the other way around when I import during SSR. I'm trying to follow the tutorial with the already created components but im struggling to implement it without a very hacky async import...

Steps to reproduce the behavior:

Create a remix project, then add:

import { Chat, StreamChatOptions, useCreateChatClient } from 'stream-chat-react';
see that during run time SSR fails because of remix/vite complaining that 'export' is not allowed.

Package version

• stream-chat-react: ^12.10.0

Desktop (please complete the following information):

• OS Windows Pro
• Browser Chrome
• Version 11

[arnautov-anton]

Hey, @netherglaive, any chance this issue is related to this one? Thank you for raising the issue either way, we'll investigate in the meantime.

[netherglaive]

Thanks for the quick response! at a glance it looks like I tried what resolved that one, but let me try again tonight and ill get back to you!

[netherglaive]

So there's two parts to this issue, first is that I get:
[vite] Error when evaluating SSR module virtual:remix/server-build: failed to import "stream-chat-react"
but I can fix this by doing:
ssr: { noExternal: ['get-stream', 'stream-chat-react'], },
but then I get the same error in the earlier issue that you linked:
Unexpected token 'export' but I still then get:
[vite] Error when evaluating SSR module /app/routes/dashboard.provider_.client/route.tsx: failed to import "stream-chat-react"

I have my package.json file configured correctly with '{ "type": "module" }' but i dont want to make my route client sided only if I dont have to... is there another work around?

[netherglaive]

`import { useCreateChatClient } from 'stream-chat-react';
import { Chat } from 'stream-chat-react';

const apiKey = '';
const userId = '';
const userName = '';
const userToken =
'';

export default function ChatClient() {
const client = useCreateChatClient({
apiKey: apiKey,
tokenOrProvider: userToken,
userData: { id: userId },
});

if (!client) {
return

Loading...

;
}

return ;
}
`

i just put the above in my project and it fails to build even if not placed in any specific component so its happening at build time

[MartinCupela]

Hey @netherglaive, could you try the following?

1. Create a Client-Only Component Wrapper:

StreamChatWrapper.tsx

import { useHydrated } from 'remix-utils/use-hydrated';

export function StreamChatWrapper({ children }: { children: React.ReactNode }) {
  const isHydrated = useHydrated();

  if (!isHydrated) {
    // Return a placeholder or loading state for SSR
    return <div>Loading chat...</div>;
  }

  return <>{children}</>;
}

2. Dynamic Import in Your Component:
   Chat.tsx

import { lazy, Suspense } from 'react';
import { StreamChatWrapper } from './StreamChatWrapper';

// Dynamically import stream-chat-react components
const StreamChat = lazy(() => import('stream-chat-react').then(module => ({
  default: module.StreamChat
})));

export function Chat() {
  return (
    <StreamChatWrapper>
      <Suspense fallback={<div>Loading chat...</div>}>
        <StreamChat
          // your props
        >
          {/* your chat components */}
        </StreamChat>
      </Suspense>
    </StreamChatWrapper>
  );

3. Configure Vite for SSR:

vite.config.ts

import { defineConfig } from 'vite';
import { vitePlugin as remix } from '@remix-run/dev';

export default defineConfig({
  plugins: [remix()],
  ssr: {
    noExternal: ['stream-chat-react'],
  },
});

4. Handle Module Imports in Entry Files:

entry.client.tsx

// Client-side entry
import { StreamChat } from 'stream-chat';
// ... rest of your client entry code

5. Optional: Create an Environment Check Utility:

env.ts

export const isServer = typeof window === 'undefined';
export const isClient = !isServer

Chat.tsx

import { isClient } from '~/utils/env';

export function Chat() {
  if (!isClient) {
    return <div>Loading chat...</div>;
  }

  return (
    <StreamChatWrapper>
      {/* Chat components */}
    </StreamChatWrapper>
  );
}

This all sounds more like a question how to setup remix so that client side code can be hydrated.

[netherglaive]

I was able to resolve with the following:

ssr: { noExternal: ['stream-chat-react', 'react-dropzone'], },

looks like I didnt need the other parts to it, im not sure why 'react-dropzone' is tripping up remix/vite.

The styles are missing but ill figure that part out next

thanks for the quick support/guidance!!