search

apache-superset / superset-ui-plugins

A collection of official Superset UI plugins
https://apache-superset.github.io/superset-ui-plugins
Apache License 2.0
86 stars 77 forks source link

Issue in using superset react plugins in angular app #20

Open madhu-aithal opened 5 years ago

madhu-aithal commented 5 years ago

Your question.

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 commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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