Can Next.js handle both Redux Saga and React Intl? Element type is invalid: expected a string or a class/function

Question

I am trying to convert an old, unmantained but complex vanilla React app in a Next.js app (please note I am quite a newbie at his first job as a developer).

The problem is when it comes to implement both redux-saga and react-intl in Next.js. I am using next-redux-wrapper.

This is my working _app.js with React Saga only.:

import { wrapper } from "../components/ducks/store";
import Head from "next/head";

function App({ Component, pageProps }) {

  return (
    <>
      <Head>
      <meta
          name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
        />
          <title>MyAppTitle</title>
      </Head>
        <Component {...pageProps} />
    </>
  )
}

export default wrapper.withRedux(App)

The above has been almost totally copied from Next.js with-redux-saga example, and works fine. Now, in the with-react-intl example, which is available only in Typescript, _app.tsx is:

import type { AppProps } from 'next/app'
import { IntlProvider } from 'react-intl'
import { useRouter } from 'next/router'

export default function MyApp({ Component, pageProps }: AppProps) {
  const { locale, defaultLocale } = useRouter()
  return (
    <IntlProvider
      locale={locale}
      defaultLocale={defaultLocale}
      messages={pageProps.intlMessages}
    >
      <Component {...pageProps} />
    </IntlProvider>
  )
}

So I adapted it to my case, considering I am in Javascript and I don't need the import { AppProps } from 'next/app' line. Now my _app.js is:

import { wrapper } from "../components/ducks/store";
import Head from "next/head";
import { useRouter } from "next/router";
import IntlProvider from "react-intl"

function App({ Component, pageProps }) {
  const {locale, defaultLocale} = useRouter()

  return (
    <>
      <Head>
      <meta
          name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
        />
          <title>MyAppTitle</title>
      </Head>
      <IntlProvider
        locale={locale}
        defaultLocale={defaultLocale}
        messages={pageProps.intlMessages}
      >
        <Component {...pageProps} />
      </IntlProvider>  
    </>
  )
}

export default wrapper.withRedux(App)

Here is where I get stuck. When I start the server, I get:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Any idea about what's going on?

These are the versions of involved plugins:

"next": "^12.3",
"next-redux-wrapper": "^7.0.5",
"react-redux": "^7.1.3",
"react-intl": "^3.9.1",
"react-intl.macro": "^0.3.7",
"redux": "^4.0.4",
"redux-saga": "^1.1.3",
"redux-saga-requests": "^0.27.0",
"redux-saga-requests-axios": "^0.8.0",

Can Next.js handle both Redux Saga and React Intl? Element type is invalid: expected a string or a class/function

0 Answers0