uiwjs / uiwjs/react-codemirror

Missing styles when using vite build.

Open
#707 4 comments 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
2.3k
Forks
161
PR merge metrics
No merged PRs in 30d

Description

When trying to build my app with vite build. The generated code won't include the styles of codemirror or any themes. It looks like in a previous version (5). There was the .css file on the dist folder of the module that devs could import directly but now there is no such file and vite is having difficulties bundling the styles.

here is how im importing the editor:
import CodeMirror, { EditorView, basicSetup } from '@uiw/react-codemirror';
import { sql } from '@codemirror/lang-sql';
import { vscodeLight, vscodeLightInit } from '@uiw/codemirror-theme-vscode';
import { autocompletion, Completion, CompletionContext } from '@codemirror/autocomplete';
import { useEffect, useState } from 'react';
import { TableData } from '../../utils/utils';
import React from 'react';
import { LanguageSupport } from '@codemirror/language';

the version of the pacakges:
"@codemirror/lang-sql": "^6.8.0",
"@uiw/codemirror-theme-eclipse": "^4.23.6",
"@uiw/codemirror-theme-vscode": "^4.23.6",
"@uiw/react-codemirror": "^4.23.6",
"codemirror": "^6.0.1",
"vite": "^5.4.0"

Is there a work around this, so I can run the build and include the styles?
Thanks for the help in advance

Contributor guide

No contributing guide indexed for this repository

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.

Research direction

Start by reproducing the report with the listed @uiw/react-codemirror, CodeMirror, theme, and Vite package versions and run vite build using the shown imports. Compare the build output with the expected CodeMirror and theme styles; done means the generated distribution includes the styles or documents a working import workaround.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript, vite
Domain
build-system, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.