Shopify ResourcePicker not displayed

Multi tool use
Multi tool use





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}







0















The Polaris ResourcePicker component is not showing at all in my embedded app and I don't know why. Here is my code:



import React from "react";
import ReactDom from "react-dom";
import * as PropTypes from 'prop-types';

const session = require('express-session');

import {AppProvider, Page } from '@shopify/polaris';
import {ResourcePicker} from '@shopify/app-bridge/actions';

class ExchangeApp extends React.Component {
// This line is very important! It tells React to attach the `easdk`
// object to `this.context` within your component.
static contextTypes = {
easdk: PropTypes.object,
};

state = {
resourcePickerOpen: true,
};

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

ReactDom.render(
<AppProvider apiKey="532cc1c7fa852e9bbf61c71bcbaa5a74">
<ExchangeApp />
</AppProvider>,
document.querySelector('#root'),
);


In the browser's console I'm getting the following error:



main.js:3584 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `ExchangeApp`.
at invariant (main.js:3584)
at createFiberFromTypeAndProps (main.js:13629)
at createFiberFromElement (main.js:13650)
at reconcileSingleElement (main.js:17327)
at reconcileChildFibers (main.js:17384)
at reconcileChildren (main.js:17753)
at finishClassComponent (main.js:18080)
at updateClassComponent (main.js:18018)
at beginWork (main.js:18864)
at performUnitOfWork (main.js:21679)


Many thanks in advance for any help!










share|improve this question





























    0















    The Polaris ResourcePicker component is not showing at all in my embedded app and I don't know why. Here is my code:



    import React from "react";
    import ReactDom from "react-dom";
    import * as PropTypes from 'prop-types';

    const session = require('express-session');

    import {AppProvider, Page } from '@shopify/polaris';
    import {ResourcePicker} from '@shopify/app-bridge/actions';

    class ExchangeApp extends React.Component {
    // This line is very important! It tells React to attach the `easdk`
    // object to `this.context` within your component.
    static contextTypes = {
    easdk: PropTypes.object,
    };

    state = {
    resourcePickerOpen: true,
    };

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

    ReactDom.render(
    <AppProvider apiKey="532cc1c7fa852e9bbf61c71bcbaa5a74">
    <ExchangeApp />
    </AppProvider>,
    document.querySelector('#root'),
    );


    In the browser's console I'm getting the following error:



    main.js:3584 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

    Check the render method of `ExchangeApp`.
    at invariant (main.js:3584)
    at createFiberFromTypeAndProps (main.js:13629)
    at createFiberFromElement (main.js:13650)
    at reconcileSingleElement (main.js:17327)
    at reconcileChildFibers (main.js:17384)
    at reconcileChildren (main.js:17753)
    at finishClassComponent (main.js:18080)
    at updateClassComponent (main.js:18018)
    at beginWork (main.js:18864)
    at performUnitOfWork (main.js:21679)


    Many thanks in advance for any help!










    share|improve this question

























      0












      0








      0








      The Polaris ResourcePicker component is not showing at all in my embedded app and I don't know why. Here is my code:



      import React from "react";
      import ReactDom from "react-dom";
      import * as PropTypes from 'prop-types';

      const session = require('express-session');

      import {AppProvider, Page } from '@shopify/polaris';
      import {ResourcePicker} from '@shopify/app-bridge/actions';

      class ExchangeApp extends React.Component {
      // This line is very important! It tells React to attach the `easdk`
      // object to `this.context` within your component.
      static contextTypes = {
      easdk: PropTypes.object,
      };

      state = {
      resourcePickerOpen: true,
      };

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

      ReactDom.render(
      <AppProvider apiKey="532cc1c7fa852e9bbf61c71bcbaa5a74">
      <ExchangeApp />
      </AppProvider>,
      document.querySelector('#root'),
      );


      In the browser's console I'm getting the following error:



      main.js:3584 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

      Check the render method of `ExchangeApp`.
      at invariant (main.js:3584)
      at createFiberFromTypeAndProps (main.js:13629)
      at createFiberFromElement (main.js:13650)
      at reconcileSingleElement (main.js:17327)
      at reconcileChildFibers (main.js:17384)
      at reconcileChildren (main.js:17753)
      at finishClassComponent (main.js:18080)
      at updateClassComponent (main.js:18018)
      at beginWork (main.js:18864)
      at performUnitOfWork (main.js:21679)


