`Critical dependency: the request of a dependency is an expression` when using App dir. #1029

guillermo-avalos · 2023-04-18T14:19:04Z

Using Next-Translate v2.0.5 with Next.js v13.3.
Node v19.9, npm v9.6.4

While trying to setup Next-Translate following the instructions in this post: https://dev.to/aralroca/i18n-translations-in-nextjs-13s-app-dir-for-serverclient-components-4ek8 and copying exactly the code form the CodeSanbox example, I'm getting this error in the server console:

Critical dependency: the request of a dependency is an expression

I've been using Next-Translate for several projects but this is the first time with the new App router.

My next.config.js file is as follows:

const nextTranslate = require('next-translate-plugin')
module.exports = nextTranslate({
experimental: { appDir: true },
})

middleware.js:

import { NextResponse } from 'next/server'
import i18n from './i18n'

export function middleware(request) {
  const locale = request.nextUrl.locale || i18n.defaultLocale
  request.nextUrl.searchParams.set('lang', locale)
  request.nextUrl.href = request.nextUrl.href.replace(`/${locale}`, '')
  return NextResponse.rewrite(request.nextUrl)
}

I18n.js:

module.exports = {
  locales: ['es', 'en'],
  defaultLocale: 'es',
  pages: {
    '*': ['common'],
  },
}

While trying to navigate to the main page I just get a 404 error. /es or /en doesn't change a thing.
Any ideas?

The text was updated successfully, but these errors were encountered:

guillermo-avalos · 2023-04-18T16:22:33Z

The 404 error went away after placing both layout.jsx and page.jsx inside a [locale] folder after reading Next's docs.
It kinda works, but Node seems to leak memory and spawning several instances. The server console still shows the error.

vdjurdjevic · 2023-04-21T16:23:51Z

I am having the same issue.

kasuta96 · 2023-05-01T14:16:37Z

Critical dependency: the request of a dependency is an expression

Same!
The 404 error is occurring because Next.js 13.3 has made some changes to routing (13.2 works perfectly fine).
like @guillermo-avalos said. After move to inside [locale] folder, it does work, but it doesn't seem to be stable.

Btw, to use next-translate 2.0.5, I believe we should stick with Next.js 13.2 for now.

nirtamir2 · 2023-05-09T07:24:36Z

Same problem here. next 13.4 & next-translate 2.0.5.
The i18n loads only on the client, and not on the server.

Also the code to sync date and lang cause runtime error:

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'length')

"use client";

import { useEffect } from "react";
import dayjs from "dayjs";
import "dayjs/locale/en";
import timezone from "dayjs/plugin/timezone";
import utc from "dayjs/plugin/utc";
import useTranslation from "next-translate/useTranslation";

interface Props {
  children: JSX.Element;
}

dayjs.extend(utc);
dayjs.extend(timezone);
dayjs.tz.guess();

export const DateProvider = ({ children }: Props) => {
  const { lang } = useTranslation();

  useEffect(() => {
    dayjs.locale(lang);
  }, [lang]);

  return children;
};

Is there a way to HACK it somehow (even losing ssr) until we have a fix?

alvesvin · 2023-05-17T02:15:04Z

This is a warning from webpack. It seems webpack doesn't like imports with unpredictable paths at build time used by the default loader in next-translate-plugin. I don't know if it's really the case but it seems omitting overwriteLoadLocales still works.

alvesvin · 2023-05-17T15:30:17Z

Related aralroca/next-translate-plugin#9

aralroca · 2023-06-21T13:46:31Z

I tried to reproduce it in the latest version and I can't reproduce it. Maybe is solved with this related issue: aralroca/next-translate-plugin#32 Can you confirm that now is working for your in the latest version? Thanks!

joaopedrodcf · 2023-06-27T17:40:16Z

I'm also facing the same issue I'm currently using "next": "13.4.7" and "next-translate": "2.4.4" don't have a codesanbox prepared yet but here are the things I did:

This is what appears on my terminal:

And in the browser:

I tried to follow the docs and this article: https://dev.to/aralroca/i18n-translations-in-nextjs-13s-app-dir-for-serverclient-components-4ek8

middleware.ts

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
import i18n from './i18n';

// /es/page-name -> rewrites to -> /es/page-name?lang=es
export function middleware(request: NextRequest) {
    const locale = request.nextUrl.locale || i18n.defaultLocale;
    request.nextUrl.searchParams.set('lang', locale);
    return NextResponse.rewrite(request.nextUrl);
}

