Unable to perform npm run build when @prismatic-io/embedded is used as dependency in react

[kunaldhyani026]

While performing the build - npm run build, We are encountered with following error -

There seems to be some issue with @prismatic-io/embedded/dist/index.js where t variable is redeclared.

[build:*webpack] ERROR in practice-admin-console-ui.js
[build:*webpack] practice-admin-console-ui.js from Terser plugin
[build:*webpack] "t" is redeclared [webpack://./node_modules/@prismatic-io/embedded/dist/index.js:2,178320][practice-admin-console-ui.js:592,178172]
[build:*webpack]     at js_error (C:\D\test\admin-console-ui\node_modules\terser\dist\bundle.min.js:554:11)
[build:*webpack]     at TreeWalker.visit (C:\D\test\admin-console-ui\node_modules\terser\dist\bundle.min.js:11329:17)
[build:*webpack]     at TreeWalker._visit (C:\D\test\admin-console-ui\node_modules\terser\dist\bundle.min.js:6514:24)
[build:*webpack]     at AST_SymbolLet._walk (C:\D\test\admin-console-ui\node_modules\terser\dist\bundle.min.js:3705:24)
[build:*webpack]     at AST_VarDef.<anonymous> (C:\D\test\admin-console-ui\node_modules\terser\dist\bundle.min.js:4949:23)
[build:*webpack]     at TreeWalker._visit (C:\D\test\admin-console-ui\node_modules\terser\dist\bundle.min.js:6518:21)
[build:*webpack]     at AST_VarDef._walk (C:\D\test\admin-console-ui\node_modules\terser\dist\bundle.min.js:4948:24)
[build:*webpack]     at AST_Let.<anonymous> (C:\D\test\admin-console-ui\node_modules\terser\dist\bundle.min.js:4886:32)
[build:*webpack]     at TreeWalker._visit (C:\D\test\admin-console-ui\node_modules\terser\dist\bundle.min.js:6518:21)
[build:*webpack]     at AST_Let._walk (C:\D\test\admin-console-ui\node_modules\terser\dist\bundle.min.js:4883:24)
[build:*webpack]
[build:*webpack] webpack 5.74.0 compiled with 1 error in 85688 ms
[build:*webpack] npm run build:webpack exited with code 1

This how the package.json looks like :

{
  "name": "@practice/admin-console-ui",
  "scripts": {
    "start": "webpack serve --port 5900",
    "start:standalone": "webpack serve --env standalone",
    "build": "concurrently npm:build:*",
    "build:webpack": "webpack --mode=production",
    "analyze": "webpack --mode=production --env analyze",
    "lint": "eslint src --ext js",
    "format": "prettier --write .",
    "check-format": "prettier --check .",
    "test": "cross-env BABEL_ENV=test jest",
    "watch-tests": "cross-env BABEL_ENV=test jest --watch",
    "coverage": "cross-env BABEL_ENV=test jest --coverage"
  },
  "devDependencies": {
    "@babel/core": "^7.15.0",
    "@babel/eslint-parser": "^7.15.0",
    "@babel/plugin-transform-runtime": "^7.15.0",
    "@babel/preset-env": "^7.15.0",
    "@babel/preset-react": "^7.14.5",
    "@babel/runtime": "^7.15.3",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^12.0.0",
    "babel-jest": "^27.0.6",
    "concurrently": "^6.2.1",
    "cross-env": "^7.0.3",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-config-react-important-stuff": "^3.0.0",
    "eslint-plugin-prettier": "^3.4.1",
    "husky": "^7.0.2",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^27.0.6",
    "jest-cli": "^27.0.6",
    "prettier": "^2.3.2",
    "pretty-quick": "^3.1.1",
    "webpack": "^5.51.1",
    "webpack-cli": "^4.8.0",
    "webpack-config-single-spa-react": "^4.0.0",
    "webpack-dev-server": "^4.0.0",
    "webpack-merge": "^5.8.0"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "5.2.0",
    "single-spa-react": "^4.3.1",
    "devextreme": "22.1.6",
    "devextreme-react": "22.1.6",
    "moment": "^2.29.1",
    "moment-timezone": "^0.5.33",
    "semantic-ui-react": "2.1.2",
    "@prismatic-io/embedded": "^2.9.0"
  }
}

Please check and confirm.

Thanks

[taylorreece]

Hey @kunaldhyani026 ,

I tried building a minimal react app that imports this embedded SDK with the package.json you provided. I used a vanilla webpack config with the Terser plugin for minimization, and was able to build: What does your webpack.config.js look like? If possible, could you put a minimal repro in a public repro, and we'll check it out? Thanks!

[kunaldhyani026]

Hi @taylorreece

Surely will put a minimal repro reproducing the issue. Meanwhile, please find below how our webpack.config.js looks like -

let webpack = require("webpack");
const { merge } = require("webpack-merge");
const singleSpaDefaults = require("webpack-config-single-spa-react");

module.exports = (webpackConfigEnv, argv) => {

  const defaultConfig = singleSpaDefaults({
    orgName: "practice",
    projectName: "admin-console-ui",
    webpackConfigEnv,
    argv,
  });

  return merge(defaultConfig, {
    // modify the webpack config however you'd like to by adding to this object
    module: {
      rules: [
        {
          test: /\.(eot|svg|ttf|woff|woff2)$/,
          use: "url-loader?name=[name].[ext]",
        },
      ],
    },
    externals: {
      "practice-listing-ui": "@practice/listing-ui",
      "practice-analytics-ui": "@practice/analytics-ui",
      "practice-customer-ui-utils": "@practice/customer-ui-utils"
    }
  });
};

Thanks