Cannot use this package in a Remix + Vite app

Abierto
  • ¿Algo no está bien?
#178 5 comentarios 1 reacción 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
38/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
react, typescript, vite
Área
tooling, web-dev

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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',
    },
  },
})
Lenguaje dominante
TypeScript
Estrellas
1.9k
Forks
118
Sin PR fusionados en 30 d

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de vercel/react-tweet

Todos los issues de vercel/react-tweet

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.