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 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.
   <script src="./env-config.js"></script>
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.