Polaris-react: isElementOfType doesn't work in my project, resulting in nested Stack.Item elements

[isaacbowen]

Issue summary

isElementOfType, from @shopify/react-utilities/components, does not work in development for my project.

I've worked around this locally by using react-hot-loader's areComponentsEqual - see docs - but editing y'all's code in my node_modules is not a tenable solution. :D

Expected behavior

I expect Stack to _not_ wrap my Stack.Item elements.

Actual behavior

It does. :) Every explicit Stack.Item usage within a Stack gets wrapped, resulting in nested Stack.Item elements.

Steps to reproduce the problem

I'd only seen this happen with my own code until I tried the new Modal component, and I saw the issue manifest in Modal.Header.

Without setting up a project just to illustrate this (I'm not opposed, let me know if you want that), simply _using_ Modal (in development, for my project, etc) results in a DOM that looks like this:

<div class="Polaris-Stack Polaris-Stack--alignmentCenter">
  <div class="Polaris-Stack__Item">
    <div class="Polaris-Stack__Item Polaris-Stack__Item--fill">

Specifications

If it helps, see my yarn.lock. :)

• Polaris version: 2.1.2
• React version: 16.4.0
• Browser: Chrome 66.0.3359.181
• Device: Macbook
• Operating System: macOS 10.13.4

[chloerice]

Hi @isaacbowen, thanks for raising this issue. This is a known problem (in development only) and a fix is in progress.

[djirdehh]

@chloerice 👋

Just wondering; is there a particular ETA for when we expect this to be resolved? No pressure, but just wanted to coordinate current work in progress :).

cc @jaxee

[jaxee]

:wave: Hey everyone!
I have been told that @GoodForOneFare is taking on this issue.
He mentioned this can be fixed by using yarn sewing-kit dev --no-hot

[isaacbowen]

For those of us who (a) are using react-hot-loader, (b) don't have sewing-kit, and (c) are feeling like some haxx, you can open node_modules/@shopify/polaris/node_modules/@shopify/react-utilities/components.js, and replace the innards of function hotReloadComponentCheck(AComponent, AnotherComponent) with the following:

return require('react-hot-loader').areComponentsEqual(AComponent, AnotherComponent);