Syntax error: C:/Users/J/metafields-for-shopify/src/SettingsForm.js: Unexpected token, expected , (18:1)

Question

im trying to make a shopify app based off of a tutorial they put up on their blog recently but im stuck with a syntax error of

Syntax error: C:/Users/J/metafields-for-shopify/src/SettingsForm.js: Unexpected token, expected , (18:1)

Can anyone help me figure out where I've gone wrong...

import React, { Component } from 'react';
import {
AccountConnection,
Layout,
Link
} from '@shopify/polaris';

class SettingsForm extends Component {
render() {
return (
 <Layout>
    <Layout.AnnotatedSection
      title="Connected store"
      description="Connect your Shopify store in order to use the metafield editor"
     />
</Layout>

accountConnectionMarkup() {
    <AccountConnection
        title="Dropshipp"
        action={{content: 'Connect', onAction: this.toggleConnection.bind(this, this.state)}}
        details="No account connected"
      />
},

constructor(props) {
    super(props);
    this.state = {
      connected: false,
    };
},
toggleConnection() {
    this.setState(({connected}) => ({connected: !connected}));
},
accountConnectionMarkup() {
    return this.state.connected
    ? (
      <AccountConnection
        avatarUrl="https://gravatar.com/avatar/57dde0bd2de4350c196d9fb235703b83?s=200"
        accountName="Dominic McPhee"
        details="craigmont.myshopify.com"
        action={{content: 'Disconnect', onAction: this.toggleConnection.bind(this, this.state)}}
        connected={this.state.connected}
      />
    ) : (
      <AccountConnection
        title="Dropshipp"
        action={{content: 'Connect', onAction: this.toggleConnection.bind(this, this.state)}}
        details="No account connected"
        termsOfService={<p>By clicking Connect, you agree to accept Dropshipp’s <Link url="https://shopify.com">Terms and conditions</Link>. You’ll pay a commission rate of 15% on sales made through Dropshipp.</p>}
        connected={this.state.connected}
      />
    )
    }

);
}
}

export default SettingsForm;

Answer 1

It looks like you are missing a comma before line 18.

Try this, I added the comma after </Layout> on line 16.

import React, { Component } from 'react';
import {
AccountConnection,
Layout,
Link
} from '@shopify/polaris';

class SettingsForm extends Component {
render() {
return (
 <Layout>
    <Layout.AnnotatedSection
      title="Connected store"
      description="Connect your Shopify store in order to use the metafield editor"
     />
</Layout>,

accountConnectionMarkup() {
    <AccountConnection
        title="Dropshipp"
        action={{content: 'Connect', onAction: this.toggleConnection.bind(this, this.state)}}
        details="No account connected"
      />
},

constructor(props) {
    super(props);
    this.state = {
      connected: false,
    };
},
toggleConnection() {
    this.setState(({connected}) => ({connected: !connected}));
},
accountConnectionMarkup() {
    return this.state.connected
    ? (
      <AccountConnection
        avatarUrl="https://gravatar.com/avatar/57dde0bd2de4350c196d9fb235703b83?s=200"
        accountName="Dominic McPhee"
        details="craigmont.myshopify.com"
        action={{content: 'Disconnect', onAction: this.toggleConnection.bind(this, this.state)}}
        connected={this.state.connected}
      />
    ) : (
      <AccountConnection
        title="Dropshipp"
        action={{content: 'Connect', onAction: this.toggleConnection.bind(this, this.state)}}
        details="No account connected"
        termsOfService={<p>By clicking Connect, you agree to accept Dropshipp’s <Link url="https://shopify.com">Terms and conditions</Link>. You’ll pay a commission rate of 15% on sales made through Dropshipp.</p>}
        connected={this.state.connected}
      />
    )
    }

);
}
}

export default SettingsForm;