ReferenceError: App is not defined

[jellebouwman]

When starting up my dev server with the latest version of next-translate, I ran into this webpack issue:



ReferenceError: App is not defined at eval (webpack-internal:///./pages/_app.js:185:1)

After some debugging, It seems to have something to do with the App.propTypes in the _app.js file, when exporting the App while defining it:

import PropTypes from "prop-types";

export default function App({ Component, pageProps }) {
 return <Component {...pageProps} />
}

App.propTypes = {
  Component: PropTypes.any,
  pageProps: PropTypes.any,
}

I managed to narrow it down to a minimal reproducible example. You can find my repository here.

It's based on the simple example of the next-translate example directory. Hopefully the comments in the _app.js and next.config.js files are clear enough to reproduce the issue!

[aralroca]

Is bad transpiled to:

import __i18nConfig from '@next-translate-root/i18n'
import __appWithI18n from 'next-translate/appWithI18n'
    
import PropTypes from "prop-types";

const __Page_Next_Translate__ = function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

App.propTypes = {
  Component: PropTypes.any,
  pageProps: PropTypes.any,
};

export default __appWithI18n(__Page_Next_Translate__, {
   ...__i18nConfig,
   isLoader: true,
   skipInitialProps: true,
   loadLocaleFrom: (l, n) => import(`@next-translate-root/locales/${l}/${n}`).then(m => m.default),
});

The solution will be to fix the transpilation by something like this:

import __i18nConfig from '@next-translate-root/i18n'
import __appWithI18n from 'next-translate/appWithI18n'
    
import PropTypes from "prop-types";

function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

const __Page_Next_Translate__ =  App

App.propTypes = {
  Component: PropTypes.any,
  pageProps: PropTypes.any,
};

export default __appWithI18n(__Page_Next_Translate__, {
   ...__i18nConfig,
   isLoader: true,
   skipInitialProps: true,
   loadLocaleFrom: (l, n) => import(`@next-translate-root/locales/${l}/${n}`).then(m => m.default),
});

Or directly using the App name instead of __Page_Next_Translate__

[giladaya]

Until a fix is released and in case it helps anyone -

I had a similar issue and found out this can be worked-around by not directly exporting the App component from _app file.

In my case, changing from this:

//...

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ApolloProvider client={client}>
      <Component {...pageProps} />
    </ApolloProvider>
  );
}

to this:

//...

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ApolloProvider client={client}>
      <Component {...pageProps} />
    </ApolloProvider>
  );
}

export default MyApp

Solved the error.

[justirva09]

I've followed the instructions above still doesn't work. my version: "next-translate": "^1.1.1"

[jellebouwman]

I've followed the instructions above still doesn't work. my version: "next-translate": "^1.1.1"

@justirva09 could you show us your _app.tsx/jsx file where you initialise the Next app? @giladaya's fix is also what I used to circumvent this specific error, so maybe your use-case is slightly different.

[justirva09]

it says module not found: Can't resolve '@next-translate-root/locales not found. However, I've created my own helper where it can access locales without needing any additional plugins. Because Next.js has built-in support for internationalized (i18n) routing, So it has really helped me.

btw I followed this tutorial before: https://youtu.be/Rbi52ZYtVKM

[aralroca]

@justirva09 do you have the namespaces inside the locales directory?

i18n.js
next.config.js
package.json
pages
locales
├── ca
│   ├── common.json
│   └── home.json
├── en
│   ├── common.json
│   └── home.json
└── es
    ├── common.json
    └── home.json

If you have them somewhere else you have to overwrite the loadLocaleFrom function of i18n.js:

{
  // ...rest of config
  "loadLocaleFrom": (lang, ns) =>
    // You can use a dynamic import, fetch, whatever. You should
    // return a Promise with the JSON file.
    import(`./myTranslationsFiles/${lang}/${ns}.json`).then((m) => m.default),
}

[aralroca]

@jellebouwman @giladaya @justirva09 @j-schumann The idea of 2.0 version is to change the regular expressions in a better way. Currently, there are 2 proposals: with Babel parser and with TypeScript compiler.

We need feedback from the people to decide which one corrects more errors and does not generate new ones.

This bug should be fixed with the new version Can you test these two prereleases and give feedback?

With Babel: 2.0.0-experimental.1

With TypeScript compiler: 2.0.0-experimental.2

You can use this discussion to write your feedback:

https://github.com/aralroca/next-translate/discussions/881

Thank you so much!

[aralroca]

I believe this issue has been resolved with Next-translate 2.0, as we have rewritten the plugin and replaced the use of regex with a parser. This update has automatically addressed many of the issues related to attempting to parse items with regex.

I trust that this solution has fully resolved the matter, and as such, I will proceed to close the issue. Additionally, I would like to inform you that we have moved the plugin to this repository: https://github.com/aralroca/next-translate-plugin.

If, for any reason, you find that the issue has not been fully resolved, please feel free to reopen the issue on the next-translate-plugin repository.

Thank you very much.