SolidJS•2y ago

Is there an easy way to render React inside Solid?

I've got a landing page generated through an external tool that I'd rather just keep in React so I don't have to mess with it when we make landing page changes. I've attached an image of what I'm trying to do, but I get a mysterious error in the console about Comp not being defined. Any ideas? Thank you!

6 Replies

ryansolid•2y ago

Mounting it is relatively simple like you showed. The challenge the JSX transform. You won't be able to have both in the same file. You will need to extract the React JSX into a separate file and compile it differently or if it is just that entry maybe hand write it with React.createElement without JSX.

marcusbuffettOP•2y ago

ah interesting, yeah so I can get some react rendering by doing createElement manually, but there's a lot of jsx in the sub-components that Index renders, so I guess I'll have to figure out how to get Vite to use the solid plugin for some files, and the react plugin for others? Does that sound about right? also huge thank you for the awesome framework, I've been re-writing my site chessmadra.com in it and it's been such a breath of fresh air, particularly the performance (there's a chessboard that requires snappy updates, solidjs updates were 20x faster than react native), and the state management stuff. Was really cool to replace zustand/immer with creatStore/produce, which slotted in perfectly. JS bundle size is half what it was, and it's sweet how often the answer to "how do I do X in solid" is just like "a variable", or "a plain function", to replace all the useCallback/useMemo/useRef/etc. Haha sorry for the rant, just been so much fun so I was thinking something like this?

import solid from "solid-start/vite";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
import devtools from "solid-devtools/vite";
import UnoCSS from "unocss/vite";
import { presetUno, presetAttributify } from "unocss";
const unoConfig = {
  rules: [["custom-rule", { color: "red" }]],
  shortcuts: {
    "custom-shortcut": "text-lg text-orange hover:text-teal",
  },
  presets: [presetUno(), presetAttributify()],
};

// const plugins = [];
export default defineConfig({
  plugins: [
    devtools({
      /* additional options */
      autoname: true, // e.g. enable autoname
    }),
    UnoCSS(unoConfig),
    solid(),
    react({
      include: ["src/landing_page/**/*.{js,jsx,ts,tsx}"],
    }),
  ],
});

import solid from "solid-start/vite";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
import devtools from "solid-devtools/vite";
import UnoCSS from "unocss/vite";
import { presetUno, presetAttributify } from "unocss";
const unoConfig = {
  rules: [["custom-rule", { color: "red" }]],
  shortcuts: {
    "custom-shortcut": "text-lg text-orange hover:text-teal",
  },
  presets: [presetUno(), presetAttributify()],
};

// const plugins = [];
export default defineConfig({
  plugins: [
    devtools({
      /* additional options */
      autoname: true, // e.g. enable autoname
    }),
    UnoCSS(unoConfig),
    solid(),
    react({
      include: ["src/landing_page/**/*.{js,jsx,ts,tsx}"],
    }),
  ],
});

The react include seems to work, as solid stuff keeps working with that included, but there doesn't seem to be an include/exclude option for the solid start plugin? ah I figured out a solution, just running babel react preset manually on these files before using them, it's hacky but 🤷‍♂️

ryansolid•2y ago

If we can find a generic solution people would stoked. Ive only done similar hacks, like saying this folder is react, and sort of forced it in. Too our advantage React is typically precompiled in node modules, so setting a React location seems doable.

Unknown User•2y ago

Message Not Public

marcusbuffettOP•2y ago

yeah it worked pretty well, only issue was the jsx transpilation could even pass in props and such

ryansolid•2y ago

It's possible because every framework exposes references to the underlying DOM but yeah getting your project configured right is sometimes tricky.

Gaming

Programming

Is there an easy way to render React inside Solid?