reagent

A minimalistic ClojureScript interface to React.js http://reagent-project.github.io/
tvirolai 2021-04-09T11:46:12.097700Z

Hi, I'm being bitten by a strange issue when trying to compile Reagent code to React components using Shadow-CLJS. The problem is that when I'm compiling Reagent to React components, the components fail to render on the React side if they use Material UI components, with the error: `Uncaught Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.` Could this be caused by the fact that Material UI components use React Hooks, which are disallowed in React class components? While debugging this, I set up a minimal test project to investigate the issue: https://github.com/tvirolai/mui-cljs-test. Here, `Component1` renders while `Component2` (with a Material UI icon) fails with the error. Any idea how to get around the issue? I asked around in the #clojurescript channel a couple of weeks ago, but am yet to find a workaround...

p-himik 2021-04-09T12:03:41.098Z

Just to make sure I understand - are you trying to use CLJS from within JS?

tvirolai 2021-04-09T12:05:46.098200Z

The compiled React components written in ClojureScript, yes

tvirolai 2021-04-09T12:07:33.098400Z

import './App.css';
import { Component1, Component2 } from './demo.js'

function App() {
  return (
    <div className="App">
      <Component1 />
    </div>
  );
}

export default App;
The App.js file of the test project looks like this and works without issues. If I change it to use Component2 instead, it fails to render, apparently because it contains a Material UI icon component.

p-himik 2021-04-09T12:21:22.099Z

And do you want to use Reagent specifically or just something that uses Hiccup or even anything in CLJS?

tvirolai 2021-04-09T12:26:28.099200Z

I have a small application (a widget) written using Reagent that I need to be able to use inside multiple different JS applications. It would be ideal if a React application would be able to use it as a React component.

tvirolai 2021-04-09T12:33:25.099400Z

I was able to compile an earlier version of the said app into a single React component and get it to render just fine inside a React application. However, the latest version uses Material UI and fails to render because of it...

p-himik 2021-04-09T13:22:00.099600Z

A preliminary debugging shows that it has absolutely nothing to do with Reagent. If I remove all traces of it and just use raw React from CLJS, it fails just as well.

p-himik 2021-04-09T13:22:39.099800Z

At the same time, the same exact code in JS works just fine. And when I import the same icon from both JS and CLJS, I get a different object, which is interesting.

p-himik 2021-04-09T13:29:04.100Z

I'm pretty sure that Webpack conflicts with shadow-cljs. Both have their own version of React, and it just doesn't work.

tvirolai 2021-04-09T13:32:26.100200Z

Ok, that sound plausible. Thanks, I'll investigate that more

p-himik 2021-04-09T13:33:54.100400Z

Maybe this'll help: https://shadow-cljs.github.io/docs/UsersGuide.html#target-npm-module

p-himik 2021-04-09T13:34:07.100600Z

But :target :npm-module crashes my shadow-cljs for some reason.

p-himik 2021-04-09T13:34:40.100800Z

If that doesn't work for you as well, then the question is probably more suited for #shadow-cljs

tvirolai 2021-04-09T13:38:17.101Z

Ok, I'll have to check those out too. I actually already tried the shadow-cljs channel but was directed here instead 😄

tvirolai 2021-04-09T13:39:14.101200Z

I just wonder why the other dummy component works in JS without issues. Perhaps because it doesn't depend on React while Material UI does?

p-himik 2021-04-09T13:41:19.101400Z

It works just because you got (un)lucky.

p-himik 2021-04-09T13:41:52.101600Z

There are no checks for functional components, so probably nothing relies on the global React state, then ends up being two different global states in the case of Webpack+shadow-cljs.

👌 1