shopifyのアプリ開発を学ぼうとshopify developersにあるチュートリアルを進めていると、Step.4 Polarisでユーザーフェイスを構築で翻訳プロップを追加した後のnpm run dev実行後に画像のようなエラーが出ました。

原因

ReferenceError: React is not definedと書いてあるとおり、Reactが定義されていないというエラーが発生しています。
ターミナルにも同様のエラーメッセージが表示されており、ターミナルのエラーメッセージを読んでいくと、_app.jsでエラーが発生していることが分かります。

解決方法

_app.jsに以下2行を追加します。

import React from 'react';
import ReactDOM from 'react-dom';

この時点で_app.jsのは以下のようになります。

_app.js

import App from 'next/app';
import Head from 'next/head';
import { AppProvider } from '@shopify/polaris';
import '@shopify/polaris/dist/styles.css';
import translations from '@shopify/polaris/locales/en.json';
import React from 'react'; //追加
import ReactDOM from 'react-dom'; //追加

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;
    return (
      <React.Fragment>
        <Head>
          <title>Sample App</title>
          <meta charSet="utf-8" />
        </Head>
        <AppProvider i18n={translations}>
          <Component {...pageProps} />
        </AppProvider>
      </React.Fragment>
    );
  }
}

export default MyApp;

これで改めてnpm run devを実行すると正常に動作し、チュートリアルを進めることが可能です。

shopify チュートリアルで発生するReferenceError: React is not defined

原因

解決方法

参考