Webpack error while using i18n routing: Assigning to rvalue (50:8) in next-swc-loader

Answered

Barbary Lion posted this in #help-forum

Barbary LionOP

2024-10-20T21:13:16.486Z

So I recently was trying to build my project in NextJS with i18n routing, when I came across a problem that I can't seem to get rid off. There's also no mention or post of it online and I am unsure of what to do.
The exact error reads as follows:

./node_modules/next/dist/build/webpack/loaders/next-middleware-loader.js?absolutePagePath=private-next-root-dir%2Fsrc%2Fmiddleware.ts&page=%2Fsrc%2Fmiddleware&rootDir=C%3A%5CUsers%5Cluca-%5CWebstormProjects%5Clucidevme&matchers=
W3sicmVnZXhwIjoiXig%2FOlxcLyhfbmV4dFxcL2RhdGFcXC9bXi9dezEsfSkpPyg%2FOlxcLyhcXC8%2FaW5kZXh8XFwvP2luZGV4XFwuanNvbikpP1tcXC8jXFw%2FXT8kIiwib3JpZ2luYWxTb3VyY2UiOiIvIn0seyJyZWdleHAiOiJeKD86XFwvKF9uZXh0XFwvZGF0YVxcL1teL117MSx9KSk%2FKD
86XFwvKGRlfGVuKSkoPzpcXC8oKD86W15cXC8jXFw%2FXSs%2FKSg%2FOlxcLyg%2FOlteXFwvI1xcP10rPykpKikpPyguanNvbik%2FW1xcLyNcXD9dPyQiLCJvcmlnaW5hbFNvdXJjZSI6Ii8oZGV8ZW4pLzpwYXRoKiJ9XQ%3D%3D&preferredRegion=&middlewareConfig=eyJtYXRjaGVycyI6W
3sicmVnZXhwIjoiXig%2FOlxcLyhfbmV4dFxcL2RhdGFcXC9bXi9dezEsfSkpPyg%2FOlxcLyhcXC8%2FaW5kZXh8XFwvP2luZGV4XFwuanNvbikpP1tcXC8jXFw%2FXT8kIiwib3JpZ2luYWxTb3VyY2UiOiIvIn0seyJyZWdleHAiOiJeKD86XFwvKF9uZXh0XFwvZGF0YVxcL1teL117MSx9KSk%2FKD86XFwvKGRlfGVuKSkoPzpcXC8oKD86W15cXC8jXFw%2FXSs%2FKSg%2FOlxcLyg%2FOlteXFwvI1xcP10rPykpKikpPyguanNvbik%2FW1xcLyNcXD9dPyQiLCJvcmlnaW5hbFNvdXJjZSI6Ii8oZGV8ZW4pLzpwYXRoKiJ9XX0%3D! + 18 modules
Assigning to rvalue (50:8)
|     if (process !== __webpack_require__.g.process) {
|         // prefer local process but global.process has correct "env"
|         "MISSING_ENV_VAR" = __webpack_require__.g.process.env;
|         __webpack_require__.g.process = process;
|     }
while analyzing module javascript/auto|C:\Users\luca-\WebstormProjects\lucidevme\node_modules\next\dist\build\webpack\loaders\next-swc-loader.js??ruleSet[1].rules[20].oneOf[1].use[0]!C:\Users\luca-\WebstormProjects\lucidevme\node_modules\next\dist\esm\server\web\globals.js|middleware for concatenation


> Build failed because of webpack errors

Answered by Miniature Pinscher

Don't use dotenv-webpack.

View full answer

10 Replies

Barbary LionOP

2024-10-20T21:16:53.865Z

Here is my tree (only the src folder with relevant files, all other files are on the parent directory of src):

├───app
│   └───[locale]
│       ├───about
│       ├───blog
│       │   └───blogs
│       ├───buildattack
│       ├───dashboard
│       │   ├───post-its
│       │   └───scheduler
│       ├───help-feedback
│       ├───hooks
│       ├───login
│       ├───logout
│       ├───profile
│       ├───projects
│       └───settings
├───components
│   ├───blog
│   ├───cards
│   ├───dashboard
│   └───login
├───config
├───i18n
│   ├───request.ts
│   ├───routing.ts
├───styles
└───middleware.ts

My next.config.js looks as follows:

/** @type {import('next').NextConfig} */
const nextConfig = {}
const createNextIntlPlugin = require('next-intl/plugin');
const withNextIntl = createNextIntlPlugin();

const path = require('path')
const Dotenv = require('dotenv-webpack')
const { webpack } = require("next/dist/compiled/webpack/webpack");
require('dotenv').config();

module.exports = withNextIntl({
  experimental: {
    missingSuspenseWithCSRBailout: false,
    turbo: {
      rules: {
        '*.svg': {
          loaders: ['@svgr/webpack', 'esbuild-loader'],
          as: '*.js',
        },
      },
    },
  },
  webpack: (config) => {
    config.plugins = config.plugins || [];
    config.plugins.push(
      new Dotenv({
        path: path.join(__dirname, `.env.${process.env.NODE_ENV || 'production'}`),
        systemvars: true,
      }),
      new webpack.NormalModuleReplacementPlugin(/node:/, (resource) => {
        resource.request = resource.request.replace(/^node:/, "");
      }),
    );
    config.externals = {
      'next-intl': 'commonjs next-intl'
    }

    config.resolve.fallback = {
      ...config.resolve.fallback,async_hooks: false,
    }
    return config;
  },
});

