action-bar in arcgis cli gives global is not defined

[arjanvanzutphen]

Expected Behavior

Empty ActionBar in the screen

Current Behavior

Completely white screen in the browser

Steps to Reproduce (for bugs)

steps to reproduce: run the arcgis cli (version 4.16.0) arcgis create jsapi-react-app -t react

install the calcite-react components (version (0.54.0) npm install calcite-react

in src/index.tsx add import ActionBar from 'calcite-react/ActionBar'; add <ActionBar /> in render function

Note: this is the minimal implementation of the ActionBar resulting in an error. Adding ActionGroups, Actions and the required icons ends up in the same error message

Result in browser: Empty screen console error: global is not defined

Context + Screenshots

Your Environment

• Version used: Calcite-react 0.54.0 Arcgis-cli: 4.16.0

• Browser Name and version: Chrome 85.0.4183.83 Edge 85.0.564.41 Freifox 80.0

• Operating System and version (desktop or mobile): Windows 10

[codylawson]

@arjanvanzutphen This looks related to two dependencies, uniqid and react-popper. I believe an update to popper will resolve the ActionBar bug you're noticing, so I'll hop on that right away. I'm still looking at solutions for uniqid but should have a fix soon.

Currently I don't have a workaround for you to move forward but I will keep this issue updated as I make progress.

[arjanvanzutphen]

One work-around I found is to include one rule of JavaScript to your highest index.(e)js file in your applicatie. Add 'window.global = window' directly within the head element.

Steps:

1. Add this rule to your index.ejs in the public folder directly after the title tag.
2. Create the env-config.js file in the root folder of your project.
3. Add the rule 'window.global = window;' to this newly created file.