[DEP_WEBPACK_MODULE_ISSUER] DeprecationWarning: Module.issuer: Use new ModuleGraph API

[AlexSPx]

Hello, I tried adding the next-translate library to my next config file and started getting this error:

Error: error: Expected ';', '}' or <eof>

   |
11 |  from "../modules/LoginPage";
   |       ^^^^^^^^^^^^^^^^^^^^^^
   |
note: This is the expression part of an expression statement

   |
11 |  from "../modules/LoginPage";
   |  ^^^^

Caused by:
    0: failed to process js file
    1: Syntax Error
(node:8572) [DEP_WEBPACK_MODULE_ISSUER] DeprecationWarning: Module.issuer: Use new ModuleGraph API
(Use `node --trace-deprecation ...` to show where the warning was created)

Here is my next.config.js

const withPlugins = require("next-compose-plugins");
// const withBundleAnalyzer = require("@next/bundle-analyzer")({
//   enabled: process.env.ANALYZE === "true" ? true : false,
// });
const withPWA = require("next-pwa");
const nextTranslate = require("next-translate");

const nextConfig = {
  reactStrictMode: true,
  images: {
    domains: ["localhost", "avatars.dicebear.com", "course-lab.xyz"],
  },
  swcMinify: true,
  experimental: { optimizeCss: true },
  poweredByHeader: false,
  pwa: {
    dest: "public",
  },
};

module.exports = withPlugins([withPWA, nextTranslate], nextConfig);

And the i18n.json

{
  "locales": ["en", "bg"],
  "defaultLocale": "en",
  "pages": {
    "*": ["common"],
    "/404": ["error"],
    "/": ["home"],
    "/faqs": ["faqs"],
    "/login": ["login"],
    "/register": ["register"],
    "/myfiles": ["myfiles"],
    "/manager": ["manager"],
    "/settings": ["settings"],
    "/courses": ["courses"]
  }
}

[jregex]

ready - started server on 0.0.0.0:3000, url: http://localhost:3000 (node:21239) [DEP_WEBPACK_MODULE_ISSUER] DeprecationWarning: Module.issuer: Use new ModuleGraph API error - ../../../Learn-#/nextjs/coba2/styles/globals.css Global CSS cannot be imported from files other than your Custom <App>. Due to the Global nature of stylesheets, and to avoid conflicts, Please move all first-party global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules). Read more: https://nextjs.org/docs/messages/css-global Location: ../../../Learn-#/nextjs/coba2/pages/_app.js

[jregex]

anyone can help me??

[aralroca]

It would be nice if you could share a repo reproducing the error so that we can analyze it and correct it if it is something in our library. Thank you very much.

[trungls1706]

i got this issue, too

[aralroca]

@trungls1706 can you verify if is already solved in next-translate 2.0.0-canary.2? In order to use 2.0.0-canary.2, you need to install this devDependency: yarn add [email protected] -D, because we moved our Webpack plugin to a package after improving it.

docs: https://github.com/aralroca/next-translate/blob/1382b03874bcacacabdd85fe4edfd44af431010c/docs/migration-guide-2.0.0.md