Comments (11)
Happy to share that creating a custom 500.tsx
did help! Errors don't appear anymore :)
from next-intl.
I was moving away from i18next to next-intl, and I came across the issue myself too, and for me it was happening due to a use of a component inside of _app.tsx
which use the useTranslations()
hook. I also did not specify getInitialProps
or getStaticProps
in the _app.tsx
.
Here's how my _app.tsx looks like
import type { AbstractIntlMessages } from "next-intl";
import type { AppProps } from "next/app";
import { Provider as JotaiProvider } from "jotai";
import { NextIntlProvider } from "next-intl";
import { ThemeProvider } from "next-themes";
import { useRouter } from "next/router";
import nProgress from "nprogress";
import { useEffect } from "react";
import { Footer } from "@/components/Footer";
import { Navigation } from "@/components/Navigation";
import "@/assets/styles/cards.scss";
import "@/assets/styles/main.scss";
import "@/assets/styles/markdown.scss";
import "@/assets/styles/nprogress.scss";
const MyApp = ({ Component, pageProps }: AppProps<{ messages?: AbstractIntlMessages }>) => {
const router = useRouter();
useEffect(() => {
nProgress.configure({
showSpinner: false,
easing: "ease",
speed: 250,
});
console.log("nProgress configured");
const handleStart = () => {
nProgress.start();
};
const handleStop = () => {
setTimeout(() => {
nProgress.done();
}, 100);
};
router.events.on("routeChangeStart", handleStart);
router.events.on("routeChangeComplete", handleStop);
router.events.on("routeChangeError", handleStop);
return () => {
router.events.off("routeChangeStart", handleStart);
router.events.off("routeChangeComplete", handleStop);
router.events.off("routeChangeError", handleStop);
};
}, []);
return (
<NextIntlProvider messages={pageProps.messages}>
<JotaiProvider>
<ThemeProvider attribute="class">
<div className="app-container mx-auto max-w-screen-2xl gap-4 px-2">
<Navigation />
<Component {...pageProps} />
<Footer />
</div>
</ThemeProvider>
</JotaiProvider>
</NextIntlProvider>
);
};
export default MyApp;
And here's my Footer.tsx (Navigations is just way too big)
import type { FC } from "react";
import { useTranslations } from "next-intl";
import { ExternalLink } from "@/components/ExternalLink";
import { DiscordLogo } from "@/components/icons/DiscordLogo";
import { GitHubLogo } from "@/components/icons/GitHubLogo";
export const Footer: FC = () => {
const t = useTranslations();
return (
<footer className="footer grid grid-cols-1 grid-rows-[auto_auto] border-t py-6 px-4 text-sm text-gray-400 lg:grid-cols-[1fr_auto] lg:grid-rows-1">
<p>
{t.rich("footer.affiliation", {
officialWebsite: (children) => (
<ExternalLink href="https://www.mihoyo.com/">{children}</ExternalLink>
),
})}
<br />
{t.rich("footer.copyright", {
officialWebsite: (children) => (
<ExternalLink href="https://www.mihoyo.com/">{children}</ExternalLink>
),
})}
</p>
<div className="mt-6 flex flex-col gap-x-6 gap-y-2 place-self-start font-bold lg:mt-0 lg:flex-row lg:place-self-center">
<ExternalLink href="https://github.com/kitsune-guuji/gvp">
<div className="flex flex-row items-center gap-x-2">
<GitHubLogo className="inline-block h-auto w-4" />
<p>GitHub</p>
</div>
</ExternalLink>
<ExternalLink href="https://discord.gg/[REDACTED]">
<div className="flex flex-row items-center gap-x-2">
<DiscordLogo className="inline-block h-auto w-4" />
<p>Discord</p>
</div>
</ExternalLink>
</div>
</footer>
);
};
If I keep Navigation
or Footer
in here, using next build
will produce the errors although the project will be built anyways. To avoid those errors I'd have to remove both Navigation
and Footer
out of the returned jsx in my _app.tsx
.
Hopefully this was somewhat helpful 😅
from next-intl.
Ah, true! I just checked out your project and found that the errors are caused by the absence of the 500 error page. That page is also generated at build time.
After adding such a page with messages, the warning goes away for me in your project. Let me know if this helps!
Btw. I noticed you migrated away from next-i18next
. Recently adoption of next-intl
has grown quite a bit and I'm trying to understand where that's coming from. Can I ask if there is something in particular that made you switch and why you picked next-intl
then instead?
from next-intl.
Hi and thanks for the report!
There was a similar error reported in #32 by @Pixelatex and @timonweber replied in the thread more recently with the same issue. Not sure if they figured out the issue eventually?
In any case it would be very helpful if you could include a reproduction like it's mentioned in the issue template, otherwise it's pretty hard to diagnose. Thanks!
from next-intl.
Closing due to inactivity … Please provide a reproduction if you're still seeing this error!
from next-intl.
Just a little followup, moving the Navigation
and Footer
components in Layout.tsx
helps and prevents the errors from happening, but it's still kinda weird that it happens in the first place. When the error is being thrown, it's originalMessage
is undefined as well which makes it a bit hard to debug. To me, it looks like that you can't really use useTranslations()
hook outside of pages context? Otherwise build errors.
from next-intl.
Hey @TenkoSpirit and thanks for chiming in!
I think what's probably happening here is this: Next.js creates a 404 page at build time where the _app
component is used. Since you're providing messages on a page-level, in case of the 404 page there are no pageProps.messages
defined. That means the shared components in _app
that render during the build for the 404 page don't have any messages available and therefore the error is caused:
[Error]: MISSING_MESSAGE
The fix is probably to create a custom 404 page where you define getStaticProps
and return the messages for the shared component.
Let me know if this helps!
from next-intl.
Hello @amannn!
I actually do have a custom 404 page in my project with messages in getStaticProps
there, not really sure what else could be causing these errors 😅
from next-intl.
@amannn oh, alright, will try that a bit later once I get back to my PC!
As for switching away from next-i18next
, there are a couple of reasons for me, and the most important one is the lack of hot reloading of translation files during development. I really like the simplicity of next-intl
, the fact that the library makes me use native imports/requires is also nice, that contributes a lot to the feeling of having control of what's going on exactly. next-i18next
is an amazing solution, but for my project I think it's a little overkill, since I don't really want to deal with caching or fetching from external storages and etc. 😄
from next-intl.
Thanks for the feedback, I'm really glad to hear when next-intl works well for you! 🙌
Let me know if you run into something else and good luck with your project!
from next-intl.
Really cool to hear! 🙌
from next-intl.
Related Issues (20)
- Add Messages in ALL pages using next 12 HOT 1
- [Docs]: Typescript instructions should include ECMAScript Modules HOT 1
- use-intl is not working properly with React Native HOT 3
- Add support for "zero" "one" etc tags in plural HOT 3
- Support single-language workflow in App Router HOT 1
- Ahead-of-time compilation of messages
- There is an issue in the defaultLocale HOT 1
- Switch locale with nested params route HOT 1
- Importing Messages during runtime HOT 2
- How to use API requests on the side? HOT 3
- Prevent useTranslations being triggered on prefetch HOT 1
- Expose serializable `useFormats` HOT 5
- Support regional information in `select` arguments HOT 1
- Type error: Individual declarations in merged declaration 'Pathnames' must be all exported or all local. HOT 2
- After updating to v3.11.1 rewrite/redirects append a port to the URL HOT 9
- Route intercept does not work with generateStaticParams in layout HOT 1
- Add support for partially translated routes HOT 1
- @typescript-eslint errors in `i18n.ts` HOT 1
- [Docs]: `global.d.ts` should not include an interface declaring no members HOT 1
- [Error]: ENVIRONMENT_FALLBACK | code: 'ENVIRONMENT_FALLBACK', | originalMessage: undefined HOT 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from next-intl.