CSS loading problems with @uiw/react-md-editor

[nickw1]

Hi @lazarv,

Sorry, another couple of queries coming up, regarding different libraries so will post separate discussions for each.

Firstly, I have found a very nice package @uiw/react-md-editor which provides a full-featured WYSIWYG Markdown editor.

It seems to mostly work fine with @lazarv/react-server but I do encounter a problem in production mode that its CSS is not loaded, which is likely to be an issue in that package.

I have a repo here which demonstrates the issue: https://github.com/nickw1/rmetest

Build and run in production mode, access http://localhost:3000/, click "Edit" and you'll see the editor's CSS doesn't load correctly - but if you reload the edit page it then loads correctly.

It seems to be something to do with loading the source CSS of @uiw/react-md-editor. I can work around it by importing the CSS from that package manually:

import '@uiw/react-md-editor/markdown-editor.css';

If however I import the built CSS bundle of the package, e.g.

import '@uiw/react-md-editor/dist/mdeditor.css'; 

I get an error message on build:

[plugin vite:resolve]
Error: Missing "./dist/mdeditor.css" specifier in "@uiw/react-md-editor" package
    at e (file:///home/nick/src/rmetest/node_modules/rolldown-vite/dist/node/chunks/dep-DhQ4L5z7.js:7616:8)
    at n (file:///home/nick/src/rmetest/node_modules/rolldown-vite/dist/node/chunks/dep-DhQ4L5z7.js:7628:14)
    at o (file:///home/nick/src/rmetest/node_modules/rolldown-vite/dist/node/chunks/dep-DhQ4L5z7.js:7656:10)
    at resolveExportsOrImports (file:///home/nick/src/rmetest/node_modules/rolldown-vite/dist/node/chunks/dep-DhQ4L5z7.js:11257:17)
    at resolveDeepImport (file:///home/nick/src/rmetest/node_modules/rolldown-vite/dist/node/chunks/dep-DhQ4L5z7.js:11271:22)
    at tryNodeResolve (file:///home/nick/src/rmetest/node_modules/rolldown-vite/dist/node/chunks/dep-DhQ4L5z7.js:11139:17)
    at PluginContextImpl.resolveId (file:///home/nick/src/rmetest/node_modules/rolldown-vite/dist/node/chunks/dep-DhQ4L5z7.js:10959:15)
    at PluginContextImpl.handler (file:///home/nick/src/rmetest/node_modules/rolldown-vite/dist/node/chunks/dep-DhQ4L5z7.js:33608:13)
    at plugin (file:///home/nick/src/rmetest/node_modules/rolldown/dist/shared/src-DR2upIfp.mjs:2698:30)
    at plugin.<computed> (file:///home/nick/src/rmetest/node_modules/rolldown/dist/shared/src-DR2upIfp.mjs:3398:18)
    at normalizeErrors (file:///home/nick/src/rmetest/node_modules/rolldown/dist/shared/src-DR2upIfp.mjs:2258:18)
    at handleOutputErrors (file:///home/nick/src/rmetest/node_modules/rolldown/dist/shared/src-DR2upIfp.mjs:2992:34)
    at transformToRollupOutput (file:///home/nick/src/rmetest/node_modules/rolldown/dist/shared/src-DR2upIfp.mjs:2986:2)
    at RolldownBuild.write (file:///home/nick/src/rmetest/node_modules/rolldown/dist/shared/src-DR2upIfp.mjs:4186:10)
    at async buildEnvironment (file:///home/nick/src/rmetest/node_modules/rolldown-vite/dist/node/chunks/dep-DhQ4L5z7.js:33419:52)
    at async Object.build (file:///home/nick/src/rmetest/node_modules/rolldown-vite/dist/node/chunks/dep-DhQ4L5z7.js:33817:19)
    at async serverBuild (file:///home/nick/src/rmetest/node_modules/@lazarv/react-server/lib/build/server.mjs:432:3)
    at async file:///home/nick/src/rmetest/node_modules/@lazarv/react-server/lib/build/action.mjs:61:39

At a guess something is non-standard about the build files for that package.

I realise the error is probably in the third-party package but just wondered if you had an idea? It happens with both npm and pnpm builds.

Thanks!

[lazarv]

Hi @nickw1!

Why did you externalize the @uiw/react-md-editor package? After dropping the vite.config.mjs you have in the repo, this works for me. When you externalize the package, Vite will not find the CSS imported by the library, and the framework will not include its CSS when rendering the page with the editor component. You only need to consider externalizing a package used in server components, but packages used in client components should not be externalized. This should be added as a warning in the build of a @lazarv/react-server application.

According to the Next.js example, this library has, you need to import these CSS files:

import "@uiw/react-md-editor/markdown-editor.css";
import "@uiw/react-markdown-preview/markdown.css";

I also removed the react and react-dom overrides from package.json, as the framework always provides its own version of React. You need this override only when a package defines peer dependencies in an incompatible way.

[nickw1]

Hi @lazarv,

Many thanks for your quick response!

Sorry - I was playing around with various things in an attempt to fix it - I first encountered the error without the externalisation being present. That said if I remove the vite.config.mjs entirely it does appear to work... that was there because I copied things over from my main project to save a bit of time.

Looks like you do indeed need to import the CSS manually, didn't look at the Next example.

I included the overrides because if I use npm, rather than pnpm, I get a "React is already included" error message - and I want to allow users to use either pnpm or npm.