Webpack unable to bundle due to SyntaxError

I was interested in learning Django + ReactJS on Windows, so I followed this step by step tutorial.

Now, I'm on the bundling stage. When I run my bundler as a quick sanity check:

$ node_modules/.bin/webpack --config webpack.dev.config.js

I get node_modules is not recognized as a windows command. After trying different solutions, I found that using the node command in front of the webpack command was executing webpack.

Doing that seems to launch webpack but I'm getting this error:

$ node node_modules/.bin/webpack --config webpack.dev.config.js

\node_modules\.bin\webpack:2
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
          ^^^^^^^

SyntaxError: missing ) after argument list
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:599:28)
    at Object.Module._extensions..js (module.js:646:10)
    at Module.load (module.js:554:32)
    at tryModuleLoad (module.js:497:12)
    at Function.Module._load (module.js:489:3)
    at Function.Module.runMain (module.js:676:10)
    at startup (bootstrap_node.js:187:16)
    at bootstrap_node.js:608:3

Could this be an error due to package.json?

Solution

Command provided in the tutorial will work on Unix based system but you are on Windows. Open your node_modules/.bin folder and notice that there are actually two files: webpack (Unix) and webpack.cmd (Windows).

The easiest way to handle that difference is to let Node Package Manager (NPM) automatically detect system and run correct binary for us. To use that functionality create scripts field In your package.json:

"scripts": {
   "webpack": "webpack --config ./webpack.config.js"
 }

Here is syntax explanation:

"scripts": {
   "SCRIPT_NAME": "BINARY_NAME attributes"
}

Then you can use it this way:

npm run webpack

You can read more in NPM run-script documentation.