Inform users of Custom App component export behaviour

[jellebouwman]

Hi!👋

First off, thank you for the work that has been put in the next-translate project!

We were looking forward to migrating to the new 1.0.1 version of next-translate and the migration guides and the examples on this repository and on nextjs’s repository have been helpful. I’d like to make a suggestion, as it might save some other people a lot of time. 

In my project I have a custom App component which is located in my _app.js file. 

I exported my App component like this:



export default function App () {
  …
 }

When starting up my dev server, I ran into this webpack issue:



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



After a long debugging session we came to the conclusion it had to do with the way we export our App component in the _app.js file. Our _app.js file had to be changed to this:






function App() {

  …

} 

export default App



In the previous versions of next-translate default exporting a function while defining it resulted in no issues.







If required, I can make a reproducible repository that anyone can check out. I tried to see if this issue also arose in the complex example, but I think, maybe because this is class based, the issue does not exist here. But I can imagine there are others who, like us, use hooks inside their App component that might run into this issue.

[aralroca]

@jellebouwman export default function should work fine. If it doesn't work for you, it would be nice to have the reproducible example to then look at it and fix it. Thank you! 🙏

[jellebouwman]

Thanks! I'll do my best to narrow it down to the minimal problem, will get back to you 👍

[jellebouwman]

Hi @aralroca, and team, managed to make a reproducible example! And the issue is something else than I previously mentioned here. 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 App({ Component, pageProps }) {
 return <Component {...pageProps} />
}

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

You can find my repository here: https://github.com/jellebouwman/next-translate-bug-report
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!

[jellebouwman]

Hi @aralroca, should I upgrade this to a bugreport on the issues section of this repository?

[aralroca]

Yes, better, so we mark it to fix it for the milestone 1.0.3 🙏. Thanks!

[jellebouwman]

Will do! 😄

[jellebouwman]

Opened an issue here.

[aralroca]

Thanks!