vercel / react-tweet

Embed tweets in your React application.
https://react-tweet.vercel.app
MIT License
1.63k stars 88 forks source link

Cannot use this package in a Remix + Vite app #178

Open gonstoll opened 2 months ago

gonstoll commented 2 months ago

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 commented 2 months ago

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.