Issue in using superset react plugins in angular app

[madhu-aithal]

Your question.

• How do I use superset react plugins in angular 7 app?

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 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. Thank you!

[williaster]

as this is a library we've left polyfilling up to the lib consumers to minimize bundle size. you likely need to import '@babel/polyfill;' at the entry point of your app (as Superset does).

alternatively you may be able to just add the runtime dep as described here:

yarn add @babel/plugin-transform-runtime --dev
yarn add @babel/runtime

...
// babel.config.js

"plugins": [
    ["@babel/plugin-transform-runtime",
      {
        "regenerator": true
      }
    ]
  ],

note that this requires babel 7

[madhu-aithal]

@williaster Sorry for late reply.
I installed @babel/polyfill and tried adding import '@babel/polyfill;' in polyfills.ts in my angular project. Now I am getting the below error.

index.js:31 Uncaught ReferenceError: global is not defined
    at Object../node_modules/@babel/polyfill/lib/index.js (index.js:31)
    at __webpack_require__ (bootstrap:83)
    at Module../src/polyfills.ts (polyfills.ts:1)
    at __webpack_require__ (bootstrap:83)
    at Object.1 (polyfills.ts:81)
    at __webpack_require__ (bootstrap:83)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at polyfills.js:1

compiler.js:2427 Uncaught Error: Can't resolve all parameters for ApplicationModule: (?).
    at syntaxError (compiler.js:2427)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getDependenciesMetadata (compiler.js:18690)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getTypeMetadata (compiler.js:18583)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (compiler.js:18451)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleSummary (compiler.js:18261)
    at compiler.js:18375
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (compiler.js:18363)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleSummary (compiler.js:18261)
    at compiler.js:18348

Currently, I am not using any babel configuration in my app.

[williaster]

Hmm, no idea what that error is. Maybe ditch the polyfill and instead just add the runtime since that's the original error. Please follow the instructions in the babel documentation.

// app root
import '@babel/runtime/regenerator';

[madhu-aithal]

I added the import statement, which you mentioned, in the App Component (root component) and followed instructions in the babel documentation. But I am still getting the below error.
SupersetClientClass.js:2 Uncaught ReferenceError: regeneratorRuntime is not defined

[williaster]

Sorry, I'm not going to be able to help you without more information and a minimally reproducible example.