JavaScript: Resolving Unexpected character '#'

Question

Introduction

My React app can execute npm run build in development mode (webpack.config.dev.js) but not in production mode (webpack.config.prod.js). The following error is thrown:

Module parse failed: ...\node_modules\npm\bin\npm-cli.js Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '#' (1:0)
    at Parser.pp$4.raise (...\node_modules\webpack\node_modules\acorn\dist\acorn.js:2221:15)
    at Parser.pp$7.getTokenFromCode (...\node_modules\webpack\node_modules\acorn\dist\acorn.js:2756:10)
    at Parser.pp$7.readToken (...\node_modules\webpack\node_modules\acorn\dist\acorn.js:2477:17)
    at Parser.pp$7.nextToken (...\node_modules\webpack\node_modules\acorn\dist\acorn.js:2468:15)
    at Parser.parse (...\node_modules\webpack\node_modules\acorn\dist\acorn.js:515:10)
    at Object.parse (...\node_modules\webpack\node_modules\acorn\dist\acorn.js:3098:39)
    at Parser.parse (...\node_modules\webpack\lib\Parser.js:902:15)
    at NormalModule.<anonymous> (...\node_modules\webpack\lib\NormalModule.js:104:16)
    at NormalModule.onModuleBuild (...\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10)
    at nextLoader (...\node_modules\webpack-core\lib\NormalModuleMixin.js:275:25)
    at ...\node_modules\webpack-core\lib\NormalModuleMixin.js:259:5
    at Storage.finished (...\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:38:16)
    at ...\node_modules\graceful-fs\graceful-fs.js:78:16
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:511:3)

npm info lifecycle app@0.1.0~build: Failed to exec build script
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! app@0.1.0 build: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the app@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     ...\_logs\2018-03-09T15_48_06_442Z-debug.log

I've been searching an awful lot and found multiple solutions for the Unexpected character '#' problem, yet none of them actually worked out for me. The problem here is that npm-cli.js is being bundled and that the first line contains #!/usr/bin/env node. How would one best resolve this issue?

Attempted solutions

BannerPlugin.js (docs): Throws a new problem described here and doesn't actually fix the original issue. Source (StackOverflow).
Creating a loader: Source (GitHub).
Importing the shebang-loader: There are different ways to import this loader and I've tried many of them but none seems to actually work out. On top of that, the last update was 2 years ago and there are no clear docs (I got most information from GitHub threads linking to this repo or from their issues) Source (GitHub).

Specifications

NPM log:

...\_logs\2018-03-09T15_48_06_442Z-debug.log

0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'build' ]
2 info using npm@5.6.0
3 info using node@v8.9.4
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle app@0.1.0~prebuild: app@0.1.0
6 verbose lifecycle app@0.1.0~prebuild: unsafe-perm in lifecycle true
7 verbose lifecycle app@0.1.0~prebuild: PATH: ALLPATHSFROMPC
8 verbose lifecycle app@0.1.0~prebuild: CWD: PROJECTPATH
9 silly lifecycle app@0.1.0~prebuild: Args: [ '/d /s /c', 'rimraf ./build' ]
10 silly lifecycle app@0.1.0~prebuild: Returned: code: 0  signal: null
11 info lifecycle app@0.1.0~build: app@0.1.0
12 verbose lifecycle app@0.1.0~build: unsafe-perm in lifecycle true
13 verbose lifecycle app@0.1.0~build: PATH: ALLPATHSFROMPC
14 verbose lifecycle app@0.1.0~build: CWD: PROJECTPATH
15 silly lifecycle app@0.1.0~build: Args: [ '/d /s /c', 'node scripts/build.js' ]
16 silly lifecycle app@0.1.0~build: Returned: code: 1  signal: null
17 info lifecycle app@0.1.0~build: Failed to exec build script
18 verbose stack Error: app@0.1.0 build: `node scripts/build.js`
18 verbose stack Exit status 1
18 verbose stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:285:16)
18 verbose stack     at emitTwo (events.js:126:13)
18 verbose stack     at EventEmitter.emit (events.js:214:7)
18 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
18 verbose stack     at emitTwo (events.js:126:13)
18 verbose stack     at ChildProcess.emit (events.js:214:7)
18 verbose stack     at maybeClose (internal/child_process.js:925:16)
18 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
19 verbose pkgid app@0.1.0
20 verbose cwd PROJECTPATH
21 verbose Windows_NT 10.0.16299
22 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
23 verbose node v8.9.4
24 verbose npm  v5.6.0
25 error code ELIFECYCLE
26 error errno 1
27 error app@0.1.0 build: `node scripts/build.js`
27 error Exit status 1
28 error Failed at the app@0.1.0 build script.
28 error This is probably not a problem with npm. There is likely additional logging output above.
29 verbose exit [ 1, true ]

