user12040667
user12040667

Reputation:

React is not defined in Shopify module

I tried to develop my first Shopify module but when i use React i have this error in my application page on the shop.

Error React

Here my index.js

import {Page} from "@shopify/polaris";
import {RessourcePicker} from "@shopify/app-bridge-react";

class Index extends React.Component{
  state = {open: false}
  render() {
    return (
      <Page
          title="Product selector"
          primaryAction={{
            content:'Select products',
            onAction: () => this.setState({open:true})
          }}
          >
            <RessourcePicker
              ressourceType='Product'
              open={this.state.open}
            />
            </Page>
    )
  }

}

export default Index;

Upvotes: 1

Views: 866

Answers (3)

Ryan Dooley
Ryan Dooley

Reputation: 254

I ran into the same issue with their tutorial, I went in to the package.json and changed the dependency,

"react": "^16.9.0",
"react-dom": "^16.9.0"

Then I went to my terminal and installed react again:

npm install next react react-dom

now its working fine. You do not need to add the import.

Upvotes: 1

Shimi
Shimi

Reputation: 1218

Shopify allows its users to determine their own React version, hence Shopify wouldn't deploy React for you and lock you on a version you might not be interested in using. You can see how Shopify defines React as a peer-dependency so the responsibility of deploying and importing React is on the user.

I think that in your case, what you might be missing is deploying React as a dependency on your package.json, and import it as follows:

import React, { Component } from "react";

Upvotes: 2

Soumalya Bhattacharya
Soumalya Bhattacharya

Reputation: 662

You should use

import React from "react";

To be safe from this type of errors. If any of your previously defined imports do import React import React will not work. But I recommend it to just be safe

Upvotes: 0

Related Questions