Plugin generates code with syntax error under certain circumstances

[WillsB3]

This might be a bit of a strange issue…

I've been using this plugin as part of a project for a while and up until last week everything was working well. I then add a new dependency to the project (https://www.npmjs.com/package/@uirouter/angularjs), and the builds continued to work fine for about a week.

Then suddenly on 23/09/19 our built JS bundle started containing syntax errors, as can be seen from this screenshot:

The only explanation I have is that I may have reinstalled dependencies and perhaps some I now have some slightly newer version of webpack where the behaviour has changed 🤷‍♂️.

Taking a look at the corresponding JS source from node_modules/@uirouter/core/lib-esm/common/common.js around where the syntax error appears to be, it looks like the function we're wrapping is dealing with these exports:

At first I thought it was the root export, but the more I think about it the less sure I am that this is the actual cause.

I'm not experienced with Webpack internals or writing plugins for it, but from what I understand from reading the source of this plugin and digging into the Webpack source it seems like this plugin calls parser.state.current.addVariable as a way to make sure Webpack wraps the code in an anonymous function thus creating a closure and preventing variable definitions from within leaking outside the scope of that function. Given this, the only "solution" I've found to this problem is to prevent calling addVariable with empty strings as arguments so that this specific syntax error can no longer happen, for example:

parser.state.current.addVariable('', '', []);

becomes

parser.state.current.addVariable('__webpack_wrapper_plugin__', 'true', []);

Here's how that change affects my application bundle:

The downside to this approach is of course that we introduce an unused variable. I'll file a PR with the above changes, but I fully expect a better solution may be possible that I'm not aware of :).