Node-gyp rebuild error when adding NGRX to angular app on Mac OS

Question

I am trying to add ngrx/store to my angular app.

Johns-MBP:Frontend johnbell$ npm install @ngrx/store

canvas@1.6.13 install /Users/johnbell/Projects/******/Frontend/node_modules/canvas
node-gyp rebuild

Traceback (most recent call last):
  File "/usr/local/lib/node_modules/npm/node_modules/node-gyp/gyp/gyp_main.py", line 50, in <module>
    sys.exit(gyp.script_main())
  File "/usr/local/lib/node_modules/npm/node_modules/node-gyp/gyp/pylib/gyp/__init__.py", line 554, in script_main
    return main(sys.argv[1:])
  File "/usr/local/lib/node_modules/npm/node_modules/node-gyp/gyp/pylib/gyp/__init__.py", line 547, in main
    return gyp_main(args)
  File "/usr/local/lib/node_modules/npm/node_modules/node-gyp/gyp/pylib/gyp/__init__.py", line 523, in gyp_main
    options.duplicate_basename_check)
  File "/usr/local/lib/node_modules/npm/node_modules/node-gyp/gyp/pylib/gyp/__init__.py", line 139, in Load
    params['parallel'], params['root_targets'])
  File "/usr/local/lib/node_modules/npm/node_modules/node-gyp/gyp/pylib/gyp/input.py", line 2779, in Load
    variables, includes, depth, check, True)
  File "/usr/local/lib/node_modules/npm/node_modules/node-gyp/gyp/pylib/gyp/input.py", line 417, in LoadTargetBuildFile
    build_file_data, PHASE_EARLY, variables, build_file_path)
  File "/usr/local/lib/node_modules/npm/node_modules/node-gyp/gyp/pylib/gyp/input.py", line 1270, in ProcessVariablesAndConditionsInDict
    ProcessConditionsInDict(the_dict, phase, variables, build_file)
  File "/usr/local/lib/node_modules/npm/node_modules/node-gyp/gyp/pylib/gyp/input.py", line 1149, in ProcessConditionsInDict
    variables, build_file)
  File "/usr/local/lib/node_modules/npm/node_modules/node-gyp/gyp/pylib/gyp/input.py", line 1218, in ProcessVariablesAndConditionsInDict
    variables, build_file, 'variables')
  File "/usr/local/lib/node_modules/npm/node_modules/node-gyp/gyp/pylib/gyp/input.py", line 1225, in ProcessVariablesAndConditionsInDict
    expanded = ExpandVariables(value, phase, variables, build_file)
  File "/usr/local/lib/node_modules/npm/node_modules/node-gyp/gyp/pylib/gyp/input.py", line 914, in ExpandVariables
    sys.stderr.write(p_stderr)
TypeError: write() argument must be str, not bytes while trying to load binding.gyp
gyp ERR! configure error 
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onCpExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:351:16)
gyp ERR! stack     at ChildProcess.emit (events.js:210:5)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:272:12)
gyp ERR! System Darwin 18.7.0
gyp ERR! command "/usr/local/Cellar/node/12.10.0/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/johnbell/Projects/SeeMode/Frontend/node_modules/canvas
gyp ERR! node -v v12.13.0
gyp ERR! node-gyp -v v5.0.5
gyp ERR! not ok 
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: canvas@1.6.13 (node_modules/canvas):
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: canvas@1.6.13 install: `node-gyp rebuild`
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: Exit status 1

+ @ngrx/store@8.4.0
removed 21 packages, updated 1 package and audited 21154 packages in 9.319s
found 0 vulnerabilities

Here are the angular versions being used.

@angular-devkit/architect         0.11.0
@angular-devkit/build-angular     0.803.14
@angular-devkit/build-optimizer   0.803.14
@angular-devkit/build-webpack     0.803.14
@angular-devkit/core              8.3.14
@angular-devkit/schematics        7.1.0
@angular/cdk                      8.2.3
@angular/cli                      8.3.14
@angular/material                 8.2.3
@ngtools/webpack                  8.3.14
@schematics/angular               8.3.14
@schematics/update                0.803.14
rxjs                              6.5.3
typescript                        3.5.3
webpack                           4.39.2

Any thoughts on this would be helpful. I am following the installation instructions on the ngrx site. https://ngrx.io/guide/store/install

Same result if i use "ng add @ngrx/store"

Johns-MBP:Frontend johnbell$ node -v
v12.13.0

Answer 1

I would not recommend using ng add command

Before you install anything try to find lock file like package-lock.json or yarn-lock.json and delete it with node_modules folder

Then run

npm cache clean --force

Then update your package.json with the package you want to install and run

npm i