Build error occurred Error: Package exports for '/app/node_modules/i18next-http-backend' do not define a valid './cjs' target

[tonmoy007]

I am using this packages "i18next": "^19.1.0", "i18next-express-middleware": "^1.9.1", "i18next-http-backend": "^1.0.9", "i18next-http-middleware": "^1.0.4", "i18next-xhr-backend": "^3.2.2", "next-i18next": "^4.2.0", when i run next build it throws the error

Build error occurred Error: Package exports for '/app/node_modules/i18next-http-backend' do not define a valid './cjs' target at resolveExportsTarget (internal/modules/cjs/loader.js:545:13) at applyExports (internal/modules/cjs/loader.js:459:14) at resolveExports (internal/modules/cjs/loader.js:508:12) at Function.Module._findPath (internal/modules/cjs/loader.js:577:20) at Function.Module._resolveFilename (internal/modules/cjs/loader.js:879:27) at Function.Module._load (internal/modules/cjs/loader.js:785:27) at Module.require (internal/modules/cjs/loader.js:956:19) at require (internal/modules/cjs/helpers.js:74:18) at Object. (/app/node_modules/next-i18next/dist/commonjs/create-i18next-client.js:18:35) at Module._compile (internal/modules/cjs/loader.js:1063:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1103:10) at Module.load (internal/modules/cjs/loader.js:914:32) at Function.Module._load (internal/modules/cjs/loader.js:822:14) at Module.require (internal/modules/cjs/loader.js:956:19) at require (internal/modules/cjs/helpers.js:74:18) at Object. (/app/node_modules/next-i18next/dist/commonjs/index.js:30:51) { code: 'MODULE_NOT_FOUND' }

[isaachinman]

Please use v4.4.1 or later.

[tonmoy007]

I have updated the version to "next-i18next": "^4.4.2" but the problem still exists is there any configuration that i have to update please help i am in a critical situation

[isaachinman]

If you have cached dependencies, you'll need to either clear your cache, or pin to an exact version. If you read the release notes, you'll see that this error came from upstream i18next dependencies.

[tonmoy007]

I am using docker to run the project and these are my dependencies in package.json

 "dependencies": {
       "@reduxjs/toolkit": "^1.2.3",
        "@sentry/browser": "^5.15.0",
        "@sentry/integrations": "^5.15.1",
        "@sentry/node": "^5.15.0",
        "@zeit/next-less": "^1.0.1",
        "@zeit/next-sass": "^1.0.1",
        "@zeit/next-source-maps": "0.0.3",
        "antd": "^3.26.7",
        "axios": "^0.19.2",
        "axios-observable": "^1.1.3",
        "bootstrap": "^4.4.1",
        "compression": "^1.7.4",
        "cookie-parser": "^1.4.5",
        "dotenv": "^8.2.0",
        "dotenv-extended": "^2.7.1",
        "express": "^4.16.4",
        "file-loader": "^5.0.2",
        "js-cookie": "^2.2.1",
        "less": "^3.11.1",
        "less-vars-to-js": "^1.3.0",
        "lodash-webpack-plugin": "^0.11.5",
        "momentjs": "^2.0.0",
        "next": "^9.2.2",
        "next-i18next": "4.4.2",
        "next-compose-plugins": "^2.2.0",
        "next-cookies": "^2.0.3",
        "next-redux-saga": "^4.1.2",
        "next-redux-wrapper": "^4.0.1",
        "node-sass": "^4.13.1",
        "null-loader": "^3.0.0",
        "prettier": "^1.19.1",
        "react": "^16.12.0",
        "react-alice-carousel": "^1.17.3",
        "react-dom": "^16.12.0",
        "react-html-parser": "^2.0.2",
        "react-i18next": "^11.0.0",
        "react-lottie": "^1.2.3",
        "react-player": "^1.15.2",
        "react-redux": "^7.1.3",
        "react-router-dom": "^5.1.2",
        "react-scripts": "^3.3.0",
        "react-slick": "^0.25.2",
        "react-spring": "^8.0.27",
        "redux": "^4.0.5",
        "redux-mock-store": "^1.5.4",
        "redux-saga": "^1.1.3",
        "rxjs": "^6.5.4",
        "slick-carousel": "^1.8.1",
        "styled-components": "^5.0.0",
        "swr": "^0.1.17"
    },

and deleted my package-lock.json and build in docker but the problem still exists i am using typescript this is my i18n.ts

import NextI18Next from "next-i18next";
import { NextComponentType, NextPageContext } from "next";
import { useTranslation as originalUseTranslation } from "react-i18next";
export const Lang = {
    default_lang: "en",
    other_lang: ["bn"],
    local_sub_path: {
        en: "en",
        bn: "bn"
    },
    default_namespace: "common",
    lang_folder: "public/lang"
};

