Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Cannot use this package in a Remix + Vite app

Open
  • Is something wrong?
#178 5 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
38/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
react, typescript, vite
Domain
tooling, web-dev

Research direction

Start with the reproduction at StackBlitz and app/routes/_index.tsx, then inspect react-tweet's dist/twitter-theme/theme.css import and the supplied Vite SSR configuration. Reproduce the Unknown file extension ".css" error and determine what change allows enrichTweet or another exported function to work in a Remix + Vite app without that error.

Written by the indexing model from the issue text.

Description

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',
    },
  },
})
Dominant language
TypeScript
Stars
1.9k
Forks
119
Avg merge
6m
Merged PRs (30d)
1

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from vercel/react-tweet

All issues in vercel/react-tweet

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.