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 onplete] (fs.js:511:3)
npm info lifecycle [email protected]~build: Failed to exec build script
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A plete 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
- package.json (Pastebin)
- build.js (Pastebin)
- webpack.config.dev.js (Pastebin)
- webpack.config.prod.js (Pastebin)
- Webpack version: "
[email protected]"
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 [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle [email protected]~prebuild: [email protected]
6 verbose lifecycle [email protected]~prebuild: unsafe-perm in lifecycle true
7 verbose lifecycle [email protected]~prebuild: PATH: ALLPATHSFROMPC
8 verbose lifecycle [email protected]~prebuild: CWD: PROJECTPATH
9 silly lifecycle [email protected]~prebuild: Args: [ '/d /s /c', 'rimraf ./build' ]
10 silly lifecycle [email protected]~prebuild: Returned: code: 0 signal: null
11 info lifecycle [email protected]~build: [email protected]
12 verbose lifecycle [email protected]~build: unsafe-perm in lifecycle true
13 verbose lifecycle [email protected]~build: PATH: ALLPATHSFROMPC
14 verbose lifecycle [email protected]~build: CWD: PROJECTPATH
15 silly lifecycle [email protected]~build: Args: [ '/d /s /c', 'node scripts/build.js' ]
16 silly lifecycle [email protected]~build: Returned: code: 1 signal: null
17 info lifecycle [email protected]~build: Failed to exec build script
18 verbose stack Error: [email protected] 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 [email protected]
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 [email protected] build: `node scripts/build.js`
27 error Exit status 1
28 error Failed at the [email protected] 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.logsection - Added the
build.jsfile as a Pastebin link - Added the
package.jsonfile as a Pastebin link
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 onplete] (fs.js:511:3)
npm info lifecycle [email protected]~build: Failed to exec build script
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A plete 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
- package.json (Pastebin)
- build.js (Pastebin)
- webpack.config.dev.js (Pastebin)
- webpack.config.prod.js (Pastebin)
- Webpack version: "
[email protected]"
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 [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle [email protected]~prebuild: [email protected]
6 verbose lifecycle [email protected]~prebuild: unsafe-perm in lifecycle true
7 verbose lifecycle [email protected]~prebuild: PATH: ALLPATHSFROMPC
8 verbose lifecycle [email protected]~prebuild: CWD: PROJECTPATH
9 silly lifecycle [email protected]~prebuild: Args: [ '/d /s /c', 'rimraf ./build' ]
10 silly lifecycle [email protected]~prebuild: Returned: code: 0 signal: null
11 info lifecycle [email protected]~build: [email protected]
12 verbose lifecycle [email protected]~build: unsafe-perm in lifecycle true
13 verbose lifecycle [email protected]~build: PATH: ALLPATHSFROMPC
14 verbose lifecycle [email protected]~build: CWD: PROJECTPATH
15 silly lifecycle [email protected]~build: Args: [ '/d /s /c', 'node scripts/build.js' ]
16 silly lifecycle [email protected]~build: Returned: code: 1 signal: null
17 info lifecycle [email protected]~build: Failed to exec build script
18 verbose stack Error: [email protected] 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 [email protected]
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 [email protected] build: `node scripts/build.js`
27 error Exit status 1
28 error Failed at the [email protected] 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.logsection - Added the
build.jsfile as a Pastebin link - Added the
package.jsonfile as a Pastebin link
- can you put sample project to github? It is hard to reproduce if only webpack config file – hendrathings Commented Mar 12, 2018 at 9: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 thebuild.jsfile satisfy you? – Wouter Vanherck Commented Mar 12, 2018 at 10:18 - What is the usage of npm-cli.js? Do you import it into your react src code? – zarcode Commented Mar 13, 2018 at 7: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 Commented Mar 13, 2018 at 9:36
-
can you add this
2018-03-09T15_48_06_442Z-debug.log? – hendrathings Commented Mar 13, 2018 at 15:09
1 Answer
Reset to default 4 +50After 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.