Google Cloud Builder - vuejs, gulp build fails

Question

Problem

I'm working on adding a couple additional build steps to our current, functional build pipeline. The problem is gulp is failing to find modules when it comes to compiling the JavaScript. Below you will find the relevant section of our cloudbuild.yaml, and the bash scripts.

Expected Results

I need the Vue.js and SCSS to processed and prepared for deployment to our production environment. Overall, our goal is to remove the transpiled JS and CSS from our Git repository, and only have the source we work with in the repo.

Supporting Code

cloudbuild.yaml:

- name: 'gcr.io/cloud-builders/npm:node-9.10.0'
  id: npm-install
  entrypoint: 'bash'
  args:
    - '-c'
    - |
      sh nodeprep.sh
  waitFor: ['-']

- name: 'gcr.io/cloud-builders/npm:node-9.10.0'
  id: gulp-build
  entrypoint: 'bash'
  args: 
    - '-c'
    - |
      sh gulpprep.sh
  waitFor: ['npm-install']

nodeprep.sh:

#!/bin/bash
npm install --production
npm rebuild node-sass --force # necessary to resolve architecture differences

gulpprep.sh

#!/bin/bash
node_modules/.bin/gulp deploy-build --production

Errors

Depending on the --production flag, we receive different errors. Here's the error we receive with the --production flag set as shown above in nodeprep.sh:

: events.js:165
:       throw er; // Unhandled 'error' event
:       ^
: 
: Error: Cannot find module 'Axios' from '/workspace/js/vue-mini-apps/ha/src'
:     at /workspace/node_modules/browser-resolve/node_modules/resolve/lib/async.js:46:17
:     at process (/workspace/node_modules/browser-resolve/node_modules/resolve/lib/async.js:173:43)
:     at ondir (/workspace/node_modules/browser-resolve/node_modules/resolve/lib/async.js:188:17)
:     at load (/workspace/node_modules/browser-resolve/node_modules/resolve/lib/async.js:69:43)
:     at onex (/workspace/node_modules/browser-resolve/node_modules/resolve/lib/async.js:92:31)
:     at /workspace/node_modules/browser-resolve/node_modules/resolve/lib/async.js:22:47
:     at FSReqWrap.oncomplete (fs.js:170:21)
: Emitted 'error' event at:
:     at Labeled.<anonymous> (/workspace/node_modules/read-only-stream/index.js:28:44)
:     at Labeled.emit (events.js:180:13)
:     at Labeled.<anonymous> (/workspace/node_modules/stream-splicer/index.js:130:18)
:     at Labeled.emit (events.js:180:13)
:     at Deps.<anonymous> (/workspace/node_modules/stream-splicer/index.js:130:18)
:     at Deps.emit (events.js:180:13)
:     at /workspace/node_modules/module-deps/index.js:361:30
:     at onresolve (/workspace/node_modules/module-deps/index.js:179:25)
:     at /workspace/node_modules/browserify/index.js:490:22
:     at /workspace/node_modules/browser-resolve/index.js:265:24
2018/06/28 14:39:32 status changed to "ERROR"
ERROR
ERROR: build step "gcr.io/cloud-builders/npm@sha256:43d8b9b86f899f5622a668c7d7ad7493a323740440cf79089953cddc17a4ad2a" failed: exit status 1
2018/06/28 14:39:35 Build finished with ERROR status

This is the output when --production is removed:

Step #1 - "gulp-build": Already have image (with digest): gcr.io/cloud-builders/npm:node-9.10.0
Starting Step #1 - "gulp-build"
Step #1 - "gulp-build": module.js:545
Step #1 - "gulp-build":     throw err;
Step #1 - "gulp-build":     ^
Step #1 - "gulp-build": 
Step #1 - "gulp-build": Error: Cannot find module '../lib/completion'
Step #1 - "gulp-build":     at Function.Module._resolveFilename (module.js:543:15)
Step #1 - "gulp-build":     at Function.Module._load (module.js:470:25)
Step #1 - "gulp-build":     at Module.require (module.js:593:17)
Step #1 - "gulp-build":     at require (internal/module.js:11:18)
Step #1 - "gulp-build":     at Object.<anonymous> (/workspace/node_modules/.bin/gulp:13:18)
Step #1 - "gulp-build":     at Module._compile (module.js:649:30)
Step #1 - "gulp-build":     at Object.Module._extensions..js (module.js:660:10)
Step #1 - "gulp-build":     at Module.load (module.js:561:32)
Step #1 - "gulp-build":     at tryModuleLoad (module.js:501:12)
Step #1 - "gulp-build":     at Function.Module._load (module.js:493:3)
Finished Step #1 - "gulp-build"
2018/06/28 16:24:44 status changed to "ERROR"
ERROR
ERROR: build step "gcr.io/cloud-builders/npm@sha256:43d8b9b86f899f5622a668c7d7ad7493a323740440cf79089953cddc17a4ad2a" failed: exit status 1

