Polaris-react: Embedded App Alerts and Modals issue

[resistorsoftware]

Issue summary

Copy & Paste of Shopify example code exhibits errors

Expected behavior

Example code should not exhibit errors when Copy and Pasted

Actual behavior

VM10224 hello_react.js:23264 Uncaught TypeError: Cannot read property 'open' of undefined
at HTMLDocument. (VM10224 hello_react.js:23264)

Steps to Reproduce the Problem

1. Create a simple Polaris Embedded App
2. Watch the error console

Specifications

• Polaris version: latest
• React version: a good one
• Browser: Chrome
• Device:Computer
• Operating System: MAc OS

ReactDOM.render(

<EmbeddedApp
  shopOrigin={shopOrigin}
  apiKey={apiKey}
  forceRedirect={true}
  debug={true}
>
  <Page fullWidth title="Boo Hickey App" icon={appIcon}>
    <Alert
      title="ALERT ME MY OH MY"
      open={this.state.open}
      confirmContent="I accept"
      onConfirm={() => this.setState({open: false, confirmed: true})}
    >
    Boobaby Boom Boom
    </Alert>
  </Page>
</EmbeddedApp>,
document.getElementById("app")

)

[lemonmade]

Hey @resistorsoftware, thanks for the issue. I definitely understand the confusion here, but I am not sure the alternative solutions are that much better. You need to put those examples in your own component, that does have a state, instead of throwing them directly into render. The examples we provide on the style guide/ READMEs are not intended to be put directly into a render call (at least, not those that rely on state), they need to be placed inside of a suitable component's render method, and then that component should be sent into ReactDOM.render.

[resistorsoftware]

Yes. I understand that. I am simply pointing out that since you are targeting this at developers from A-Z, only the tiny proportion that embrace React and have developed React would get that. It is my humble suggestion that Shopify provide a simple React example of an embedded App, using these components, to augment the whole process.

After all, you do not want Polaris to go the way of Batman and be just another pet project reduced to roadside rubble by time, effort and reality!!

[lemonmade]

Yeah, we have an issue to do a full, working example of an embedded app that we open source. I agree that it would be a hugely valuable thing to demonstrate, we are just trying to get the person/ people to work on it and figure out exactly what to build. The examples we provide for components and in the embedded app documentation are OK, but they are limited by not having the context of the larger app.

[resistorsoftware]

Well, for the longest time, the basic Shopify App provided in Github just using standard Rails and ERB views showed off a list of 10 products. So if you simply replicated that, you'd be chewing off a lot of stuff for people. Such as:

• the oAuth flow code
• the gems for a minimal Rails 5.1 App
• the webpack setup in Rails for React
• a suggestion on how to install Polaris to use that
• a view that renders a Polaris Product picker, in an embedded App, with a basic Page Layout.

That is not exactly simple, but nor is it a stretch for anyone with basic Rails and React skills. Yet for those new to React (like me)... it takes us from zero to actually using it in a practical manner.

There are so many ways to do the same thing with this platform, by demonstrating just one way, the favour to developers would surely be appreciated. Already, here, I skipped by the fact that Polaris is mostly useless without the database/backend connections, which for most developers will all change with React too, moving to Redux or whatever they call it. So Shopify has somewhat forced us to use a framework involving a hundred plus moving parts (ever count the dependencies?), so one would think the onus is on them to shepherd the way.

So a Rails, Redux, Polaris example is not a stretch?

Sure, a lot of people will write this off and simply say, pffft. Go learn Rails, React and Redux without any concern for Polaris, and then hey, boom, Bob is your uncle, and Polaris is a joke that just works and drops right in. And they would be right to an extent. That is sure to ensure though that many developers just write off this whole exercise as a waste of time and move on to other things that are easier, and less work-in-progress/wait-and-see.

Just because Shopify is dogfooding does not mean much based on past experience with that.

[lemonmade]

Good suggestion for the kind of app to build 👍