Providerと_useIsomorphicLayoutEffect.useIsomorphicLayoutEffect) is not a function

Nuxt2からNext.js13に乗り換えました。覚書です。

目次

Next.js13におけるProviderとラップ

TypeError: (0 , _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect) is not a function

reduxはProviderが必要です。

reduxのコードを書いていたらエラーがでました。リンク先をみると、next.jsをアップデートしてと書いてありました。しかし、個人的にその方法では解決しませんでした。

Providerでラップする必要があります。Provider.tsxというファイルを作ります。

'use client';

import { Provider } from 'react-redux';
import { store } from '../redux/store';

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <Provider store={store}>
      {children}
    </Provider>
  );
}

layout.tsxで読み込みます。

import { Providers } from './providers'

コードを追加します。

  return (
    <html lang="en">
      <body className={inter.className}>
        <Providers>
          {children}
        </Providers>
      </body>
    </html>
  )

もちろんlayout.tsxに直接書いて1つのファイルにまとめることもできますが、今後のことを考えて切り出しました。

このエラーは消えて解決済となりましたが、次のエラーがでました。

トップページが表示されましたが、reduxを使っている個別ページが表示されません。

Unhandled Runtime Error Error: could not find react-redux context value; please ensure the component is wrapped in a Provider

Unhandled Runtime Error
Error: could not find react-redux context value; please ensure the component is wrapped in a <Provider>

reduxにおいてuseDispatch();を使っているところは、”use client”;が必須のようです。 なぜならuseDispatch();はクライアントの動作だから!

'use client';

App Router 内のコンポーネントはデフォルトで Server Component として扱われます。しかし、このコンポーネントはクライアントサイドでの動作が必要なので、'use client'; を使ってクライアントコンポーネントとして明示しています。

Next.js13で_app.tsxがない

ぐぐると_app.tsxとでてきますが、そんなものはありません。もうちょっとちゃんと調べてみると_app.tsxおよび_document.tsxはlayout.tsxに統一されたようです。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次