Cannot use this package in a Remix + Vite app

[gonstoll]

Problem

When I try to make use of enrichTweet or any function exported from the react-tweet package, I get the following error:

1:08:50 PM [vite] Internal server error: Unknown file extension ".css" for /Users/gonzalostoll/Dev/projects/tweet-archive/node_modules/react-tweet/dist/twitter-theme/theme.css
      at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:176:9)
      at defaultGetFormat (node:internal/modules/esm/get_format:219:36)
      at defaultLoad (node:internal/modules/esm/load:133:22)
      at async ModuleLoader.load (node:internal/modules/esm/loader:570:7)
      at async ModuleLoader.moduleProvider (node:internal/modules/esm/loader:445:45)

Reproduction

https://stackblitz.com/edit/remix-run-remix-8g6mfu?file=app%2Froutes%2F_index.tsx

Failed attempts

I have tried to edit my vite config in many ways, all of which were met with failure:

import {vitePlugin as remix} from '@remix-run/dev'
import {defineConfig} from 'vite'
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  plugins: [
    remix({
      future: {
        v3_fetcherPersist: true,
        v3_relativeSplatPath: true,
        v3_throwAbortReason: true,
      },
    }),
    tsconfigPaths(),
  ],
  ssr: {
    noExternal: 'react-tweet',
  },
})

import {vitePlugin as remix} from '@remix-run/dev'
import {defineConfig} from 'vite'
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  plugins: [
    remix({
      future: {
        v3_fetcherPersist: true,
        v3_relativeSplatPath: true,
        v3_throwAbortReason: true,
      },
    }),
    tsconfigPaths(),
  ],
  css: {
    modules: {
      scopeBehaviour: 'global',
      exportGlobals: true,
      localsConvention: 'camelCaseOnly',
    },
  },
})

[wcjohnson11]

I was able to resolve this as follows

In vite.config.ts

		ssr: {
			target: 'node',
			noExternal: [
			      /react-tweet.*/,
			      ...
			]
		}

And then I had to import the library components as

import * as ReactTweet from "react-tweet";
const {Tweet} = ReactTweet;

Not ideal and kind of hacky but I'm now able to use react-tweet in both dev and production in a Remix + Vite app.

[mylescarrick]

@wcjohnson11 any chance you can share the rest of your vite config?
I'm adding reactjs-tiptap-editor which has this as a dependency, which has react-tweet as a dependency.

[wangyi12358]

Just add .client to your component

[divyamdotfoo]

@wangyi12358 Thanks a lot!

[rneogy]

Are there any plans on updating this package to be SSR compatible with Remix/react-router framework?