Getting build time error using webpack 5 and next js 12

Question

This is our next.config.js file

const webpack = require('webpack');
// Initialize doteenv library
require('dotenv').config();

module.exports = {
  swcMinify: true,
  devIndicators: {
    autoPrerender: false,
  },
  compiler: {
    styledComponents: true, // ssr and displayName are configured by default
    removeConsole: true,
  },
  webpack: (config) => {
    config.plugins.push(new webpack.EnvironmentPlugin(process.env));
    config.module.rules.push({
      test: /\.svg$/,
      issuer: {
        and: [/\.(js|ts)x?$/],
      },
      use: ['@svgr/webpack'],
    });
    return config;
  },
  eslint: {
    // Warning: Dangerously allow production builds to successfully complete even if
    // your project has ESLint errors.
    // but we are running eslint separately, therefore no need to worry about disabling
    // ESLint on next build
    ignoreDuringBuilds: true,
  },
}

Getting this error/warning while building

DefinePlugin
Conflicting values for 'process.env.NEXT_RUNTIME'

Getting NEXT_RUNTIME: 'nodejs' as value for process.env.NEXT_RUNTIME when I try to console.log

We are using SWC as the compiler instead of babel. Any idea how to fix this?

Answer 1

Replacing EnvironmentLogin with DefinePlugin fixed the warning for me.

I hope this helps 🤞

  webpack: (config, { dev, isServer }) => {
  // ...

  config.plugins.push(
    new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify(NODE_ENV) 
     }));

      return config;
    },