Next JS i18Next build serverSideTranslations error - reactjs

I am trying to build my react NEXT JS application, but after I run
npm run build
I am getting this error:
Error occurred prerendering page "/it/landing". Read more: https://nextjs.org/docs/messages/prerender-error
Error: next-i18next was unable to find a user config
. . .
Error: Export encountered errors on following paths:
/it/landing
I tried removing serverSideTranslations method from the getStaticProps function inside the landing/index.tsx
which look like this
export const getStaticProps = async ({ locale }) => {
return {
props: {
...(await serverSideTranslations(locale, [
"notifier",
"home",
])),
}
}
}
After I commented the code in serverSideTranslations, the app builds properly.
I also have another page which contains both getStaticPaths and getStaticProps, but it is working fine, with no errors.
// register/[encoded].tsx
export const getStaticProps = async ({ locale }) => {
return {
props: {
...(await serverSideTranslations(locale, [
"notifier"
])),
}
}
}
I am new in react and next js developement so maybe I am missing something, but it look like a strange behaviour.
The code works if I run
npm run dev

Related

getServerSideProps breaks routing in NextJS/Capacitor

I use the following method to avoid exporting getServerSideProps when building with nextjs:
export const getServerSideProps = process.env.SKIP_SSR ? undefined : async (ctx) => { ... }
And I build with:
"build:ios": "SKIP_SSR=1 next build && SKIP_SSR=1 next export && npx cap copy ios",
This works really well except that when exported and run as an iOS app navigations do not work.
To make it as simple as possible, I have added this in pages/index.tsx:
if(!route.asPath.startsWith('/p/home'))
route.push('/p/home')
return (
<div className={styles.container}>
I am here in the root page {window.location.href}
</div>
)
Which is outputting: "I am here in the root page capacitor://localhost/p/home"
The page I want to see rendered is actually in /p/home/index.tsx but what renders is pages/index.
I found out the cause of this is getServerSideProps, even though I skip ssr somehow it's getting through on the build and breaking routing in Capacitor.
If I comment out getServerSideProps it runs fine.
Is there a way to properly remove getServerSideProps when doing a build?
I was encountering the same problem and solved it using a webpack plugin preprocessor-loader.
Install webpack-preprocessor-loader to devDepencies
$ yarn add -D webpack-preprocessor-loader
Set webpack config
// next.config.js
module.exports = {
webpack: (config) => {
config.module.rules.push({
test: /\.tsx$/,
use: [
{
loader: 'webpack-preprocessor-loader',
options: {
params: {
// handle this bool parameter via env
isWeb: process.env.IS_WEB,
},
},
},
],
})
return config
}
}
Write #!if and #!endif comment around getServerSideProps
// yourpage.tsx
import { GetServerSidePropsContext, InferGetServerSidePropsType, NextPage } from 'next'
type PropsType = InferGetServerSidePropsType<typeof getServerSideProps> | undefined
const Page: NextPage<PropsType> = (props) => { /* your page component */ }
// #!if isWeb
export const getServerSideProps = async (context) => {
return {
props: yourProps
}
}
// #!endif
export default Page
Set environment variables according to the target of the build and perform the build.
// package.json
{
"scripts": {
"build:web": "IS_WEB=true next build",
"build:native": "next build && next export && cp -R ./public/* ./out"
}
}

NextJS React Context Sharing Across Libraries

I have an App Package(APP) which is a Nextjs package. I'm using a custom library(LIB) inside this package.
APP package.json
'LIB':'some github package'
I'm trying to have a react context declared in LIB and used both on LIB and APP.
MainContext.js inside LIB
export const MainContext = createContext({
all: 'default value',
setAll: () => {},
});
_app.js inside APP
import { MainContext } from 'LIB'
....
function MyApp({ Component, pageProps }) {
const [all, setAll] = useState({})
return (
<MainContext.Provider value={{ all, setAll }}>
.....
</MainContext.Provider>
);
}
However, I'm facing issues such as TypeError: Cannot read properties of undefined (reading 'Provider')
I tried log the context many times, and it does exist and it is imported correctly, still, I'm stuck with errors that Provider is undefined.
At some point, I logged the provider and it existed then it disappears. I'm pretty sure something is wrong there but I can not find it.

