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を実行すると正常に動作し、チュートリアルを進めることが可能です。
参考