Notes:

Replaced the projectname with "app"
Replaced the projectpath with "PROJECTPATH" or "..."
Replaced the PATH paths with "ALLPATHSFROMPC"

Edits:

Added the notes section
Added the NPM log 2018-03-09T15_48_06_442Z-debug.log section
Added the build.js file as a Pastebin link
Added the package.json file as a Pastebin link

can you put sample project to github? It is hard to reproduce if only webpack config file — hendrathings, Mar 12 '18 at 09:39
@hendrathings I've only been put on the project involving this problem recently, so I don't know the entire structure and I can't share the entire project itself. I'd like to point out that the shebang producing the problem is located in `npm-cli.js` (which should be accessible). And that I don't know how this is being bundeled yet. Would the `build.js` file satisfy you? — Wouter Vanherck, Mar 12 '18 at 10:18
What is the usage of npm-cli.js? Do you import it into your react src code? — zarcode, Mar 13 '18 at 07:59
Haven't found the specific use for npm-cli.js in the project yet. The project is a "finished" react-app which I imagine used the cli for developing purposes. I don't think it's needed in the final build, but I don't know where or how it's being bundled either way. I'd really like to provide more information on the use, but I can't. — Wouter Vanherck, Mar 13 '18 at 09:36
@hendrathings I have updated the question to include the log file. Keep in mind that I changed my projectname, projectpath and PATH paths to not display unnecessary/secret content — Wouter Vanherck, Mar 13 '18 at 15:28
Can you try removing uglifyjs from your production webpack.config plugins? — Cody Ｇ, Mar 13 '18 at 20:15
@WouterVanherck, I need more details. what script prod does? I mean for process like if you npm run build:prod, what actually run inside the script? — hendrathings, Mar 14 '18 at 10:56
also, I need to know `scripts/build.js`, can you include that? — hendrathings, Mar 14 '18 at 10:57
or, better, can you clone your project, then on the root of js, usually index.js make simple component hello world I think. last, try build to prod. if same error, remove unnecessary and push to github. So your project won't share, only process webpack. It is hard to reproduce if only see log and config right now. — hendrathings, Mar 14 '18 at 11:06
@CodyG.Removing the `UglifyJsPlugin` bit in `webpack.config.prod.ts` didn't change the error after a `npm build run` — Wouter Vanherck, Mar 14 '18 at 15:21
@hendrathings Thank you for responding again. The production script will be used to build the webapp and the contents of the script will configure multiple things (it's been documented what every should do). About the other comments, I will include `build.js` but it will take some time to clone and remove parts, so that only the webpack is avaible, like you instructed. — Wouter Vanherck, Mar 14 '18 at 15:23
@WouterVanherck, can you try use node v6.9.x and npm 3.10.x. Just want to make sure webpack v1 working in stable node. I think `#!/usr/bin/env node` its not a problem. — hendrathings, Mar 15 '18 at 04:27
since `#!/usr/bin/env node` executeble for terminal. like bash script or python or ruby. should not that problem — hendrathings, Mar 15 '18 at 04:29
@hendrathings I've tried to build with `node v6.9.0` and corresponding `npm v3.10.8` yet the same `Unexpected character '#'` error appears. I did got an additional error to update my node: `Make sure you have the latest version of node.js and npm installed.`. Thank you for investing your time and suggesting it, it was worth the shot. — Wouter Vanherck, Mar 15 '18 at 08:53
@WouterVanherck, can you put `scripts`, `dependency` and `devdependency` of `package.json`? I want to try debug your webpack — hendrathings, Mar 15 '18 at 09:08
@hendrathings I have updated the question to include the `package.json` file. — Wouter Vanherck, Mar 15 '18 at 09:24
@WouterVanherck, after checking. I'm not getting error as you said. It's working. can you try change `webpack.bannerPlugin` to `new webpack.BannerPlugin('#!/usr/bin/env node', { raw: true })` ? — hendrathings, Mar 15 '18 at 12:30
@hendrathings I tried your suggestion `new webpack.BannerPlugin('#!/usr/bin/env node', { raw: true })` but it keeps showing `Unexpected character '#'`. When I use the new format `new webpack.BannerPlugin({ banner: "#!/usr/bin/env node", raw: true });` as seen on [SO comment](https://stackoverflow.com/a/40763389/6761698) or the [docs](https://github.com/webpack/webpack.js.org/blob/master/src/content/plugins/banner-plugin.md), it at least gave me a new error. But considering the first syntax worked on your reproduction, that might indicate a version mismatch somewhere on my side? — Wouter Vanherck, Mar 15 '18 at 12:48
I think dependency package json. can you delete `node_modules` and `npm cache clean` and `npm install` — hendrathings, Mar 15 '18 at 12:50
I had to use `npm cache clean --force` because `As of npm@5, the npm cache self-heals from corruption issues and data extracted from the cache is guaranteed to be valid.`. Have deleted and reinstalled the `node_modules`, yet no effect. — Wouter Vanherck, Mar 15 '18 at 13:02
oke, try this: delete `node_modules`, keep change `webpack.bannerplugin` change as I suggest. then update package `"expose-loader": "=0.7.3"`. last `npm install` — hendrathings, Mar 15 '18 at 13:12
Changing the version of `expose-loader` to `=0.7.3` did not work out. The NPM build still fails and the NPM log also shows the same — Wouter Vanherck, Mar 15 '18 at 13:24

score 4 · Accepted Answer · edited Mar 16 '18 at 08:05

4

After investigation, I found that the problem came from package.json.

1) Remove the npm and npm-run-all modules from package.json:

"npm": "^5.7.1",
"npm-run-all": "^4.0.2",

2) Remove BannerPlugin from webpack.config.prod.js