Error: `redirect` can not be returned from getStaticProps during prerendering

In my Next.js application I am statically generating pages using getStaticProps like so
export async function getStaticProps({ params }) {
...
if (data.isRedirect) {
return {
redirect: {
destination: `${data.redirectTo}`,
permanent: false,
},
};
}
return {
props: {
data,
},
revalidate: 10,
};
}
It is working just as expected on localhost but when I deploy to Vercel i get this error.
Error: redirect can not be returned from getStaticProps during
prerendering
I don't understand this as Next.js has this example in their docs. https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation
It is not currently possible to redirect from the server with Next.js static pages.
I hope they can make it happen some day, but until then the workaround is to load the page and then redirect client-side using the useEffect react hook.
import React, { useEffect } from "react";
import { useRouter } from "next/router";
const IndexPage = ({ data }) => {
const router = useRouter();
useEffect(() => {
if (data?.home?.isRedirect) {
router.push(data.home.redirectTo);
}
});
return (
<>
{data && !data.isRedirect && (
...
Notice how I check for !data.isRedirect? This is to prevent the screen from flashing before the redirect.
I found a workaround
I am using getStaticProps and also using dynamic revalidation but also using fallback: 'blocking' to manage my path which mean that my app will look at my headless CMS api to fetch non existant path/page at build time.
Since I am doing a check based on process.env.npm_lifecycle_event who can tell if you are building or running your app
if (process.env.npm_lifecycle_event === 'build')
return {
notFound: true
}
return {
redirect: {
destination: '/404',
permanent: false,
},
}
Then if I am building my app I am returning notFound: true. Once I am running it will prefetch the path and then return my page to a my 404. I don't want it to be permanent since I am using dynamic revalidation.
With this check I can then avoid the following error
Error: redirect can not be returned from getStaticProps during prerendering

react-i18next:: You will need to pass in an i18next instance by using initReactI18next

react-i18next:: You will need to pass in an i18next instance by using initReactI18next
I recently added the package and got this error. I have followed all the steps as far as I know.
I use Next.js with the next-i18next package which usually initialises itself automatically.
https://github.com/m2vi/downloader
From the next-i18next docs:
Then we add serverSideTranslation to getStaticProps or getServerSideProps (depending on your case) in our page-level components.
Meaning you'll need to add serverSideTranslation to the pages that need translations.
For example in your pages/d/[tab]/index file:
import Head from 'next/head';
import { Input } from '../../../components/Input';
import YouTube from '../../../components/youtube/Main';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
const index = () => {
return (
<>
<Head>
<title>YouTube</title>
</Head>
<YouTube />
</>
);
};
export const getServerSideProps = async ({ locale }) => ({
props: {
...(await serverSideTranslations(locale, ['common']))
}
});
export default index;
Then further down in your Main component you can access the documentation translation using:
t('pages.documentation')
update next-i18next.config.js
module.exports = {
i18n: {
defaultLocale: 'en',
locales: ['en', 'de', 'fr'],
},
react: { useSuspense: false },//this line
};
I had this issue too.
But I had "revalidate" property in getStaticProps. When I removed it, the error went away.
P.S. Maybe this will help someone
This error message may be shown although it is not the root cause of the problem.
I had the following build error message:
react-i18next:: You will need to pass in an i18next instance by using initReactI18next
TypeError: Cannot read properties of undefined (reading 'split')
at LanguageSwitcherLink ...
The root cause here was the TypeError.
In my case, the TypeError occurred because I had components with parameters in pages directory. Thus, during next build these components were attempted to be build as static pages. This failed because expected parameters were missing, which is why they were undefined.
Solution for me: move components outside of pages folder.
Afterwards, there is also no error message anymore with respect to initReactI18next.

InteliJ+Typescript: Variable Declaration Expected Issue

This is expo ReactNative App. Able to build and run the app using
expo start
However, InteliJ Flags this file as having an error and all this file has is the above referenced code
import { ButtonActionTypes } from "../types/ButtonTypes";
import { Action } from "redux";
export const incrementCount = (): Action<string> => {
return {
type: ButtonActionTypes.Increment
}
};
How do I get rid of this error so the project in InteliJ looks clean?

Resources