Gitlab-CI: Nodejs application fails to build

Question

I am using gitlab-ci to build a react application but the build stage always fails, on my local machine it works fine same thing on my deployment server but when using gitlab-ci it fails with

 Line 421:34:   Expected '===' and instead saw '=='                     eqeqeq
  Line 473:13:   'names' is assigned a value but never used              no-unused-vars
  Line 789:96:   Expected '!==' and instead saw '!='                     eqeqeq
  Line 792:182:  Expected '!==' and instead saw '!='                     eqeqeq
  Line 792:258:  Expected '!==' and instead saw '!='                     eqeqeq
  Line 792:295:  Expected '!==' and instead saw '!='                     eqeqeq
  Line 793:161:  Expected '!==' and instead saw '!='                     eqeqeq
  Line 793:236:  Expected '!==' and instead saw '!='                     eqeqeq
  Line 793:272:  Expected '!==' and instead saw '!='                     eqeqeq
  Line 813:203:  Style prop value must be an object                      react/style-prop-object
./src/components/login.component.js
  Line 9:7:    'user' is assigned a value but never used                no-unused-vars
  Line 73:13:  'currentUser' is assigned a value but never used         no-unused-vars
  Line 73:26:  'showModeratorBoard' is assigned a value but never used  no-unused-vars
  Line 73:46:  'showAdminBoard' is assigned a value but never used      no-unused-vars
  Line 73:63:  'SuperAdmin' is assigned a value but never used          no-unused-vars
  Line 73:77:  'showAdminDirect' is assigned a value but never used     no-unused-vars
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! react-jwt-auth@0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the react-jwt-auth@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!     /builds/tahar.benachour/endarh/.npm/_logs/2021-11-23T12_31_40_565Z-debug.log
Cleaning up file based variables
00:01
ERROR: Job failed: exit code 1

I tried different images but same error

my gitlab-ci.yml

stages:
  - setup
  - build
  - deployment

variables:
  npm_config_cache: "$CI_PROJECT_DIR/.npm"

image: node:10

# This folder is cached between builds
.dependencies_cache:
  cache:
    key:
      files:
        - package-lock.json # A transformer en package-lock.json
    paths:
      - .npm
    policy: pull

app-setup:
  stage: setup
  script:
    - npm ci
    - npm run build
  extends: .dependencies_cache
  cache:
    policy: pull-push
  artifacts:
    expire_in: 2h
    paths:
      - .npm
      - build/

Some additional details, I saved logs and build directory as artifact here is the log details

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'build' ]
2 info using npm@6.14.12
3 info using node@v10.24.1
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle react-jwt-auth@0.1.0~prebuild: react-jwt-auth@0.1.0
6 info lifecycle react-jwt-auth@0.1.0~build: react-jwt-auth@0.1.0
7 verbose lifecycle react-jwt-auth@0.1.0~build: unsafe-perm in lifecycle true
8 verbose lifecycle react-jwt-auth@0.1.0~build: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/builds/tahar.benachour/endarh/node_modules/.bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin
9 verbose lifecycle react-jwt-auth@0.1.0~build: CWD: /builds/tahar.benachour/endarh
10 silly lifecycle react-jwt-auth@0.1.0~build: Args: [ '-c', 'react-scripts build' ]
11 silly lifecycle react-jwt-auth@0.1.0~build: Returned: code: 1  signal: null
12 info lifecycle react-jwt-auth@0.1.0~build: Failed to exec build script
13 verbose stack Error: react-jwt-auth@0.1.0 build: `react-scripts build`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:198:13)
13 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:198:13)
13 verbose stack     at maybeClose (internal/child_process.js:982:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
14 verbose pkgid react-jwt-auth@0.1.0
15 verbose cwd /builds/tahar.benachour/endarh
16 verbose Linux 5.4.0-90-generic
17 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build"
18 verbose node v10.24.1
19 verbose npm  v6.14.12
20 error code ELIFECYCLE
21 error errno 1
22 error react-jwt-auth@0.1.0 build: `react-scripts build`
22 error Exit status 1
23 error Failed at the react-jwt-auth@0.1.0 build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

the build directory and files are created successfully and it runs fine on my web server so to be honest I don't understand the pipeline failure perhaps as said related to lint and code quality

Answer 1

I was able to solve my problem by adding

CI=false && react-scripts build to my package.json

  "scripts": {
    "start": "react-scripts start",
    "build": "CI=false && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

Answer 2

Those are linter errors. Check the npm scripts that are being executed (probabaly on npm run build) as this is probably running your linter and producing the errors.

I would suggest you run the same thing locally and fix those :)

This doesn't look related to GitLab at all

Answer 3

I recommend quite the opposite approach to your solution: setting CI=true locally instead of setting it to false for the production build. You can either change your "build"-script, or add CI=true to your .env-file (create it at the root level of your project, if it doesn't exist).

Thereafter, you should fix the warnings you have (usage of == and unused variables).

---

Additional Explanation:

A senior colleague of me advises against suppressing the warnings with CI=false, as javascript/typescript is not the most stable language and important warnings are hid.

Precisely your error shows, how useful warnings are disabled: The hidden problems of using == and !=. There is a reason why Douglas Crockford's calls them the "evil twins" in JavaScript: The Good Parts, which is laid out in great detail in this StackOverflow answer to the question "Which equals operator (== vs ===) should be used in JavaScript comparisons?".

In short: Avoid the usage of == and != as much as possible and stick with their good twins === and !==. Example excerpt from the linked answer for illogical behaviour of the == operator:

'' == '0'           // false
0  == ''            // true
0  == '0'           // true

false == 'false'    // false
false == '0'        // true

false == undefined  // false
false == null       // false
null  == undefined  // true

' \t\r\n ' == 0     // true

Furthermore you have many unused variables. Unused variables don't provide any value and rather confuse the person who is reading the code, as one usually expect a variable to be used again.

Answer 4

I ahd the same issue and used the "build": "CI=false && react-scripts build" and it worked for me