Unexpected token: operator (>) in production build

Question

I'm new to react and I'm currently working on a small change to an existing application.

I made the change and tested it locally. It's all good. both npm start and npm run build works without any errors. This application has a CI setup in Azure DevOps and when I check in the code the CI build failed. The log is below.

 npm ERR! Windows_NT 6.3.9600
 > react-scripts build
 npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"

 npm ERR! node v6.9.1
 Creating an optimized production build...
 npm ERR! npm  v3.10.8
 Skipping static resource "D:/a/1/s/MyAppClient/build/static/js/main.b7fe64b2.js" (5.36 MB) - max size is 2.1 MB
 npm ERR! code ELIFECYCLE
 Failed to compile.
 npm ERR! MyAppclient@0.1.0 build: `react-scripts build`

 npm ERR! Exit status 1
 static/js/main.b7fe64b2.js from UglifyJs
 npm ERR! 
 Unexpected token: operator (>) [./~/file-type/index.js:2,0][static/js/main.b7fe64b2.js:51965,19]
 npm ERR! Failed at the MyAppclient@0.1.0 build script 'react-scripts build'.

 npm ERR! Make sure you have the latest version of node.js and npm installed.
 npm ERR! If you do, this is most likely a problem with the MyAppclient package,
 npm ERR! not with npm itself.
 npm ERR! Tell the author that this fails on your system:
 npm ERR!     react-scripts build
 npm ERR! You can get information on how to open an issue for this project with:
 npm ERR!     npm bugs MyAppclient
 npm ERR! Or if that isn't available, you can get their info via:
 npm ERR!     npm owner ls MyAppclient
 npm ERR! There is likely additional logging output above.

 npm ERR! Please include the following file with any support request:
 npm ERR!     D:\a\1\s\MyAppClient\npm-debug.log
 Found npm debug log, make sure the path matches with the one in npm's output: D:\a\1\s\MyAppClient\npm-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@3.10.8
 3 info using node@v6.9.1
 4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
 5 info lifecycle MyAppclient@0.1.0~prebuild: MyAppclient@0.1.0
 6 silly lifecycle MyAppclient@0.1.0~prebuild: no script for prebuild, continuing
 7 info lifecycle MyAppclient@0.1.0~build: MyAppclient@0.1.0
 8 verbose lifecycle MyAppclient@0.1.0~build: unsafe-perm in lifecycle true
 9 verbose lifecycle MyAppclient@0.1.0~build: PATH: C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin;D:\a\1\s\MyAppClient\node_modules\.bin;C:\agents\2.142.1\externals\git\cmd;C:\ProgramData\Oracle\Java\javapath;C:\W
 10 verbose lifecycle MyAppclient@0.1.0~build: CWD: D:\a\1\s\MyAppClient
 11 silly lifecycle MyAppclient@0.1.0~build: Args: [ '/d /s /c', 'react-scripts build' ]
 12 silly lifecycle MyAppclient@0.1.0~build: Returned: code: 1  signal: null
 13 info lifecycle MyAppclient@0.1.0~build: Failed to exec build script
 14 verbose stack Error: MyAppclient@0.1.0 build: `react-scripts build`
 14 verbose stack Exit status 1
 14 verbose stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:255:16)
 14 verbose stack     at emitTwo (events.js:106:13)
 14 verbose stack     at EventEmitter.emit (events.js:191:7)
 14 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:40:14)
 14 verbose stack     at emitTwo (events.js:106:13)
 14 verbose stack     at ChildProcess.emit (events.js:191:7)
 14 verbose stack     at maybeClose (internal/child_process.js:877:16)
 14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
 15 verbose pkgid MyAppclient@0.1.0
 16 verbose cwd D:\a\1\s\MyAppClient
 17 error Windows_NT 6.3.9600
 18 error argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
 19 error node v6.9.1
 20 error npm  v3.10.8
 21 error code ELIFECYCLE
 22 error MyAppclient@0.1.0 build: `react-scripts build`
 22 error Exit status 1
 23 error Failed at the MyAppclient@0.1.0 build script 'react-scripts build'.
 23 error Make sure you have the latest version of node.js and npm installed.
 23 error If you do, this is most likely a problem with the MyAppclient package,
 23 error not with npm itself.
 23 error Tell the author that this fails on your system:
 23 error     react-scripts build
 23 error You can get information on how to open an issue for this project with:
 23 error     npm bugs MyAppclient
 23 error Or if that isn't available, you can get their info via:
 23 error     npm owner ls MyAppclient
 23 error There is likely additional logging output above.
 24 verbose exit [ 1, true ]

 ##[error]Error: Npm failed with return code: 1
 ##[section]Finishing: Build Client

I don't know what the issue is but I sense it must be around "Unexpected token: operator (>)"

Can you please let me know what am I missing?

Answer 1

Unexpected token: operator (>)

usually happens when there is an arrow function (=>) in the generated bundle and it executes in a js environment that doesn't support arrow functions (below ES6).

There is no straight forward solution to this. But you can try two things.

1. Add arrow function support to execution environment (likely upgrade).
2. Find out the code/package in your codebase that generates the arrow functions. For instance, I once ran into this issue and it took me a day to figure it out. I used a package called query-string and its source code was not babel transpiled and had arrow functions in the code. I had to add a config in webpack to transpile that package as well (webpack doesn't transpile code in node_modules unless you specify it explicitly).