request.ts

import {notFound} from 'next/navigation';
import {getRequestConfig} from 'next-intl/server';
import {routing} from './routing';

export default getRequestConfig(async ({locale}) => {
  // Validate that the incoming `locale` parameter is valid
  if (!routing.locales.includes(locale as any)) notFound();

  return {
    messages: (await import(`../../messages/${locale}.json`)).default
  };
});

routing.ts

import {defineRouting} from 'next-intl/routing';
import {createSharedPathnamesNavigation} from 'next-intl/navigation';

export const routing = defineRouting({
  locales: ['en', 'de'],
  defaultLocale: 'en',
  pathnames: {
    '/': '/',
    '/projects': {
      en: '/projects',
      de: '/projekte'
    }
  }
});
export type Pathnames = keyof typeof routing.pathnames;
export type Locale = (typeof routing.locales)[number];
export const {Link, redirect, usePathname, useRouter} =
  createSharedPathnamesNavigation(routing);

middleware.ts

import createMiddleware from 'next-intl/middleware';
import {routing} from './i18n/routing';

export default createMiddleware(routing);

export const config = {
  // Match only internationalized pathnames
  matcher: ['/', '/(de|en)/:path*']
};

Is anybody able to offer a solution or point me to the right direction? I am not sure on what to do as I can't really find anything on this

Versions of relevant dependencies:

Next version: Next.js v14.2.5
next-intl/i18n routing: 3.20.0
intl-messageformat: 10.5.0
dotenv: 16.4.5
dotenv-webpack: 8.1.0

dev-dependencies:

"@next/eslint-plugin-next": "^14.2.7",
"@types/node": "20.5.7",
"@types/react": "18.3.3",
"@types/react-dom": "18.3.0",
"@types/react-syntax-highlighter": "^15.5.13",
"@typescript-eslint/eslint-plugin": "7.2.0",
"@typescript-eslint/parser": "7.2.0",
"autoprefixer": "10.4.19",
"esbuild-loader": "^4.2.2",
"eslint": "^8.57.0",
"eslint-config-next": "14.2.1",
"eslint-config-prettier": "^8.2.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-prettier": "^5.1.3",
"eslint-plugin-react": "^7.23.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-unused-imports": "^3.2.0",
"postcss": "8.4.38",
"prettier": "^3.3.3",
"tailwind-variants": "0.1.20",
"tailwindcss": "3.4.3",
"typescript": "5.0.4"

Barbary LionOP

2024-10-27T14:07:16.766Z

bump

@Barbary Lion Here is my tree (only the src folder with relevant files, all other files are on the parent directory of src): ├───app │ └───[locale] │ ├───about │ ├───blog │ │ └───blogs │ ├───buildattack │ ├───dashboard │ │ ├───post-its │ │ └───scheduler │ ├───help-feedback │ ├───hooks │ ├───login │ ├───logout │ ├───profile │ ├───projects │ └───settings ├───components │ ├───blog │ ├───cards │ ├───dashboard │ └───login ├───config ├───i18n │ ├───request.ts │ ├───routing.ts ├───styles └───middleware.ts My next.config.js looks as follows: js /** @type {import('next').NextConfig} */ const nextConfig = {} const createNextIntlPlugin = require('next-intl/plugin'); const withNextIntl = createNextIntlPlugin(); const path = require('path') const Dotenv = require('dotenv-webpack') const { webpack } = require("next/dist/compiled/webpack/webpack"); require('dotenv').config(); module.exports = withNextIntl({ experimental: { missingSuspenseWithCSRBailout: false, turbo: { rules: { '*.svg': { loaders: ['@svgr/webpack', 'esbuild-loader'], as: '*.js', }, }, }, }, webpack: (config) => { config.plugins = config.plugins || []; config.plugins.push( new Dotenv({ path: path.join(__dirname, `.env.${process.env.NODE_ENV || 'production'}`), systemvars: true, }), new webpack.NormalModuleReplacementPlugin(/node:/, (resource) => { resource.request = resource.request.replace(/^node:/, ""); }), ); config.externals = { 'next-intl': 'commonjs next-intl' } config.resolve.fallback = { ...config.resolve.fallback,async_hooks: false, } return config; }, });

Miniature Pinscher

2024-10-27T18:26:16.064Z

Don't use dotenv-webpack.

Answer

@Miniature Pinscher Don't use `dotenv-webpack`.

Barbary LionOP

2024-10-27T23:09:54.267Z

Okay I will try it, but can you explain why?

Because Dotenv was part of the project before the change and it compiled

Barbary LionOP

2024-10-28T17:53:59.416Z

Anyway it worked so marking solved

Thanks