Fork me on GitHub
#reagent
<
2021-04-09
>
tvirolai11:04:12

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-himik12:04:41

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

tvirolai12:04:46

The compiled React components written in ClojureScript, yes

tvirolai12:04:33

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-himik12:04:22

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

tvirolai12:04:28

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.

tvirolai12:04:25

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-himik13:04:00

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-himik13:04:39

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-himik13:04:04

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

tvirolai13:04:26

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

p-himik13:04:07

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

p-himik13:04:40

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

tvirolai13:04:17

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

tvirolai13:04:14

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-himik13:04:19

It works just because you got (un)lucky.

p-himik13:04:52

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.

👌 3