dotenv-webpack: 🐓 [bug] after update to v2 -> v3 "SyntaxError: Unexpected token '.'"

I got Uncaught SyntaxError: Unexpected token ':'

And here it is in bundle.js:

Wow, I’m so sorry everyone. My notifications got out of whack and I missed all of this.

I just rolled-back the support for webpack 5. This should be released as dotenv-webpack@v4.0.0 (essentially the same thing in v2.0.0 with updated dependencies).

Because of this, anyone looking for support for webpack 5 wont have it. Any ideas?

What is the stable release version for use with Webpack 4?

The previous major version (2.3.2, locked as ^2.0.0) works fine for me with webpack 4

@flo-sch they are actually all supported up to this version. The gotchas are still gotchas from v4 as they are on v5.

Fortunately nothing changed, except that in webpack v5 you get an error if you reference an undefined variable (that’s on webpack because they removed support for declaring an empty process.env object when bundling).

@sacummings91 I see it working too, just still no destructing: https://github.com/mrsteele/dotenv-webpack/pull/261

@BeeeQueue consider to replace it with proxy, something like:

const createProxy = (path = 'process.env') => new Proxy({}, {
  get: (target, name) => {
    if (typeof name === 'symbol') {
       return () => { name: path };
    }
    const newPath = `${path}.${name}`;
    console.log(`WARNING: ${newPath} property is not set`);
    return createProxy(`${newPath}`);
  },
});
const valueToReplace = createProxy();

In this way:

• we log the issues (btw we can add some isDebugEnabled condition before console.log)
• we solve the issue when someone expect a deep object like process.env.foo.bar.x or process.env.foo.bar[Symbol('y')]

The issue is that Webpack 5 removes node polyfills including process, meaning if you have any process.env usage that didn’t get replaced by DefinePlugin or EnvironmentPlugin (that this plugin uses) you will end up with a cannot access property env of undefined.

The mistake was to not make the fix for this only happen when using Webpack 5.

#241 will not solve the issue in Webpack 5.

I think there are 2 issues. One that in webpack 5 all node polyfills will be removed meaning that any code using process, global etc. will need to remove them or provide your own polyfill etc. The other is that by providing the DefinePlugin with the value process = '{"env": {}}' will overwrite any value like process.env.VAR_NAME: "someValue" so any other plugin/user will not be able to add their own values. So I think #241 will fix this issue for webpack 4 users and allow users of webpack 5 to provide process.env.variable with other plugins etc. 🤔