i18n.js

module.exports = {
    locales: ['en', 'pt', 'fr'],
    defaultLocale: 'en',
    pages: {
        '*': ['common'],
    },
};

next.config.mjs

// @ts-check
import bundleAnalyzer from '@next/bundle-analyzer';
import nextTranslate from 'next-translate-plugin';

const analyzeEnabled = process.env.ANALYZE === 'true';

/** @type {import("next").NextConfig} */
const config = {
    reactStrictMode: true,
    swcMinify: true,
    webpack: (config, { isServer, webpack }) => {
        return config;
    },
};

const withBundleAnalyzer = bundleAnalyzer({
    enabled: analyzeEnabled,
});

export default withBundleAnalyzer(nextTranslate(config));

My app dir is currently like this:

aralroca · 2023-06-27T20:36:52Z

The 404 probably is for the middleware, I need to update this article, but after next.js 13.2 the middleware with i18n has an issue reported in Next.js but we updated using dynamic router [lang]. Probably you can remove the middleware, is not needed now to add the lang param and rewrite of the middleware is causing a 404 for this Next.js bug

zakidze · 2023-07-10T10:14:55Z

any solotion of this?????

rolandjlevy · 2023-07-13T08:14:31Z

@aralroca is there any solution for this problem? Can you help?

When I add loadLocaleFrom for the fallback, I get the same error: Critical dependency: the request of a dependency is an expression and can't find any solution for it. Is it a bug?

I am using next v12.2.5 and next-translate v2.4.4 and next-translate-plugin v2.4.4

This is what I added to the config. When I remove it, the error dissapears:

loadLocaleFrom: async (lang, ns) => {
    const defaultLocale = 'en-gb';
    const defaultNs = await import(`./locales/${defaultLocale}/${ns}.json`);
    if (lang === defaultLocale) return defaultNs;
    const localNs = await import(`./locales/${lang}/${ns}.json`);
    return { ...defaultNs, ...localNs };
}

I get the same error when adding this version too:

loadLocaleFrom: async (lang, ns) => {
    const defaultLocale = 'en-gb';
    const defaultNs = await import(
      `./locales/${defaultLocale}/${ns}.json`
    ).then((x) => x.default);
    if (lang === defaultLocale) return defaultNs;
    try {
      const localeNs = await import(`./locales/${lang}/${ns}.json`).then(
        (x) => x.default
      );
      return { ...defaultNs, ...localeNs };
    } catch (e) {
      return defaultNs;
    }
}

LagoonProject · 2023-08-02T13:32:41Z

I have the same problem, using "next" v13.4.9, and "next-translate" v2.5.2.

- wait compiling...
- warn ./node_modules/next/dist/pages/_app.js
Critical dependency: the request of a dependency is an expression

I don't have the 404 error though, since I moved the middleware.ts to the 'src' folder on the same level as 'app' folder.

b-vetter · 2023-08-15T14:17:33Z

I have the same problem. All pages inside the [lang] folder return a 404 and the warning "Critical dependency: the request of a dependency is an expression.
Is there already a solution how to fix it?

And is it related to #1131 and will be fixed with the next release?

next 13.4.16
next-translate 2.5.3
next-translate-plugin 2.5.3

rolandjlevy · 2023-08-19T05:24:54Z

@aralroca I found a solution 😀

In case this helps someone else having this problem. The code below works for me and I am no longer getting the error: Critical dependency: the request of a dependency is an expression

I am using next v12.2.5 and next-translate v2.5.2 and next-translate-plugin v2.5.2

in i18n.js:

 loadLocaleFrom: (lang, ns) => {
    const defaultLocale = 'en-gb';
    const defaultNs = require(`./locales/${defaultLocale}/${ns}.json`);
    if (lang === defaultLocale) return Promise.resolve(defaultNs);
    const localNs = require(`./locales/${lang}/${ns}.json`);
    return Promise.resolve({
      ...defaultNs,
      ...localNs,
    });
  },

mirik999 · 2023-08-20T10:27:02Z

I'm also facing the same issue I'm currently using "next": "13.4.7" and "next-translate": "2.4.4" don't have a codesanbox prepared yet but here are the things I did:

This is what appears on my terminal:

And in the browser:

I tried to follow the docs and this article: https://dev.to/aralroca/i18n-translations-in-nextjs-13s-app-dir-for-serverclient-components-4ek8

middleware.ts

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
import i18n from './i18n';

