Fresh npm install of webpack.js is throwing Block-scope error

Question

I'm new to Webpack, Visual Studio, and Task Runner, but these are what I have been told to install/use at work so I'm struggling through figuring out how to make it all work. I just used NPM to globally install a fresh copy of webpack and webpack-cli. I installed the Task Runner plugin to Visual Studio, and used the Run > Development option as provided. Mysteriously, mine is the only machine getting the following error and no one knows why:

C:\Users\[me]\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js:3
let webpackCliInstalled = false;
^^^
SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:373:25)
    at Object.Module._extensions..js (module.js:404:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Function.Module.runMain (module.js:429:10)
    at startup (node.js:139:18)
    at node.js:999:3
Process terminated with code 1.

I'm using the newest version of NodeJS and NPM. Any ideas why an unmodified download of webpack would be throwing block-scope errors?

Edit:

I see this question has got some attention so I thought I should mention that the problem was resolved. Unfortunately, the resolution was to completely uninstall webpack and webpack-cli and reinstall them. Then it just worked. Why...? Who knows? I have heard others have had this problem as well, though I haven't reproduced it since the first time.

Cider

In order to use let, const and the like, you need a transpiler, like babel. Please provide some information on if you have got a webpack config and I'll be glad to help out. – Honduras

can you provide webpack.config.js, package.json and how you to run with vs? – Escharotic

Answer 1

Go to Tools > Options > Projects and Solutions > Web Package Management > External Web Tools DESELECT the option for $(VSINSTALLDIR)\Web\External.

Refer to Visual Studio Task Runner Error with ES6 and to Visual Studio Task Runner "SyntaxError: Use of const in strict mode."

Sculpsit

Answer 2

Had this same issue today, for anyone else finding this, the resolution was to simply ensure node and npm were up to date. Updating those (recommend looking at nvm to achieve this) then re-installing the webpack and webpack-cli packages and all was sorted.

Gerbil

Answer 3

Try to add a loader for ES6 systax like babel and its presets. You can do that doing: npm install after adding this dependencies inside package.json (my dependencies is not updated, you can update them without problems):

"devDependencies": {
"babel-core": "^6.24.0",
"babel-loader": "^7.0.0",
"babel-plugin-react-html-attrs": "^2.0.0",
"babel-plugin-transform-class-properties": "^6.23.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.24.0",
"babel-preset-react": "^6.23.0",
"babel-preset-stage-0": "^6.22.0",
}

Also, you must add this into your webpack.config.js > loaders (to set the new loader - babel-loader -):

loaders: [
        {
            test: /\.(js|jsx)$/,
            loader: 'babel-loader',
            query: {
                presets: [
                    'es2015',
                    'react',
                    'stage-0'
                ],
                plugins: [
                    'react-html-attrs',
                    'transform-decorators-legacy',
                    'transform-class-properties'
                ],
                compact: true
            }
        }
    ]

Predacious