【shopify】Polarisを使用すると「Cannot read property 'tapAsync' of undefined」と言われる問題 #React

前提

polaris: "6.0.1"
react: "16.14.3"
react-dom: "16.9.10"

以下のチュートリアルを進めていたところ、、、

エラー

このようなエラーが出て、どうにもこうにも解決できませぬ、、、

> Ready on http://localhost:3000
error - ./node_modules/@shopify/polaris/dist/styles.css
TypeError: Cannot read property 'tapAsync' of undefined

以下の部分をコメントアウトすると正常に動作するので、polarisのstyles.cssが正常にimportできていないようです

_app.js

...

import '@shopify/polaris/dist/styles.css';

...

ちなみに、サーバーにアクセスするとこうなりますが、

Error: Cannot find module '/Users/user-name/environment/shopify/shop_node/.next/build-manifest.json'
Require stack:
- /Users/user-name/environment/shopify/shop_node/node_modules/next/dist/next-server/server/load-components.js

 ...

こちらは以下の記事を読む限りだと、「importに問題がある場合発生する」とのことなので、上記のインポート問題を解決すれば一緒に対処できそうです。

対処

追記

修正方法がわかりました

結論から言うと、webpackのバージョンが問題でした

エラーが起きていた際には最新の5.21.0を使用していたのですが、それを4.0系の最新版4.46.0へと変更することで無事に解決しました

なお、関連リンクにて別のエラーの報告がありますが、そちらのエラーも同様に「webpackのバージョンを4.0系にすることで解決する」可能性があります。

一度お試しいただけますと幸いです！

※ 今回のエラーとは関係ないですが、下記のissueをみて解決策へと辿り着きました

~~色々試しましたが、直りませんでした、、、~~

~~なのでどうしたかと言いますと、、、~~

~~まず_app.jsでは、Polarisのスタイルシートのインポートを諦めました。~~

~~そして、React側にて、Headerから直接CDNでスタイルシートを読み込むことにしました~~

_app.js

...

// import '@shopify/polaris/dist/styles.css';

...

  <Head>
    <title>Sample App</title>
    <meta charSet="utf-8" />
    <link
      rel="stylesheet"
      href="https://sdks.shopifycdn.com/polaris/3.18.0/polaris.min.css"
    />
  </Head>

...

~~追加した部分は、以下になります~~

    <link
      rel="stylesheet"
      href="https://sdks.shopifycdn.com/polaris/3.18.0/polaris.min.css"
    />

~~これでひとまずスタイルシートは反映されました~~

~~ただ、"これでいいのか"は疑問が残りますので、解決策が見つかりましたら追記します。~~