Fresh install - Cannot read property 'ref' of undefined

[thinq4yourself]

Bug Report

Fresh install

Load app in browser results in Cannot read property 'ref' of undefined at Object.. customPropTypes.ref in @stardust-ui/react/dist/es/components/Ref/RefFindNode.js:46 at at __webpack_require__ (bootstrap ec96bc36f002b2438d9e:678).

App running in VSCode results in the following in-editor terminal output:

Could not open RefFindNode.js in the editor.
The editor process exited with an error: spawn atom ENOENT.

To set up the editor integration, add something like REACT_EDITOR=atom 
to the .env.local file in your project folder and restart the development server. 

Learn more: https://goo.gl/MMTaZt

Adding <Provider /> or any component to our app throws this error.

Steps

A clear and concise description of steps to reproduce the problem.

1. Follow quick start

• run yarn add @stardust-ui/react
• add <Provider ... /> to root of the app
• See app crash with below error

2. Remove <Provider ... /> and add components

• Removed provider from root
• Added component to container... simple use case using search and multiline
• Same error causes app to crash with below error

3. Remove this new potential UI from node_modules and package & reinstall

• Remove from node_modules
• Rerun install with updated react, prop-types, react-dom, etc to match that of Stardust core

Expected Result

The result that you expected.

• Show app without error, since no components have been added

Actual Result

The actual result that happened 💣
The entire app crashes. This is a larger, existing app with fair+ sophistication at every level including debugging & error handling, and this is the first library that completely crashes the entire global app at bootstrap with very little to no information as to why, except perhaps in dependency conflicts or perhaps webpack issue. :( 💩

TypeError: Cannot read property 'ref' of undefined
(anonymous function)
node_modules/@stardust-ui/react/dist/es/components/Ref/RefFindNode.js:46
  43 |     RefFindNode.displayName = 'RefFindNode';
  44 |     RefFindNode.propTypes = {
  45 |         children: PropTypes.element.isRequired,
> 46 |         innerRef: customPropTypes.ref,
  47 |     };
  48 |     return RefFindNode;
  49 | }(React.Component));

---

Browser output

RefFindNode.js:46 Uncaught TypeError: Cannot read property 'ref' of undefined
    at RefFindNode.js:46
    at Object../node_modules/@stardust-ui/react/dist/es/components/Ref/RefFindNode.js (RefFindNode.js:49)
    at __webpack_require__ (bootstrap 0f74a81c5e7c5f70c7f9:678)
    at fn (bootstrap 0f74a81c5e7c5f70c7f9:88)
    at Object../node_modules/@stardust-ui/react/dist/es/components/Ref/Ref.js (Ref.js:1)
    at __webpack_require__ (bootstrap 0f74a81c5e7c5f70c7f9:678)
    at fn (bootstrap 0f74a81c5e7c5f70c7f9:88)
    at Object../node_modules/@stardust-ui/react/dist/es/lib/accessibility/FocusZone/AutoFocusZone.js (AutoFocusZone.js:1)
    at __webpack_require__ (bootstrap 0f74a81c5e7c5f70c7f9:678)
    at fn (bootstrap 0f74a81c5e7c5f70c7f9:88)
    at Object../node_modules/@stardust-ui/react/dist/es/lib/accessibility/FocusZone/index.js (index.js:1)
    at __webpack_require__ (bootstrap 0f74a81c5e7c5f70c7f9:678)
    at fn (bootstrap 0f74a81c5e7c5f70c7f9:88)
    at Object../node_modules/@stardust-ui/react/dist/es/lib/accessibility/types.js (types.js:1)
    at __webpack_require__ (bootstrap 0f74a81c5e7c5f70c7f9:678)
    at fn (bootstrap 0f74a81c5e7c5f70c7f9:88)
    at Object../node_modules/@stardust-ui/react/dist/es/lib/renderComponent.js (renderComponent.js:1)
    at __webpack_require__ (bootstrap 0f74a81c5e7c5f70c7f9:678)
    at fn (bootstrap 0f74a81c5e7c5f70c7f9:88)
    at Object../node_modules/@stardust-ui/react/dist/es/lib/UIComponent.js (UIComponent.js:1)
    at __webpack_require__ (bootstrap 0f74a81c5e7c5f70c7f9:678)
    at fn (bootstrap 0f74a81c5e7c5f70c7f9:88)
    at Object../node_modules/@stardust-ui/react/dist/es/lib/AutoControlledComponent.js (AutoControlledComponent.js:1)
    at __webpack_require__ (bootstrap 0f74a81c5e7c5f70c7f9:678)
    at fn (bootstrap 0f74a81c5e7c5f70c7f9:88)
    at Object../node_modules/@stardust-ui/react/dist/es/lib/index.js (index.js:1)
    at __webpack_require__ (bootstrap 0f74a81c5e7c5f70c7f9:678)
    at fn (bootstrap 0f74a81c5e7c5f70c7f9:88)
    at Object../node_modules/@stardust-ui/react/dist/es/themes/base/components/Dialog/dialogVariables.js (dialogVariables.js:1)
    at __webpack_require__ (bootstrap 0f74a81c5e7c5f70c7f9:678)
    at fn (bootstrap 0f74a81c5e7c5f70c7f9:88)
    at Object../node_modules/@stardust-ui/react/dist/es/themes/base/componentVariables.js (componentVariables.js:1)
    at __webpack_require__ (bootstrap 0f74a81c5e7c5f70c7f9:678)
    at fn (bootstrap 0f74a81c5e7c5f70c7f9:88)
    at Object../node_modules/@stardust-ui/react/dist/es/themes/base/index.js (index.js:1)
    at __webpack_require__ (bootstrap 0f74a81c5e7c5f70c7f9:678)
    at fn (bootstrap 0f74a81c5e7c5f70c7f9:88)
    at Object../node_modules/@stardust-ui/react/dist/es/themes/index.js (index.js:1)
    at __webpack_require__ (bootstrap 0f74a81c5e7c5f70c7f9:678)
    at fn (bootstrap 0f74a81c5e7c5f70c7f9:88)
    at Object../node_modules/@stardust-ui/react/dist/es/index.js (index.js:1)
    at __webpack_require__ (bootstrap 0f74a81c5e7c5f70c7f9:678)
    at fn (bootstrap 0f74a81c5e7c5f70c7f9:88)
    at Object../src/index.js (index.js:25)
    at __webpack_require__ (bootstrap 0f74a81c5e7c5f70c7f9:678)
    at fn (bootstrap 0f74a81c5e7c5f70c7f9:88)
    at Object.0 (validators.js:286)
    at __webpack_require__ (bootstrap 0f74a81c5e7c5f70c7f9:678)
    at bootstrap 0f74a81c5e7c5f70c7f9:724
    at bootstrap 0f74a81c5e7c5f70c7f9:724

