Issue: getInitialProps from next-translate conflict with the getStaticProps

[JbPons]

Hello,

I used next-translate for 6 months now. Today I decide to update the version of the library from 1.0.1 to 1.0.6. I updated nextjs to the latest version too.

Now, on all the page except the index and on one another page I have this error: After some investigation I see the issue come from next-translate. In the 1.0.1 it's work well but the loader used by next-translate was always getInitialProps and I use getStaticProps on all the pages.

The 2 pages still working after the update have one thing in common: we didn't use HOC on it.

So, I think the issue is related to HOC used with getStaticProps.

Any idea to fix that ?

[aralroca]

Can you share you page code to see how is transpiling? getInitialProps is the default loader when using a HOC, but it should use getStaticProps if you have a getStaticProps defined in the page.

[JbPons]

This is an example of getStaticProps we have on different pages. Basically I have a getStaticProps on all the pages because I didn't know why but one of my library opting out of the automatic static optimization.

Wrapper is an object import from the redux store, from the library next-redux-wrapper: https://github.com/kirill-konshin/next-redux-wrapper. This wrapper gave me the possibility to use the store at build time on server side.

Did you think it's related to that library ?

[aralroca]

@JbPons I guess we have to try to reproduce it in the tests. I've added a couple of tests, but they seem correct and it looks like the transpilation does it right:

https://github.com/vinissimus/next-translate/pull/585/files#diff-a06f5c146530ce5eee4827922bd9d8f01057b8fb723bf3151483ae10c5103652R454-R475

However, I have only put a fragment of your code to test and not all the code. Maybe you can help by modifying the test with all your page code to see if you can see in the snapshot the incorrect transpilation that is happening to you. This will be very useful 🙏 Thanks!

[JbPons]

@aralroca ok sound good to me. Wich branch I need to pull to do that ? And How I run your tests locally ?

[JbPons]

Hmm or easier solution, did I have the possibility to see how next-translate transpiles my code, directly in my project ?

[aralroca]

@JbPons the name of the branch to work is canary. To run the tests locally yarn test or yarn test:watch. And to see how next-translate transpile your code you can add a console.log on this return: https://github.com/vinissimus/next-translate/blob/master/src/plugin/templateWithLoader.ts#L105 and use npm link to run next-translate locally, or modify it directly inside your node_modules/next-translate

[JbPons]

@aralroca Ok after some test in my project. I saw the compiler go on the templateWithHoc Loader because of the HOC used in my _app.tsx.

This is the reason why next-translate use getInitialProps on my project even if all pages use getStaticProps. It turn off automatic static Optimization.

When the page compile, the next-translate compiler was not call. With the console.log I see that templateWithLoader was not call and templateWithHOC was used one time on the first compilation. After that, when each page compile, these loaders are not used anymore.

I do all my test in my project on local with yarn dev, I didn't try the next build.

Any idea for a potential solution ? or you need more information ?

[JbPons]

@aralroca Hello, any updates ? :p

[ghoshnirmalya]

I'm also facing a similar issue where I'm getting the following error while building the application:

Warning: You have opted-out of Automatic Static Optimization due to `getInitialProps` in `pages/_app`. This does not opt-out pages with `getStaticProps`

When nextTranslate is removed from next.config.js, the warning goes away. I'm also using [email protected].

[Naumov1889]

the problem is still there

[aralroca]

@aralroca Ok after some test in my project. I saw the compiler go on the templateWithHoc Loader because of the HOC used in my _app.tsx.

This is the reason why next-translate use getInitialProps on my project even if all pages use getStaticProps. It turn off automatic static Optimization.

When the page compile, the next-translate compiler was not call. With the console.log I see that templateWithLoader was not call and templateWithHOC was used one time on the first compilation. After that, when each page compile, these loaders are not used anymore.

I do all my test in my project on local with yarn dev, I didn't try the next build.

Any idea for a potential solution ? or you need more information ?

You can add an empty loader on _app.js: https://github.com/aralroca/next-translate/issues/801#issuecomment-1059800473

By default is getInitialProps if there is an HOC to avoid conflicts with libraries that are adding a getInitialProps.