// version 1 webpack
new webpack.BannerPlugin("#!/usr/bin/env node", { raw: false }),

// version 2 webpack
new webpack.BannerPlugin({
  banner: "#!/usr/bin/env node",
  raw: true
});

We don't need these anymore.

3) Use a stable npm- and node version for global execution:

node v6.9.x
npm v4.x.x

See this webpack 2 sample (clone and try it locally) and run npm run coba.

The problem lies within package.json. When the webpack is building in production mode, it will think that the npm and npm-run-all modules are required to include, which they are not.

You should not include npm in package.json as a module, since it is package manager executable.

edited Mar 16 '18 at 08:05

Wouter Vanherck

2,070
3
27
41

answered Mar 15 '18 at 16:01

hendrathings

3,720
16
30

1

After deleting the `node_modules`, following the steps (actually only the removal of the npm and npm-run-all packages in package.json, since BannerPlugin was already removed and my npm and node were global too) and executing `npm i`, the command `npm run build` actually runned without errors and the project builded for the first time. The time investment including the sample must've been great and I can't thank you enough! – Wouter Vanherck Mar 15 '18 at 16:18
I use `Mqtt.js` for my client, it has `shebang` in itself and I use `shebang-loader` in my `webpack` configuration file for settle it, in my `react` component I used it as `import {connect} from 'mqtt'` and everything is good in windows, but I pull my codes in `Ubuntu` and then the `Module parse failed: Unexpected character '#' (1:0)` error come back again, seems my webpack doesn't see the `shebang-loader` is exists. – AmerllicA Jun 02 '18 at 16:16

JavaScript: Resolving Unexpected character '#'

Introduction

Attempted solutions

Specifications

NPM log:

1 Answers1

Linked