3

I am trying to render react components inside the angular 7 app. I am able to render simple react components but I am getting the below error (in browser console) when I try to render Superset react plugins inside the angular app. 

SupersetClientClass.js:2 Uncaught ReferenceError: regeneratorRuntime is not defined
    at SupersetClientClass.js:2
    at SupersetClientClass.js:2
    at Module../node_modules/@superset-ui/connection/esm/SupersetClientClass.js (SupersetClientClass.js:3)
    at __webpack_require__ (bootstrap:78)
    at Module../node_modules/@superset-ui/connection/esm/SupersetClient.js (SupersetClient.js:1)
    at __webpack_require__ (bootstrap:78)
    at Module../node_modules/@superset-ui/connection/esm/index.js (index.js:1)
    at __webpack_require__ (bootstrap:78)
    at Module../node_modules/@superset-ui/chart/esm/clients/ChartClient.js (ChartClient.js:1)
    at __webpack_require__ (bootstrap:78)

I searched online about this error, but I could not resolve it. It seems to be an error related to babel. Please let me know if I am missing something as I am new to react js. Any help is highly appreciated. Thanks

Madhusudhan Aithal
  • 31
  • 2
  • Why would you attempt such a thing? Would it not make more sense to put the React logic in an Angular component? – Adrian Brand Mar 12 '19 at 05:09
  • 1
    Hi @AdrianBrand. I need to use the Superset plugins inside angular for displaying some visualizations. These plugins are written in react js. So, it is better to reuse those plugins instead of writing the logic in angular as it would take considerable amount of time for rewriting it. – Madhusudhan Aithal Mar 12 '19 at 06:02

1 Answers1

1

It will be the same as doing it in a html file but you would add your react build files to the angular cli json file in the scripts section and then add the css to the styles section.

Then in the component you want to bootstrap the app have a container component and add the bootstrap code to the ngAfterViewInit method.

<div #react></div>

and in the Typescript

@ViewChild('react') reactElement;

ngAfterViewInit() {
  ReactDOM.render(React.createElement(App, null), this.reactElement.nativeElement);
}
Adrian Brand
  • 20,384
  • 4
  • 39
  • 60
  • Thanks for your help. I have tried this with a simple react component (such as some text), but as I have mentioned in my question, it is not working with [Apache Superset plugins](https://github.com/apache-superset/superset-ui-plugins) which are written in react js. Please let me know if there is any other way to solve this. For me, it looks like this is an issue coming from superset react components. – Madhusudhan Aithal Mar 13 '19 at 03:49