Clojurians Log v2

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...

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

The compiled React components written in ClojureScript, yes

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

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

export default App;

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

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.

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...

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.

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.

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

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

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

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

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

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

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?

It works just because you got (un)lucky.

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.