next-translate doesn't load if using styled components

[dsauna]

When adding a configuration, I get an error in _document that says

Class constructor App cannot be invoked without 'new'

[aralroca]

It's rare because next-translate does nothing with the file _document.js. Is it the same with the canary version 1.0? Can you create a reproducible example?

[aralroca]

If in 1.0.0-canary.2 is already fixed I wouldn't worry too much because we will release it soon. Could you check it out?

Useful links:

• How to migrate 0.x to 1.0
• Getting started with 1.0
• Examples with 1.0

In 1.0 the _document.js file is not touched.

[dsauna]

Thanks, let me take a look

[dsauna]

I'm actually using canary 1.0.0-canary.2 and see the problem there.

[aralroca]

And removing next-translate it works? It's strange because we don't touch the _document.js. I think it would be best if you can create a reproducible example and then we look at it in detail. Thank you very much. 🙏

[dsauna]

Yes, removing it fixes it. Let me try adding a reprodusable example.

[aralroca]

@dsauna this would be very useful! Thank you!

[dsauna]

@aralroca I found the really weird issues. I don't think it has anything to do with styled components.

The issue is that if you use next-translate and your _app.tsx/_app.js is a class component it will fail. Easy fix to not use a class component, you can see the issue here. Not sure if a bug, but it took me a while to realize.

https://github.com/dsauna/next-translate-styled

[aralroca]

Thanks @dsauna, I'll look into it then! Well seen

[dsauna]

Thank you for putting the hard work into this. Let me know if you need any help

[aralroca]

Ah sorry, I didn't see the repo https://github.com/dsauna/next-translate-styled, this works for me, thank you very much!

[aralroca]

It's curious because this works:

import React from 'react'
import type { AppProps } from 'next/app'

import '../styles.css'

class MyApp extends React.Component<AppProps> {
  render() {
    const { Component, pageProps } = this.props
    return <Component {...pageProps} />
  }
}

export default MyApp

But this no:

import React from 'react'
import NextApp from 'next/app'

import '../styles.css'

class MyApp extends NextApp {
  render() {
    const { Component, pageProps } = this.props
    return <Component {...pageProps} />
  }
}

export default MyApp

And the compiled code for the failing case is:

+import __i18nConfig from '@next-translate-root/i18n'
+import __appWithI18n from 'next-translate/appWithI18n'
import React from 'react'
import NextApp from 'next/app'

import '../styles.css'

class MyApp extends NextApp {
  render() {
    const { Component, pageProps } = this.props
    return <Component {...pageProps} />
  }
}

-export default MyApp
+const __Page_Next_Translate__ = MyApp

+export default __appWithI18n(__Page_Next_Translate__, {
+  ...__i18nConfig,
+  isLoader: true,
+  skipInitialProps: true,
+});

Apparently looks correct, maybe the problem is inside the appWithI18n 🤔

[aralroca]

@dsauna I have finally found the root of the problem. It seems that NextApp causes Next.js to serve its modified default _app.js. Then, next-translate misunderstood that it did not have a custom _app.js and it was overwriting the default _app.js causing the issue.

[aralroca]

I did a prerelease 1.0.0-canary.3, now it should work 👍

[dsauna]

ah! that's amazing, thanks so much