Version

0.23.1

Testcase

We used stardust, not semantic-ui-react

Our react-scripts build/webpack config only slightly deviates from the core create-react-app's react scripts config.

Our app is not vanilla, but this low level error directly from your libraries bootstrap()... methods that break everything downstream in the build, is perplexing me.

Any expertise or direction in where to look most welcome, as we hope to adopt this in our core platform.

🙏

[layershifter]

Looks like issue with circular imports:

(!) Circular dependency: node_modules/@stardust-ui/react/dist/es/lib/index.js -> node_modules/@stardust-ui/react/dist/es/lib/AutoControlledComponent.js -> node_modules/@stardust-ui/react/dist/es/lib/UIComponent.js -> node_modules/@stardust-ui/react/dist/es/lib/renderComponent.js -> node_modules/@stardust-ui/react/dist/es/lib/accessibility/types.js -> node_modules/@stardust-ui/react/dist/es/lib/accessibility/FocusZone/index.js -> node_modules/@stardust-ui/react/dist/es/lib/accessibility/FocusZone/AutoFocusZone.js -> node_modules/@stardust-ui/react/dist/es/components/Ref/Ref.js -> node_modules/@stardust-ui/react/dist/es/components/Ref/RefFindNode.js -> node_modules/@stardust-ui/react/dist/es/lib/index.js

See any build, under Project Tests.

Proposed solution: get rid of circular imports at all, however it will be not easy for Menu/Menu.js -> Menu/MenuItem.js -> Menu/Menu.js.

[kuzhelov]

@thinq4yourself, thanks a lot for reporting the issue! Could you, please, try the following version of Stardust and check if it solves your problem: 0.25.1-alpha. There we have prototyped a fix strategy, and would like at first to verify if it would work for your case.

Also, could you, please, suggest which module resolution/loading algorithm is used for your project - is it ES or CommonJS?

Thank you!

[thinq4yourself]

HI there, @kuzhelov and thank you for the response!

I will have some time in the next week or so to test again, since we are doing a release this week and fairly busy. We use ES6 and react-scripts

[kuzhelov]

@thinq4yourself, please, consider to check the following released stardust version where we have introduced the necessary fixes: v0.26. Also, we have added CI gate checks to prevent this problem from happening in future.

Looking forward to hear results from you, to ensure that issue is resolved on your side as well.

Thank you!