const NextI18NextInstance = new NextI18Next({
    defaultLanguage: Lang.default_lang,
    defaultNS: Lang.default_namespace,
    localePath: typeof window === "undefined" ? Lang.lang_folder : "locales",
    otherLanguages: Lang.other_lang,
    localeSubpaths: Lang.local_sub_path,
    fallbackNS: Lang.default_namespace,
    interpolation: {
        format: (val, format, lang) => {
            if (val instanceof Date) {
                return "";
            }
            return val;
        }
    }
});

export const {
    appWithTranslation,
    Trans,
    Link,
    Router,
    withTranslation
} = NextI18NextInstance;

export default NextI18NextInstance;
export const useTranslation = originalUseTranslation;
export type I18nPage<P = {}> = NextComponentType<
    NextPageContext,
    { namespacesRequired: string[] },
    P & { namespacesRequired: string[] }
>;

and this is my server.ts

import compression from "compression";
import express from "express";
import next from "next";
import uuidv4 from "uuid/v4";
import cookieParser from "cookie-parser";
import nextI18NextMiddleware from "next-i18next/middleware";
import nextI18next from "./i18n";
import sentry from "./sentry";
import * as dot_env from "dotenv";
import { format, parse } from "url";
dot_env.config();
const port = process.env.PORT || "3002";
const app = next({ dev: process.env.NODE_ENV !== "production" });
const appHandler = app.getRequestHandler();
const dev = process.env.NODE_ENV !== "production";

function sessionCookie(req, res, next) {
    const htmlPage =
        !req.path.match(/^\/(_next|static)/) &&
        !req.path.match(/\.(js|map)$/) &&
        req.accepts("text/html", "text/css", "image/png") === "text/html";

    if (!htmlPage) {
        next();
        return;
    }

    if (!req.cookies.sid || req.cookies.sid.length === 0) {
        req.cookies.sid = uuidv4();
        res.cookie("sid", req.cookies.sid);
    }

    next();
}

const sourcemapsForSentryOnly = token => (req, res, next) => {
    // In production we only want to serve source maps for Sentry
    if (!dev && !!token && req.headers["x-sentry-token"] !== token) {
        res.status(401).send(
            "Authentication access token is required to access the source map."
        );
        return;
    }
    next();
};

(async () => {
    const { Sentry } = sentry(app.buildId);
    await app.prepare().then(res => {
        console.log(res, "dic");
    });
    await nextI18next.initPromise;
    console.log(`App will be listening in port : ${port}`);
    await express()
        .use(nextI18NextMiddleware(nextI18next))
        .use(compression())
        .use(cookieParser())
        .use(sessionCookie)
        .get(/\.map$/, sourcemapsForSentryOnly(process.env.SENTRY_TOKEN))
        .use(Sentry.Handlers.requestHandler())
        .get("*", (req, res) => {
            const { pathname, query } = parse(req.url, true);

            // remove trailing slash
            if (
                pathname.length > 1 &&
                pathname.slice(-1) === "/" &&
                pathname.indexOf("/_next/") !== 0
            ) {
                return res.redirect(
                    format({
                        pathname: pathname.slice(0, -1),
                        query
                    })
                );
            }
            (req as any).nodeEnv = process.env.NODE_ENV;
            return appHandler(req, res);
        })
        .listen(parseInt(port), "0.0.0.0", err => {
            if (err) {
                throw err;
            }
            console.log(`> Ready on port ${port}`);
        });
})();

and babelrc file

{
    "presets": [
        ["next/babel", { "preset-env": { "targets": { "node": true } } }]
    ],
    "plugins": [
        [
            "lodash",
            {
                "id": ["lodash"]
            }
        ],
        "inline-react-svg",
        [
            "styled-components",
            { "ssr": true, "displayName": true, "preprocess": false }
        ],
        [
            "import",
            {
                "libraryName": "antd",
                "style": true
            }
        ],
        "@babel/syntax-dynamic-import"
    ]
}

[isaachinman]

@tonmoy007 I suggest you post on StackOverflow or similar - this is an issue tracker and the problem you are describing has already been fixed. Good luck!

[tonmoy007]

alright thanks for your response :)

[murad-guliyev]

@tonmoy007 I have the same error, could you fix it?

[tonmoy007]

@murad-guliyev-pb actually i still didn't get what was gone wrong it was actually version issue updating should solve i have checked the package.json of the current project but may be some cached images might still holding the wrong version or not updating the old docker images. so i remove all the images and container and volumes and start fresh it was working fine... i don't actually know why.. :)

[murad-guliyev]

@tonmoy007 Thanks for your answer! I resolved it by changing node-alpine version to node in Dockerfile but not sure that it was the case.