      Many thanks in advance for any help!










      share|improve this question














      The Polaris ResourcePicker component is not showing at all in my embedded app and I don't know why. Here is my code:



      import React from "react";
      import ReactDom from "react-dom";
      import * as PropTypes from 'prop-types';

      const session = require('express-session');

      import {AppProvider, Page } from '@shopify/polaris';
      import {ResourcePicker} from '@shopify/app-bridge/actions';

      class ExchangeApp extends React.Component {
      // This line is very important! It tells React to attach the `easdk`
      // object to `this.context` within your component.
      static contextTypes = {
      easdk: PropTypes.object,
      };

      state = {
      resourcePickerOpen: true,
      };

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

      ReactDom.render(
      <AppProvider apiKey="532cc1c7fa852e9bbf61c71bcbaa5a74">
      <ExchangeApp />
      </AppProvider>,
      document.querySelector('#root'),
      );


      In the browser's console I'm getting the following error:



      main.js:3584 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

      Check the render method of `ExchangeApp`.
      at invariant (main.js:3584)
      at createFiberFromTypeAndProps (main.js:13629)
      at createFiberFromElement (main.js:13650)
      at reconcileSingleElement (main.js:17327)
      at reconcileChildFibers (main.js:17384)
      at reconcileChildren (main.js:17753)
      at finishClassComponent (main.js:18080)
      at updateClassComponent (main.js:18018)
      at beginWork (main.js:18864)
      at performUnitOfWork (main.js:21679)


      Many thanks in advance for any help!







      shopify shopify-app polaris






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Jan 3 at 21:25









      RaphArbuzRaphArbuz

      4241513




      4241513
























          1 Answer
          1






          active

          oldest

          votes


















          0














          Import ResourcePicker from @shopify/polaris not from easdk.



          Also your render return needs to be wrapped in parentheses



          return (<ResourcePicker.../>);





          share|improve this answer
























            Your Answer






            StackExchange.ifUsing("editor", function () {
            StackExchange.using("externalEditor", function () {
            StackExchange.using("snippets", function () {
            StackExchange.snippets.init();
            });
            });
            }, "code-snippets");

            StackExchange.ready(function() {
            var channelOptions = {
            tags: "".split(" "),
            id: "1"
            };
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function() {
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled) {
            StackExchange.using("snippets", function() {
            createEditor();
            });
            }
            else {
            createEditor();
            }
            });

            function createEditor() {
            StackExchange.prepareEditor({
            heartbeatType: 'answer',
            autoActivateHeartbeat: false,
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader: {
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            },
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            });


            }
            });














            draft saved

            draft discarded


















            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54030011%2fshopify-resourcepicker-not-displayed%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown

























            1 Answer
            1






            active

            oldest

            votes








            1 Answer
            1






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            0














            Import ResourcePicker from @shopify/polaris not from easdk.



            Also your render return needs to be wrapped in parentheses



            return (<ResourcePicker.../>);





            share|improve this answer




























              0














              Import ResourcePicker from @shopify/polaris not from easdk.



              Also your render return needs to be wrapped in parentheses



              return (<ResourcePicker.../>);





              share|improve this answer


























                0












                0








                0







                Import ResourcePicker from @shopify/polaris not from easdk.



                Also your render return needs to be wrapped in parentheses



                return (<ResourcePicker.../>);





                share|improve this answer













                Import ResourcePicker from @shopify/polaris not from easdk.



                Also your render return needs to be wrapped in parentheses



                return (<ResourcePicker.../>);






                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Jan 6 at 22:15









                bknightsbknights

                8,4842822




                8,4842822
































                    draft saved

                    draft discarded




















































                    Thanks for contributing an answer to Stack Overflow!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid



                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.


                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function () {
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54030011%2fshopify-resourcepicker-not-displayed%23new-answer', 'question_page');
                    }
                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    osxgXq0
                    c GqBeaR99Dm B,XB6 AAfRrDmhR0x8xwyEWJ7XJcwQeVSEEa9aidIq9JZBjSnE

                    Popular posts from this blog

                    Monofisismo

                    Angular Downloading a file using contenturl with Basic Authentication

                    Olmecas