Angular run time error of superset-embedded-sdk

[Tejas20002]

Bug description

Error occur while running the angular
Command line to run angular
ng serve

Error Description as terminal show

Error: ./node_modules/@superset-ui/embedded-sdk/lib/index.js 82:45
Module parse failed: Unexpected token (82:45)
File was processed with these loaders:
 * ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js
 * ./node_modules/@ngtools/webpack/src/ivy/index.js
You may need an additional loader to handle the result of these loaders.
|         uiConfig: `${calculateConfig()}`
|       } : undefined;
>       const filterConfig = dashboardUiConfig?.filters || {};
|       const filterConfigKeys = Object.keys(filterConfig);
|       const filterConfigUrlParams = Object.fromEntries(filterConfigKeys.map(key => [_const.DASHBOARD_UI_FILTER_CONFIG_URL_PARAM_KEY[key], filterConfig[key]]));

Node Version 14
Angular version 11

How to reproduce the bug

while running the angular error show in terminal

Error: ./node_modules/@superset-ui/embedded-sdk/lib/index.js 82:45
Module parse failed: Unexpected token (82:45)
File was processed with these loaders:
 * ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js
 * ./node_modules/@ngtools/webpack/src/ivy/index.js
You may need an additional loader to handle the result of these loaders.
|         uiConfig: `${calculateConfig()}`
|       } : undefined;
>       const filterConfig = dashboardUiConfig?.filters || {};
|       const filterConfigKeys = Object.keys(filterConfig);
|       const filterConfigUrlParams = Object.fromEntries(filterConfigKeys.map(key => [_const.DASHBOARD_UI_FILTER_CONFIG_URL_PARAM_KEY[key], filterConfig[key]]));

Screenshots/recordings

No response

Superset version

master / latest-dev

Python version

3.9

Node version

16

Browser

Chrome

Additional context

No response

Checklist

• I have searched Superset docs and Slack and didn't find a solution to my problem.
• I have searched the GitHub issue tracker and didn't find a similar bug report.
• I have checked Superset's logs for errors and if I found a relevant Python stacktrace, I included it here as text in the "additional context" section.

[dosubot]

Hey there, @Tejas20002! 🎉 I'm Dosu, a bot here to help you navigate the quirks and queries of the Superset repo while we wait for a human maintainer to swoop in. If you've got bugs to squash, questions to ask, or are looking to contribute, I'm your go-to assistant in the meantime. Now, let's dive into this issue of yours and see if we can't get to the bottom of it together!

[Tejas20002]

while running the angular project i facing error and i cannot my site

[dosubot]

The error you're encountering with the @superset-ui/embedded-sdk in your Angular project is likely due to a combination of factors related to ES6 syntax parsing, TypeScript, and Webpack configurations. Here's a streamlined approach to troubleshoot and potentially resolve the issue:

1. Ensure TypeScript Compatibility: Verify your project's tsconfig.json aligns with TypeScript version ^4.5.5, as used by @superset-ui/embedded-sdk.

2. Adjust Webpack Configuration: Your Angular project's Webpack configuration may need to be updated to properly handle .js, .ts, and .tsx files with babel-loader.

3. Check Babel Configuration: Make sure your project includes a .babelrc or equivalent configuration that matches the Babel setup used by the SDK, particularly with presets like @babel/preset-env and @babel/preset-typescript.

4. Review Dependencies Compatibility: Confirm that all dependencies and peer dependencies are compatible, especially those directly related to @superset-ui/embedded-sdk.

5. Angular Version Check: Since you're on Angular 11, ensure there are no compatibility issues with the SDK version you're using.

6. Node Version: Consider using Node version v18.20.1 as recommended by Superset, especially if you're currently on Node 14 or 16.

For further assistance, you might want to look into similar issues reported in the @superset-ui/embedded-sdk GitHub repository or consider reporting this issue if it persists after trying the above steps.

Details

Sources

• embedded-sdk Issue while integrating it with Angular
• superset-embedded-sdk/package.json
• superset-frontend/.nvmrc
• superset-embedded-sdk/README.md

About Dosu
This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

To continue the conversation, mention @dosu.