Polaris-react: window is not defined: AppProvider component seems not SSR-ready for embedded apps

[sbstnmsch]

Issue summary

I am building a Shopify app using Polaris 2.3.1, Typescript and Next.js, which server-side renders (SSR). Everything is working smooth while not running embedded in the admin.

Running server-side rendered in embedded mode results in a server error: window is not defined

Expected behavior

Polaris should be able to run embedded in admin even if server rendered.

Actual behavior

Crashes server with 500: window is not defined when running embedded in admin.

Steps to reproduce the problem

Starting a SSR app in the admin with apiKey and shopOrigin passed to AppProvider results in:

{ ReferenceError: window is not defined
  at checkFrameRedirect (.../node_modules/@shopify/polaris/index.js:1098:5)

Yikes. There is no window object on the server.

  ...

  static async getInitialProps(ctx) {
    return { ...ctx.req.shopify };
  }

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <AppProvider
        apiKey={this.props.apiKey}
        shopOrigin={`https://${this.props.shop}.myshopify.com`}
      >
        <Page>
         ....
    }

Specifications

• Are you using the React components? (Y/N): Y
• Polaris version number: 2.3.1
• Browser: Chrome Canary
• Device: MacBook
• Operating System: MacOS 10.13.5

Thoughts

A potential fix could be to move the inter-frame-messaging and redirection setup to a later react live-cycle which runs in browser, not server.

[chloerice]

Hi @sbstnmsch, thanks for raising this! I'm fixing the SSR support of a couple of other components at the moment, I'll add this to that PR as well.

[sbstnmsch]

Nice! For the moment there is a workaround to temporarily switch to CSR:

  ...

  componentDidMount() {
    // This happens in browser - therefore we are ready to use `window`
    this.setState({ workaround: true });
  }

  render() {
    if (!this.state.workaround) {
      return (<div/>);
    }
    return (
      <AppProvider
        apiKey={this.props.apiKey}
        shopOrigin={`https://${this.props.shop}`}
      >
        ...
      </AppProvider>
    );
  }

Thanks for the quick reply!

[ry5n]

I’ve bumped this up the queue internally. Since AppProvider is always required, this is a priority for us.

[wuichen]

@sbstnmsch would you mind sharing where you put the AppProvider in nextjs? inside _document or _app?

[sbstnmsch]

Neither nor. I've put it directly into the render method of the page component, like in my comment from July 13th, https://github.com/Shopify/polaris/issues/372#issuecomment-404676882. So let's say I've put it into /pages/index.js.

[tmlayton]

@sbstnmsch @wuichen just a quick update this will be fixed in v3.0.0.

[wuichen]

@tmlayton @sbstnmsch thanks!
at the same time, when im using the workaround. im seeing this error

index.es.js:983 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('http://xxx.myshopify.com') does not match the recipient window's origin ('http://localhost:3000').

will this issue also be solved?
i think its due to iframe embed access?

[tmlayton]

will this issue also be solved?

Yes, this is related to shopOrigin not matching the host. shopOrigin is no longer required in v3.0.0, we sort it out for you in the background (but it can still be overridden if you want).

[wuichen]

@tmlayton 👍

[dhmacs]

@tmlayton I'm on Polaris v3.1.1 and the AppProvider is still not working with SSR (Next.js). When will this be fixed?

[thibautvdu]

Still not working with SSR...
It's a shame that Polaris' core component isn't working with shopify's official workshop

[dleroux]

I think I'm seeing 2 issues here. Regarding SSR, does anyone have code they can share to help reproduce the issue. I've setup an app with Next.js and it's working fine with 3.1.1

[danrosenthal]

This seems related: https://github.com/Shopify/app-bridge/issues/538

[khoerling]

Confirmed-- the latest 3.1.1 is referencing "window." which busts server renders. It's possible to mock objects as stubs, etc... and drive forward at the moment though a proper fix should happen upstream in Polaris:
Error while running `getDataFromTree` ReferenceError: window is not defined at Object.n [as getLocation] (/Users/keith/projects/shopify-auth-app/node_modules/@shopify/app-bridge/index.js:1:72703) at n (/Users/keith/projects/shopify-auth-app/node_modules/@shopify/app-bridge/index.js:1:69503) at Object.a [as getShopOrigin] (/Users/keith/projects/shopify-auth-app/node_modules/@shopify/app-bridge/index.js:1:69739) at createAppProviderContext (/Users/keith/projects/shopify-auth-app/node_modules/@shopify/polaris/index.js:1214:45) at new AppProvider (/Users/keith/projects/shopify-auth-app/node_modules/@shopify/polaris/index.js:1259:32)

Thank you guys, for the awesome widgets

[tmlayton]

This is now fixed, please use v3.2.1 or later for server side rendering support.

[junaid33]

I'm also using Next.js to build a Shopify app, but can't get the ResourcePicker to show up on the Shopify admin. I have added the AppProvider component to _app.js and have provided the apiKey as the docs say. I have updated to 3.2.1.

[Joe-Brady]

@tmlayton I'm still encountering this issue with SSR, version 3.4.0 of polaris-react as well as version 3.2.1, if I import the stylesheet directly from node_modules:

webpack:///./node_modules/style-loader/lib/addStyles.js?:23
        return window && document && document.all && !window.atob;
        ^

ReferenceError: window is not defined
    at eval (webpack:///./node_modules/style-loader/lib/addStyles.js?:23:2)
    at eval (webpack:///./node_modules/style-loader/lib/addStyles.js?:12:46)
    at module.exports (webpack:///./node_modules/style-loader/lib/addStyles.js?:80:88)

[numediaweb]

The issue still exists on "@shopify/polaris": "^3.13.0" or am I missing something?