CODEWITHSUNDEEP
ruby-on-railsreactjsshopify-apppolaris
jim
jim

Reputation: 1116

Shopify Polaris Page tag not working - Rails and reactJS

I'm trying to make a shopify app and I want to use ruby on rails with polaris and reactJS. When I try to use the Page component taken from shopify's website, nothing ever gets rendered to the screen. Here's an example of what I'm talking about.

This is my index.jsx file:

import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'
import {AppProvider, Page, Card} from '@shopify/polaris'
import '@shopify/polaris/styles.css'

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <Page title="Jar Witock-Lid"> //Here is where I use the Page tag
        <p>Other content</p>
    </Page>,
    document.body.appendChild(document.createElement('div')),
  )
})

Everything else is working fine because when I change the Page tag to be a div like this:

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <div>
        <div>{"One"}</div>
        <div>{"Two"}</div>
        <div>{"Three"}</div>
    </div>,
    document.body.appendChild(document.createElement('div')),
  )
})

It would render ("One" "Two" "Three") to the page. When I run my rails server and refresh the screen, no errors or warning are displayed. I downloaded polaris by running this command: yarn add @shopify/polaris.

Any help is greatly appreciated. I tried looking all over the web but I couldn't put the pieces together. Thanks in advance!

Upvotes: 0

Views: 658

Answers (1)

jim
jim

Reputation: 1116

I found the solution. The only thing I was missing was wrapping it all in an AppProvider tag like this: 

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <AppProvider>
        <Page title="Jar Witock-Lid">
            <p>content</p>
        </Page>
    </AppProvider>,
    document.body.appendChild(document.createElement('div')),
  )
})

Upvotes: 1

Related Questions