Polaris-react: ResourcePicker not showing in version 3.4.0

[alexdover]

Issue summary

I am working on updating an existing app from version 2.4.0 to the latest version, 3.4.0 - everything has worked well except the ResourcePicker component, which no longer displays.

I have set the Api Key on the AppProvider and even with the most basic example, the picker will not display.

Expected behavior

ResourcePicker should show when setting the open boolean to true

Actual behavior

No ResourcePicker is displayed.

Steps to reproduce the problem

1. Use the ResourcePicker
2. Ensure wrapped in AppProvider

Reduced test case

Here is the simple code I am using - I'm hoping I am doing something obvious wrong!

import React from 'react';
import ReactDOM from 'react-dom';

import { AppProvider } from '@shopify/polaris';

import EmbeddedAppResourcePickerExample from './components/EmbeddedAppResourcePickerExample';

const apiKey = window.ShopifyAppSettings.apiKey;

ReactDOM.render(
    <AppProvider apiKey={apiKey} shopOrigin="al-local-apps.myshopify.com">
        <EmbeddedAppResourcePickerExample />
    </AppProvider>,
    document.getElementById('app'),
);

My basic example component

import React, {Component} from 'react';

import {
    ResourcePicker,
    Button
} from '@shopify/polaris';

class EmbeddedAppResourcePickerExample extends Component {
    constructor(props) {
        super(props);

        this.state = {
            resourcePickerOpen: false,
        }
    }

    render() {
        return (
            <div>
                <pre>{JSON.stringify(this.state.resourcePickerOpen)}</pre>
                <ResourcePicker
                  resourceType="Product"
                  open={this.state.resourcePickerOpen}
                  onSelection={({selection}) => {
                    console.log('Selected products: ', selection);
                    this.setState({resourcePickerOpen: false});
                  }}
                  onCancel={() => this.setState({resourcePickerOpen: false})}
                ></ResourcePicker>
                <Button onClick={() => this.setState({resourcePickerOpen: true})}>Open...</Button>
            </div>
        );
    }
}

export default EmbeddedAppResourcePickerExample;

When clicking the button to open, I see the resourcePickerOpen variable change to true, but the picker does not show.

Specifications

• Are you using the React components? (Y/N):
• Polaris version number: 3.4.0
• Browser: Chrome
• Device: Mac
• Operating System:

[sam-cnet]

What version of @shopify/app-bridge are you using? Also I don't quite understand this benefit of this line:

<pre>{JSON.stringify(this.state.resourcePickerOpen)}</pre>

Update: Ok I get why you did the above line. May be helpful to get React Chrome extension so you can take a look at the state and props in chrome > inspect element rather than using code.

Another thing you could try is wrap the resourcepicker in a <Page /> component.

[dan-gamble]

I have this same issue when following the Shopify node app tutorial

Have the API_KEY passed as well as it being an embedded app. It doesn't seem to render in to the DOM at all for me.

[dan-gamble]

Never mind, this was just me being stupid and me thinking there was an issue with the docs.

If anyone does come by this for whatever reason the line for AppProvider is:

<AppProvider shopOrigin={this.state.shopOrigin} apiKey={API_KEY} forceRedirect>

And not

const { SHOPIFY_API_KEY } = process.env;
<AppProvider shopOrigin={this.state.shopOrigin} apiKey={SHOPIFY_API_KEY} forceRedirect>

I didn't read the

  webpack: config => {
    const env = { API_KEY: JSON.stringify(process.env.SHOPIFY_API_KEY) };

    config.plugins.push(new webpack.DefinePlugin(env));
    return config;
  }

In the next.config.js

Sorry for derailing this issue

[alexdover]

I wasn't able to resolve this in my app, I was using the latest Polaris and latest App Bridge. However, it turns out my production app hadn't been updated to use app bridge anyway, I understand it has been delayed for apps with the POS extension enabled. So I had to go back to using the embedded SDK and then I just used the methods available in that.

[sam-cnet]

@alexdover Thanks for sharing that I too plan on integrating with Shopify POS so hopefully things will be sorted out by then :p

[alvinslee]

@dan-gamble I did the exact same thing in departing from the tutorial instructions and inserting my API_KEY the way I thought it was supposed to be done (as process.env.SHOPIFY_API_KEY). Your discovery resolved the issue for me. I'll go back to following instructions like they're written. :sweat_smile: