Not able to inject the node module CSS of ReactFlow library

[tu2-atmanand]

Hi Everyone!

I am new to this community and for past two days, I spent exploring the docs and this server to figure out what is actually I am doing wrong. After couldn't able to solve the error, finally decided to create this topic here.

The issue is simple, I am not able to interact with the rendered canvas. The nodes are kind of have been rendered as rectangles (I will need to do some fixing, I guess, to properly render the react component inside the nodes). But I cant able to interact with the canvas at. Not able to scroll, pan and move the view, using left mouse or middle mouse button nothing. Even I am not able to click on the React flow link rendered inside the view, just below the Minimap and also cannot able to see the 4 control button properly. Their only outline is visible, but looks like they have not been rendered properly. As can be seen in the below image.

My guess, is the CSS which this module talks about in the docs as well, has not been properly loaded. Because I am also getting the below warning inside the Developer tools window.

Can anyone help me figure out what's actually the issue here.
It will be great if anyone can go through the code, if the issue is specifically related to my plugin project.

Project link : https://github.com/tu2-atmanand/Task-Board/blob/feat-301/canvas-view/src/components/CanvasView.tsx

[tu2-atmanand]

A possible solution from Dev channel from Discord and from Chat GPT

🧠 Conclusion for React

Svelte handles CSS-in-JS internally through esbuild-svelte. React does not, so you need to explicitly enable CSS handling in your esbuild config.

---

✅ Solution for React: Use a CSS Plugin

You need to install and configure a plugin like [esbuild-css-modules-plugin](https://github.com/indooorsman/esbuild-css-modules-plugin) or write your own loader for global CSS.

---

✳️ Recommended Quick Fix

If you only need to support global CSS imports like:

import '@xyflow/react/dist/style.css';

You can do it with:

🔧 1. Install CSS loader plugin:

npm install --save-dev esbuild-plugin-css-modules

---

🔧 2. Update your esbuild.config.mjs:

Here’s a minimal working config for React with CSS import support:

import esbuild from "esbuild";
import cssModulesPlugin from "esbuild-plugin-css-modules";
import builtins from "builtin-modules";
import process from "process";

const banner =
`/*
THIS IS A GENERATED/BUNDLED FILE BY ESBUILD
if you want to view the source, please visit the github repository of this plugin
*/
`;

const prod = process.argv[2] === "production";

esbuild.build({
  banner: {
    js: banner,
  },
  entryPoints: ["main.ts"],
  bundle: true,
  external: ["obsidian", "electron", ...builtins],
  format: "cjs",
  target: "es2024",
  logLevel: "info",
  sourcemap: prod ? false : "inline",
  treeShaking: true,
  outfile: "main.js",
  plugins: [
    cssModulesPlugin({
      inject: true, // makes global CSS work
    }),
  ],
}).catch(() => process.exit(1));

---

✅ Result:

Now you can safely use:

import '@xyflow/react/dist/style.css';

in any React component (CanvasView.tsx, etc.), and it will get bundled properly.

---

⚠️ Optional: Scope the styles manually

If you're worried about React Flow styles interfering with other views in Obsidian, you can scope them manually after importing, or lazy load them inside Canvas view.

---

🧠 Your tsconfig.json

No need to change much — just make sure it includes "DOM" in lib (which you already do), and "esModuleInterop": true so React imports work smoothly. Nothing Svelte-specific applies to React projects here.

---

✅ Summary

Feature	Svelte Project	Your React Project
CSS handling	Done via esbuild-svelte plugin	Needs esbuild-plugin-css-modules plugin
Style scope	Managed via Svelte compiler	Manually scoping or lazy-loading suggested
ReactFlow styles	Already handled via style.css	Must be imported manually or copied over

---

Let me know if you want me to generate the updated working esbuild.config.mjs file for your React plugin based on the current setup.

[tu2-atmanand]

Prompt

Actually, the above solution is reading the CSS from the node module and putting it inside main.css file present in the root of the project. But Obsidian doesnt make use of this main.css file. It only uses styles.css file. Will it be possible to append the whole CSS injected into this styles.css file?

Solution

Ah, thank you for that important clarification. You're absolutely right — Obsidian only recognizes styles.css at the plugin root for applying plugin-wide styles. So even if esbuild generates and injects CSS into main.css or inline JS, Obsidian will ignore that unless it's explicitly in styles.css.

---

✅ Goal

Ensure that styles from external libraries (like @xyflow/react/dist/style.css) end up inside your plugin’s styles.css file, not inside a JS bundle or a separate main.css.

---

✅ Solution: Manual CSS Extraction and Appending to styles.css

Here's how you can achieve this with esbuild:

---

🔧 Step 1: Install esbuild-plugin-postcss and postcss + postcss-import

npm install --save-dev esbuild-plugin-postcss postcss postcss-import

---

🔧 Step 2: Create a bundle.css file that imports any 3rd-party styles:

src/bundle.css

@import "@xyflow/react/dist/style.css";
/* Add more external CSS imports if needed */

---

🔧 Step 3: Update esbuild.config.mjs to bundle bundle.css and output to styles.css

Here’s a full updated esbuild.config.mjs:

import esbuild from "esbuild";
import builtins from "builtin-modules";
import process from "process";
import postcss from "esbuild-plugin-postcss";
import postcssImport from "postcss-import";
import fs from "fs";
// Banner shown at top of generated JS file

const banner = /* THIS IS A GENERATED/BUNDLED FILE BY ESBUILD If you want to view the source, please visit the GitHub repository of this plugin */ ;
const prod = process.argv[2] === "production";
// First, build JS bundle

await esbuild.build({

banner: {

js: banner,

},

entryPoints: ["main.ts"],

bundle: true,

external: ["obsidian", "electron", ...builtins],

format: "cjs",

target: "es2024",

logLevel: "info",

sourcemap: prod ? false : "inline",

treeShaking: true,

outfile: "main.js",

});
// Then, extract bundled CSS to styles.css

await esbuild.build({

entryPoints: ["src/bundle.css"],

bundle: true,

outfile: "styles.css", // IMPORTANT: this is the file Obsidian uses

plugins: [

postcss({

plugins: [postcssImport()],

}),

],

logLevel: "info",

});

---

✅ Folder Structure After Build

main.js           <-- Your bundled plugin code
manifest.json     <-- Your plugin manifest
styles.css        <-- ✅ External CSS styles like ReactFlow now here

---

💡 Optional: Automate Watching

If you use a dev script, wrap both builds (JS + CSS) in a watch mode or npm script.

---

✅ Summary

Need	Solved?
Import and bundle node module CSS	✅ Using @import in bundle.css
Output CSS into styles.css	✅ Esbuild writes final CSS to it
Compatible with Obsidian	✅ Obsidian reads styles.css

---

Let me know if you’d like me to generate these config files for you based on your current project layout!