Using Material UI for React on Rails 7

Viewed 288

I'm currently toying around with react on rails "the proper way", AKA using import maps as exemplified by DHH. Instead of creating everything by myself, I want to use material's components.

So, I have run ./bin/importmap pin react react-dom htm and my importmaps.rb file looked like:

#standard stuff, turbo rails etc.
...
pin_all_from "app/javascript/components", under: "components"
pin "htm", to: "https://ga.jspm.io/npm:htm@3.1.1/dist/htm.module.js"
pin "react", to: "https://ga.jspm.io/npm:react@18.2.0/index.js"
pin "react-dom", to: "https://ga.jspm.io/npm:react-dom@18.2.0/index.js"
pin "process", to: "https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.24/nodelibs/browser/process-production.js"
pin "scheduler", to: "https://ga.jspm.io/npm:scheduler@0.23.0/index.js"

under javascripts/components I have

//htm_create_element.js
import { createElement } from "react"
import htm from "htm"
export default htm.bind(createElement)

and

//index.js
import { render } from "react-dom"
import h from "components/htm_create_element"

render(
    h`<h1> Hi from HTM</h1>`,
    document.getElementById("root")
)

It was all okay (even with a hand-made clock component) and properly shown. Then, I wanted to start using material components, so I ran ./bin/importmap pin @mui/material which added about 200 lines to my importmap.rb file (does this amount make any sense?). Next, I tried addind an empty Rating component, as can be seen here. So now, my index.js is

import { render } from "react-dom"
import h from "components/htm_create_element"

import Rating from "@mui/material/Rating"


render(
    h`<h1> Hi from HTM</h1> <${Rating} name="no-value" value={null} />`,
    document.getElementById("root")
)

but nothing shows (no component is rendered) and devtools console gives me

Uncaught ReferenceError: process is not defined at chainPropTypes (chainPropTypes.js:2:7) at elementAcceptingRef.js:47:29

Any ideas on what went wrong?

0 Answers
Related