Webpack report an error about Unexpected character '#'

Question

I am using webpack to load dependencies. And one of the dependency is written like below:

#! /usr/bin/env node

'use strict'

var Parser = require('jsonparse')
  , through = require('through')

webpack gave me below error:

ERROR in ./~/JSONStream/index.js
Module parse failed: /Project/node_modules/JSONStream/index.js Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
| #! /usr/bin/env node

It seems that the character # is not recognised by webpack. Is there a loader for me to use to load this kind of js file?

Answer 1

The Shebang #!/usr/bin/env node indicates that it's an executable script, which should not be a module at the same time. Library files and executables should be separated, since a CLI is just a way to use the library and if you're using the library yourself, you certainly don't want to have the CLI part included in your application.

Anyway, there is still a way around this. You can use the shebang-loader which has been mentioned in the webpack issue #2168. Just add it to to your .js rule so the line gets removed.

Answer 2

Alternatively, you can choose to replace the shebang with an empty string by using the string-replace-loader:

{
  test: /\.(js|mjs|jsx)$/,
  loader: 'string-replace-loader',
  options: {
    search: '#!/usr/bin/env node',
    replace: '',
  }
}