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?