Error when compiling with babel-webpack

[fforres]

HI @everyone

I'm getting some weird output after transpiled the library in webpack with babel.

Specifically, an Unexpected token: punc (:) error on .[/~/debug/node.js:122,0]

Point is, it's transpiling lines like:

122:         process.env.DEBUG = namespaces;

into:

122:         {"NODE_ENV":"production"}.DEBUG = namespaces;

Why would it transpile process.env into that object?

[fforres]

People have pointed out that it could it be an issue with cross-env. But I haven't been able to find anything.
Any help would be greatly appreciated

[TooTallNate]

I tend to agree that it's an issue with cross-env. It would "work" if parenthesis were added around the "env" object:

({"NODE_ENV":"production"}).DEBUG = namespaces;

[fforres]

Found it, it's an issue with webpack's definePlugin
It helps set the different variables regarding the context of nodejs runtime.
(The process object being one of them)

I had my setup in the following way:

new webpack.DefinePlugin({
    'process.env': {
        NODE_ENV: 'production',
    },
}),

Which at webpack's build time overrides the whole process.env object.

Still not fixed though 😢 , but maybe someone can find this info useful 😄

[thebigredgeek]

Anyone want to take this issue on with a PR?

[benstepp]

This workaround worked for us using the DefinePlugin.

new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify('production'),
}),

[TooTallNate]

Closing, since this is an issue with your webpack configuration, not with debug itself.

[worc]

i ran into a similar issue with webpack's DefinePlugin and the acorn parser falling over on special characters : and / seem to be the culprits. and somehow also using ALL_CAPS as the member name in the options object fed into the DefinePlugin constructor. the solution is similar to what @benstepp posted, wrap up the value in a JSON.stringify and things seem to go ok.

searching for webpack defineplugin unexpected token leads here; i have a write up over on the webpack issues that goes into more detail.

webpack/webpack#8641