alex4o•5mo ago

Creating custom react components fails with jsxRuntime not defined

I want to create a graph network visualisation app component and was looking at either https://reagraph.dev/ or https://www.xyflow.com/ but both add jsxRuntime as dependency and can't be ran. Is there a way to circumvent that?

REAGRAPH

@storybook/cli - Storybook

REAGRAPH

Node Based UIs for React and Svelte – xyflow

Powerful open source libraries for building node-based UIs with React or Svelte. Ready out-of-the-box and infinitely customizable.

14 Replies

rubenf•5mo ago

you need to bundle it within

alex4oOP•5mo ago

but you already alias react with https://unpkg.com/react@18.2.0/umd/react.development.js in the example component how can I bundle only jsxRuntime?

rubenf•5mo ago

I think i'm lacking context, I have no idea what adding jsxRuntime entails

alex4oOP•5mo ago

resolve:
    mode === "development"
      ? {}
      : {
          alias: {
            react: "https://unpkg.com/react@18.2.0/umd/react.development.js",
            "react-dom":
              "https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js",
          },
        },

resolve:
    mode === "development"
      ? {}
      : {
          alias: {
            react: "https://unpkg.com/react@18.2.0/umd/react.development.js",
            "react-dom":
              "https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js",
          },
        },

I mean here react and react-dom are alias which marks them as external which makes react/jsx-runtime external as well

rubenf•5mo ago

so it works in dev but not when imported in windmill ?

alex4oOP•5mo ago

yes

rubenf•5mo ago

Would you have the error you see in windmill and could you share a repo that does a minimal reproduction of the issue please

alex4oOP•5mo ago

At first I get React$1 is undefined then when I add

rollupOptions: {
      output: {
        format: "iife",
        globals: {
          react: "React",
          "react-dom": "ReactDOM",
        },
      },
    },

rollupOptions: {
      output: {
        format: "iife",
        globals: {
          react: "React",
          "react-dom": "ReactDOM",
        },
      },
    },