Shopify ResourcePicker not displayed

Multi tool use
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
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
add a comment |
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
add a comment |
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
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
shopify shopify-app polaris
asked Jan 3 at 21:25


RaphArbuzRaphArbuz
4241513
4241513
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Import ResourcePicker from @shopify/polaris not from easdk.
Also your render return needs to be wrapped in parentheses
return (<ResourcePicker.../>);
add a comment |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Import ResourcePicker from @shopify/polaris not from easdk.
Also your render return needs to be wrapped in parentheses
return (<ResourcePicker.../>);
add a comment |
Import ResourcePicker from @shopify/polaris not from easdk.
Also your render return needs to be wrapped in parentheses
return (<ResourcePicker.../>);
add a comment |
Import ResourcePicker from @shopify/polaris not from easdk.
Also your render return needs to be wrapped in parentheses
return (<ResourcePicker.../>);
Import ResourcePicker from @shopify/polaris not from easdk.
Also your render return needs to be wrapped in parentheses
return (<ResourcePicker.../>);
answered Jan 6 at 22:15


bknightsbknights
8,4842822
8,4842822
add a comment |
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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