Polaris-react: Modal in Polaris not work

Created on 19 Nov 2018  Â·  14Comments  Â·  Source: Shopify/polaris-react

Issue summary

I upgrade to Polaris 3x, and added apiKey to AppProvider But Modal not work and show this error!!!

screen shot 2018-11-19 at 10 55 14 am

screen shot 2018-11-19 at 10 50 16 am

Expected behavior

Actual behavior

Steps to reproduce the problem

1.
1.
1.

Reduced test case

The best way to get your bug fixed is to provide a reduced test case. This CodeSandbox template is a great starting point.

Specifications

  • Are you using the React components? (Y/N): Y
  • Polaris version number: 3.1.0
  • Browser: Chrome
  • Device: MacBook Pro
  • Operating System: OSX Mojave
App Bridge
Source
picture fchienvuhoang

Most helpful comment

Hi @dfmcphee,
I tried the code you provided with the same props (I just changed open and onClose props)
And in embedded app I get this error:
image

picture rmtngh on 26 Nov 2018
👍4

All 14 comments

Hey @fchienvuhoang. Thanks for opening the issue. The modal component does not support passing JSX children when using it through App Bridge.

Instead you will want to point the modal at your iframe source directly with something like:

<Modal
  open={this.state.instructionalVideoModal}
  onClose={this.closeInstructionVideo}
  title="Instruction Video"
  primaryAction={{
    content: 'Done',
    onAction: this.closeInstructionVideo,
  }}
  src="https://www.youtube.com/embed/xhta4n68p_g?rel=0&autoplay=1"
/>
dfmcphee picture dfmcphee on 23 Nov 2018
❤3 👍1

The modal component does not support passing JSX children when using it through App Bridge.

Hello, @dfmcphee!
Does the team plan to implement render of child components inside Modal? Current behavior makes Modal useless in most cases for me personally.

meecrobe picture meecrobe on 24 Nov 2018
👍1

@dfmcphee thank you, I will try it!

fchienvuhoang picture fchienvuhoang on 25 Nov 2018

Hi @dfmcphee, may be not a