Conflicting values for 'process.env' with Webpack Encore and Dotenv

Question

I'm using Webpack Encore with Dotenv-webpack and I'm getting this error:

Failed to compile.

DefinePlugin

Conflicting values for 'process.env'

My webpack.config.js:

const Dotenv = require('dotenv-webpack')
const Encore = require('@symfony/webpack-encore')

if (!Encore.isRuntimeEnvironmentConfigured()) {
  Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev')
}

Encore
  // ...
  .addPlugin(new Dotenv({
    path: './.env.local'
  }))

module.exports = Encore.getWebpackConfig();

Versions used:

"devDependencies": {
    "@symfony/webpack-encore": "^1.2.0",
    "dotenv-webpack": "^7.0.2",
}

I've found similar issues, but I don't really understand the solution and therefor not able to use this solution with Symfony Encore.

What's the cause of this issue and how can I fix this?

Answer 1

I had a similar issue giving warnings on compile and this was fixed by adding the ignoreStub option to true.

.addPlugin(new Dotenv({
    ignoreStub: true,
}))

This was introduced with version 7.0.0 of dotenv-webpack.

https://github.com/mrsteele/dotenv-webpack/releases/tag/v7.0.0