Moving node_modules out of the directory returns these errors:

: 
: > proj@ build /workspace
: > cross-env NODE_ENV=production browserify -g envify js/vue-mini-apps/materials/app.js | uglifyjs -c warnings=false -m > js/vue-mini-apps/dist/materials.js
: 
: module.js:545
:     throw err;
:     ^
: 
: Error: Cannot find module '../dist'
:     at Function.Module._resolveFilename (module.js:543:15)
:     at Function.Module._load (module.js:470:25)
:     at Module.require (module.js:593:17)
:     at require (internal/module.js:11:18)
:     at Object.<anonymous> (/workspace/node_modules/.bin/cross-env:3:1)
:     at Module._compile (module.js:649:30)
:     at Object.Module._extensions..js (module.js:660:10)
:     at Module.load (module.js:561:32)
:     at tryModuleLoad (module.js:501:12)
:     at Function.Module._load (module.js:493:3)
: module.js:545
:     throw err;
:     ^
: 
: Error: Cannot find module '../tools/node'
:     at Function.Module._resolveFilename (module.js:543:15)
:     at Function.Module._load (module.js:470:25)
:     at Module.require (module.js:593:17)
:     at require (internal/module.js:11:18)
:     at Object.<anonymous> (/workspace/node_modules/.bin/uglifyjs:6:16)
:     at Module._compile (module.js:649:30)
:     at Object.Module._extensions..js (module.js:660:10)
:     at Module.load (module.js:561:32)
:     at tryModuleLoad (module.js:501:12)
:     at Function.Module._load (module.js:493:3)
: npm ERR! code ELIFECYCLE
: npm
:  ERR! 
: errno 1
: npm ERR! proj@ build: `cross-env NODE_ENV=production browserify -g envify js/vue-mini-apps/materials/app.js | uglifyjs -c warnings=false -m > js/vue-mini-apps/dist/materials.js`
: npm ERR! Exit status 1
: npm ERR!
:  
: npm ERR! Failed at the proj@ 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!     /builder/home/.npm/_logs/2018-06-28T22_33_47_659Z-debug.log

The builds are successful on localhost, and are failing when running this command:

container-builder-local --config=cloudbuild.yaml --dryrun=false .

Attempted (and entirely unsuccessful) Solutions

Once this is functioning with container-builder-local, I'll be able to test it on GCP. Right now, I'm pretty well stuck as I've done everything I can think of at this point, including:

rm -rf node_modules as the first command in nodeprep.sh
npm cache clear just to be sure (npm complains and recommends npm cache verify instead, still appears to have no effect)
adding npm run-script build (which runs cross-env NODE_ENV=production browserify -g envify js/vue-mini-apps/materials/app.js | uglifyjs -c warnings=false -m > js/vue-mini-apps/dist/materials.js).
I've even tried moving node_modules out of the project directory, so npm install has no choice but to create a new node_modules directory -- this causes gulp to not be installed at all when npm install runs.

I'm kind of at a loss as to what I should do next. It seems the deeper I go down this rabbit hole, the more progressively broken these build steps are getting.

@PhilippeModard just an update: I'm working on putting together a PoC that replicates this issue for your team. Thank you again. — TomJ, Jul 09 '18 at 23:04
@ShadyAnwar unfortunately, no. I'm no longer with the company where this was an issue and we were never able to implement a functional solution. — TomJ, Jun 12 '19 at 00:17