// /es/page-name -> rewrites to -> /es/page-name?lang=es
export function middleware(request: NextRequest) {
    const locale = request.nextUrl.locale || i18n.defaultLocale;
    request.nextUrl.searchParams.set('lang', locale);
    return NextResponse.rewrite(request.nextUrl);
}

i18n.js

module.exports = {
    locales: ['en', 'pt', 'fr'],
    defaultLocale: 'en',
    pages: {
        '*': ['common'],
    },
};

next.config.mjs

// @ts-check
import bundleAnalyzer from '@next/bundle-analyzer';
import nextTranslate from 'next-translate-plugin';

const analyzeEnabled = process.env.ANALYZE === 'true';

/** @type {import("next").NextConfig} */
const config = {
    reactStrictMode: true,
    swcMinify: true,
    webpack: (config, { isServer, webpack }) => {
        return config;
    },
};

const withBundleAnalyzer = bundleAnalyzer({
    enabled: analyzeEnabled,
});

export default withBundleAnalyzer(nextTranslate(config));

My app dir is currently like this:

did you solve this problem ? i got the same error ((

csexplorer · 2023-08-22T00:01:05Z

the same issue!!!!

b-vetter · 2023-08-24T13:45:25Z

@aralroca I found a solution 😀

In case this helps someone else having this problem. The code below works for me and I am no longer getting the error: Critical dependency: the request of a dependency is an expression

Tested and doesn't work in my environment. Still the same error/warning.

roland-cromwell · 2023-08-24T21:49:37Z

@aralroca I found a solution 😀
In case this helps someone else having this problem. The code below works for me and I am no longer getting the error: Critical dependency: the request of a dependency is an expression

Tested and doesn't work in my environment. Still the same error/warning.

@b-vetter can you share the contents of your i18n.js and next.config,js files?

b-vetter · 2023-08-25T07:30:58Z

@roland-cromwell

i18n.js

module.exports = {
    locales: ["en", "de"],
    defaultLocale: "en",
    pages: {
      "*": ["common"],
      "/[lang]": ["home"]
    },
    loadLocaleFrom: (lang, ns) => {
      const defaultLocale = 'en';
      const defaultNs = require(`./locales/${defaultLocale}/${ns}.json`);
      if (lang === defaultLocale) return Promise.resolve(defaultNs);
      const localNs = require(`./locales/${lang}/${ns}.json`);
      return Promise.resolve({
        ...defaultNs,
        ...localNs,
      });
    }
  };

next.config.js

/** @type {import('next').NextConfig} */

const nextTranslate = require('next-translate-plugin')

const dns = require("dns");
dns.setDefaultResultOrder("ipv4first")

const nextConfig = nextTranslate({
  images: {
    domains: ['avatars.githubusercontent.com', 'avatar.vercel.sh']
  },
  experimental: {
    appDir: true,
    serverComponentsExternalPackages: ['@tremor/react']
  },
  async headers() {
    return [
      {
        source: "/api/:path*",
        headers: [
          // some header configuration
        ],
      }
    ]
  },
});

module.exports = nextConfig;

abelchee · 2023-08-28T12:36:25Z

I got the same error in https://github.com/aralroca/next-translate/tree/master/examples/with-app-directory when using next 13.4.19

next 13.4.7 works fine in the example

cmaerz · 2023-08-29T08:59:12Z

Don't know whats happening there, but when I just do this:

It works fine somehow?! Even with 13.4.19

abelchee · 2023-08-29T11:09:20Z

Don't know whats happening there, but when I just do this: It works fine somehow?! Even with 13.4.19

It doesn't work for me

b-vetter · 2023-08-29T12:34:45Z

I got the same error in https://github.com/aralroca/next-translate/tree/master/examples/with-app-directory when using next 13.4.19

next 13.4.7 works fine in the example

Works also for me with 13.4.7 on my local machine but not on Vercel. There i get still 404 or 500 and some errors inside the log.
So is it a problem at next-js? When can we expect a fix on newer versions?

bluelakee02 · 2023-10-13T19:32:13Z

I created a fix aralroca/next-translate-plugin#72
Here is a patch if somebody needs it right away https://github.com/bluelakee02/next-translate-plugin-patch

bluelakee02 · 2023-10-14T20:36:31Z

@aralroca OK, now this can be probably closed

aralroca · 2023-10-14T20:38:22Z

@aralroca OK, now this can be probably closed

Sure 😊 people, now is already solved in 2.6.1 thanks to @bluelakee02

AndryKK · 2023-11-01T14:28:41Z

@bluelakee02 can u give access to https://github.com/bluelakee02/next-translate-plugin-patch ?

bluelakee02 · 2023-11-01T21:50:11Z

@AndryKK I deleted it, since it is in the 2.6.1 version already. The patch solves one problem, but in the end, I ended up implementing my own useLocales custom solution, which works on 13 with approuter

aralroca mentioned this issue Jun 13, 2023

Critical dependency: the request of a dependency is an expression #1069

Closed

aralroca mentioned this issue Jul 10, 2023

in this repo examples : Critical dependency: the request of a dependency is an expression #1104

Closed

This was referenced Aug 19, 2023

Fallback Language support #166

Closed

In i18n.js, an array of locales which point to defaultLocale as a fallback #1105

Open

bluelakee02 mentioned this issue Oct 13, 2023

Fix critical dependency issue aralroca/next-translate-plugin#72

Merged

aralroca closed this as completed Oct 14, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

`Critical dependency: the request of a dependency is an expression` when using App dir. #1029

`Critical dependency: the request of a dependency is an expression` when using App dir. #1029

guillermo-avalos commented Apr 18, 2023 •

edited

Loading

guillermo-avalos commented Apr 18, 2023

vdjurdjevic commented Apr 21, 2023

kasuta96 commented May 1, 2023

nirtamir2 commented May 9, 2023

alvesvin commented May 17, 2023

alvesvin commented May 17, 2023

aralroca commented Jun 21, 2023

joaopedrodcf commented Jun 27, 2023

aralroca commented Jun 27, 2023

zakidze commented Jul 10, 2023

rolandjlevy commented Jul 13, 2023

LagoonProject commented Aug 2, 2023

b-vetter commented Aug 15, 2023 •

edited

Loading

rolandjlevy commented Aug 19, 2023 •

edited

Loading

mirik999 commented Aug 20, 2023

csexplorer commented Aug 22, 2023

b-vetter commented Aug 24, 2023

roland-cromwell commented Aug 24, 2023

b-vetter commented Aug 25, 2023

abelchee commented Aug 28, 2023

cmaerz commented Aug 29, 2023 •

edited

Loading

abelchee commented Aug 29, 2023

b-vetter commented Aug 29, 2023 •

edited

Loading

bluelakee02 commented Oct 13, 2023

bluelakee02 commented Oct 14, 2023

aralroca commented Oct 14, 2023

AndryKK commented Nov 1, 2023

bluelakee02 commented Nov 1, 2023

Critical dependency: the request of a dependency is an expression when using App dir. #1029

Critical dependency: the request of a dependency is an expression when using App dir. #1029

Comments

guillermo-avalos commented Apr 18, 2023 • edited Loading

guillermo-avalos commented Apr 18, 2023

vdjurdjevic commented Apr 21, 2023

kasuta96 commented May 1, 2023

nirtamir2 commented May 9, 2023

alvesvin commented May 17, 2023

alvesvin commented May 17, 2023

aralroca commented Jun 21, 2023

joaopedrodcf commented Jun 27, 2023

aralroca commented Jun 27, 2023

zakidze commented Jul 10, 2023

rolandjlevy commented Jul 13, 2023

LagoonProject commented Aug 2, 2023

b-vetter commented Aug 15, 2023 • edited Loading

rolandjlevy commented Aug 19, 2023 • edited Loading

mirik999 commented Aug 20, 2023

csexplorer commented Aug 22, 2023

b-vetter commented Aug 24, 2023

roland-cromwell commented Aug 24, 2023

b-vetter commented Aug 25, 2023

abelchee commented Aug 28, 2023

cmaerz commented Aug 29, 2023 • edited Loading

abelchee commented Aug 29, 2023

b-vetter commented Aug 29, 2023 • edited Loading

bluelakee02 commented Oct 13, 2023

bluelakee02 commented Oct 14, 2023

aralroca commented Oct 14, 2023

AndryKK commented Nov 1, 2023

bluelakee02 commented Nov 1, 2023

`Critical dependency: the request of a dependency is an expression` when using App dir. #1029

`Critical dependency: the request of a dependency is an expression` when using App dir. #1029

guillermo-avalos commented Apr 18, 2023 •

edited

Loading

b-vetter commented Aug 15, 2023 •

edited

Loading

rolandjlevy commented Aug 19, 2023 •

edited

Loading

cmaerz commented Aug 29, 2023 •

edited

Loading

b-vetter commented Aug 29, 2023 •

edited

Loading