OS Migration [ Codebase Migration ] - (Windows) -> (Linux) - NodeJs (npm) dependencies issue on Linux

Dependency in Development could make you crazy we have a little story about that

Recently, I develop a full website (Frontend and Backend) for my client and deliver it to my client. After that, I decide to change my development area from Windows to Linux.

After a couple of years, my client call with me and told me they want to update the project. I accepted it to add some feature that they need to add.

But during new setup the project on new machine (Linux) we encounter some interesting problems that I try to explain them in this article. I hope you will find it useful.

Frontend Dependency problems

On new machine (Linux) before I decide to updateing the project I just installed lastest version of nodejs and npm with nvm (node version mananger). current version in order for nodejs and npm are : (16.16.0) - ( 8.11.0 ).

OK, before we jump in it, I would like you to know a bit more about the dependencies that we use in this project. The box below shows package.json file contents :

{
  "name": "my_project_name",
  "version": "1.1.0",
  "description": "my project description",
  "main": "app.js",
  "author": "vheidari",
  "license": "MIT",
  "scripts": {
    "watch": "webpack --watch",
    "start": "webpack-dev-server --open --config webpack.config.dev.js",
    "build": "webpack --config webpack.config.pro.js"
  },
  "devDependencies": {
   "@babel/core": "7.0.0",
    "babel": "^6.23.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.6",
    "clean-webpack-plugin": "^2.0.2",
    "css-loader": "^2.1.1",
    "file-loader": "^3.0.1",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "imagemin-webp-webpack-plugin": "^3.3.3",
    "jslint": "^0.12.1",
    "mini-css-extract-plugin": "^0.6.0",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "popper.js": "^1.15.0",
    "sass-loader": "^7.1.0",
    "srcset-loader": "^2.3.0",
    "style-loader": "^0.23.1",
    "terser-webpack-plugin": "^1.2.4",
    "ts-loader": "^6.0.0",
    "typescript": "^3.4.5",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "url-loader": "^1.1.2",
    "webpack": "^4.35.2",
    "webpack-cli": "^3.3.6",
    "webpack-dev-server": "^3.4.1"
  },
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.9.0",
    "bootstrap": "^4.3.1",
    "bootstrap-v4-rtl": "^4.3.1-3",
    "global": "^4.4.0",
    "jquery": "^3.4.1",
    "owl.carousel": "^2.3.4"
  }
}

Some of the dependencies are installed as development dependencies and others are used in production (they are, that exist the below dependencies {} object).

After setting up the project, when I tried to run our project with npm run I got an error about permission that you can see in the box below :

  webpack-dev-server: Permission denied

In Linux, to run an executable file, you need to change the file permission. For this reason, I used chmod command to change the files permission in./node_modules/.bin path with the below command :

  chmod u+x ./node_modules/.bin/*

The permission problem was resolved but not completely.I tried again npm start to check the project and after running it, we got a lot of errors about Error: EACCES: permission denied this type of error indicated to permission problem. To fixed it, I used chown to change file owner, but this command didn't help us and we got an error again.

  chown -R $(whoami):$(whoami) ./node_modules/.bin/*

On the third effort, I decided to remove node_modules directory and package-lock.json file. Then I edited pacakge.json and changed manualy the package versions to the latest version, then tried to install them. It worked and npm installed all new packages and generated package-lock.json file.

  rm -rf ./project_name/node_modules
  rm -rf ./project_name/packagelock.json
  -----------------------------------------
  npm install

there is my new package.json file:

{
  "name": "my_project_name",
  "version": "1.1.0",
  "description": "my project description",
  "main": "app.js",
  "author": "vheidari",
  "license": "MIT",
  "scripts": {
    "watch": "webpack --watch",
    "start": "webpack-dev-server --open --config webpack.config.dev.js",
    "build": "webpack --config webpack.config.pro.js"
  },
  "devDependencies": {
    "@babel/core": "^7.18.10",
    "@babel/preset-env": "^7.18.10",
    "@popperjs/core": "^2.11.5",
    "babel": "^6.23.0",
    "babel-loader": "^8.2.5",
    "css-loader": "^6.7.1",
    "css-minimizer-webpack-plugin": "^4.0.0",
    "file-loader": "^6.2.0",
    "html-loader": "^4.1.0",
    "html-webpack-plugin": "^5.5.0",
    "imagemin-webp-webpack-plugin": "^3.3.6",
    "mini-css-extract-plugin": "^2.6.1",
    "sass-loader": "^13.0.2",
    "srcset": "^5.0.0",
    "style-loader": "^3.3.1",
    "terser-webpack-plugin": "^5.3.3",
    "url-loader": "^4.1.1",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.9.3",
    "webpack-image-resize-loader": "^5.0.0",
    "webpack-image-srcset-loader": "^1.0.2"
  },
  "dependencies": {
    "@fortawesome/fontawesome-free": "^6.1.2",
    "bootstrap": "^5.2.0",
    "bootstrap-v4-rtl": "^4.6.0-3",
    "global": "^4.4.0",
    "jquery": "^3.6.0",
    "npm-check-updates": "^16.0.5",
    "owl.carousel": "^2.3.4"
  }
}

but did it work ? :). When I tested it for the fourth try, immediately I got a couple of errors about Child compilation.

To fix the problems, I spent a lot of time that I realize what is happening and why we have so many errors in the output stream. in following box you can see an error wiche we got during test :

 ModuleBuildError: Module build failed (from ./node_modules/html-loader/dist/cjs.js):
  ValidationError: Invalid options object. HTML Loader has been initialized using an options object that does not match the API schema.
   - options has an unknown property 'limit'. These properties are valid:
        object { preprocessor?, sources?, minimize?, esModule? }

If you carefully inspect above error you realize that this error isn't about our Frontend app that we develop it. this is about a webpack module which we know it as html-loader that can't builded successfully. because its initialized with a option object that does not mach with a its API schema. :| (WTF)

This is really interesting error, why we should get this error ? Our config file doesn't had any problem !!

above error says us, you just could pass four properties as option ( preprocessor?, sources?, minimize?, esModule? ) in the config file then in more it says it couldn't identified limit property. that I passed it as option in webpack config file.

but what happend to my config file which in last enviorment (Windows) work really good and doesn't have any problem but here don't work. there is a part of my config file:

  module : {
        rules: [
             { test: /\.html$/,  use: [{
                    loader: 'html-loader',
                    options: {
                        name : '[hash].[ext]',
                        outputPath: 'assets/images',
                        attrs: ['img:src', 'source:srcset'],
                        interpolate: true, // https://v4.webpack.js.org/loaders/html-loader/#interpolation
                        limit: 10000
                    },
                }],
             },
             { test: /\.txt$/,   use: 'raw-loader' },
  ...

As you can see in above box I use these option for html-loader:

          options: {
                        name : '[hash].[ext]',
                        outputPath: 'assets/images',
                        attrs: ['img:src', 'source:srcset'],
                        interpolate: true, // https://v4.webpack.js.org/loaders/html-loader/#interpolation
                        limit: 10000
                    },

To realize how this error happend I checked html-loader github page and try to compared diffrent between html-loader version 0.5.5 and lastest version that we install (4.1.0). in my research I realize version 0.5.5 support all option that I mentioned in above box and all of them removed from new version (4.1.0).

since we installing a new version of html-loader the old webpack configuration not supported in new version (4.1.0). Oh My God :). to realizing what properties are removed from configuration we should check the changelog file inside github for html-loader. the below link is change log file for http-loader that show us all change.

we use interpolate option in webpack configuration file. if we check it in checklog we could realize it removed in version 1.0.0 and not supported in new http-loader version.

https://github.com/webpack-contrib/html-loader/blob/master/CHANGELOG.md#100-2020-03-19

For now we know we have version problem according chengelog. To fix it we have 2 path to resolve them. first we should be remove old config file and rewrite it with new rule again. that it mached with new version of webpack and their module. secound holding our old configs file and try to fix our problem.

I select secound path because I don't want to rewrite a new config file for this project.

for second time I decide to remove whole dependencies and lock file and install them with first orginal package.json file. I did it. I remove them and used npm install to install all dependencies but during installation we got a new error that you can see in the box below :

npm ERR! code 1
npm ERR! path /home/project_name/node_modules/sharp
npm ERR! command failed
npm ERR! command sh -c node-gyp rebuild
npm ERR! make: Entering directory '/home/project_name/node_modules/sharp/build'
npm ERR!   TOUCH Release/obj.target/libvips-cpp.stamp
npm ERR!   CXX(target) Release/obj.target/sharp/src/common.o
npm ERR! make: Leaving directory '/home/project_name/node_modules/sharp/build'
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | linux | x64
npm ERR! gyp info find Python using Python version 3.8.10 found at "/usr/bin/python3"
npm ERR! gyp info spawn /usr/bin/python3
npm ERR! gyp info spawn args [
npm ERR! gyp info spawn args   '/home/username/.nvm/versions/node/v16.16.0/lib/node_modules/npm/node_modules/node-gyp/gyp/gyp_main.py',
npm ERR! gyp info spawn args   'binding.gyp',
npm ERR! gyp info spawn args   '-f',
npm ERR! gyp info spawn args   'make',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/home/project_name/node_modules/sharp/build/config.gypi',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/home/username/.nvm/versions/node/v16.16.0/lib/node_modules/npm/node_modules/node-gyp/addon.gypi',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/home/username/.cache/node-gyp/16.16.0/include/node/common.gypi',
npm ERR! gyp info spawn args   '-Dlibrary=shared_library',
npm ERR! gyp info spawn args   '-Dvisibility=default',
npm ERR! gyp info spawn args   '-Dnode_root_dir=/home/username/.cache/node-gyp/16.16.0',
npm ERR! gyp info spawn args   '-Dnode_gyp_dir=/home/username/.nvm/versions/node/v16.16.0/lib/node_modules/npm/node_modules/node-gyp',
npm ERR! gyp info spawn args   '-Dnode_lib_file=/home/username/.cache/node-gyp/16.16.0/<(target_arch)/node.lib',
npm ERR! gyp info spawn args   '-Dmodule_root_dir=/home/project_name/node_modules/sharp',
npm ERR! gyp info spawn args   '-Dnode_engine=v8',
npm ERR! gyp info spawn args   '--depth=.',
npm ERR! gyp info spawn args   '--no-parallel',
npm ERR! gyp info spawn args   '--generator-output',
npm ERR! gyp info spawn args   'build',
npm ERR! gyp info spawn args   '-Goutput_dir=.'
npm ERR! gyp info spawn args ]
npm ERR! gyp info spawn make
npm ERR! gyp info spawn args [ 'BUILDTYPE=Release', '-C', 'build' ]
npm ERR! <command-line>: warning: "_GLIBCXX_USE_CXX11_ABI" redefined
npm ERR! <command-line>: note: this is the location of the previous definition
npm ERR! In file included from /home/username/.cache/node-gyp/16.16.0/include/node/v8.h:30,
npm ERR!                  from /home/username/.cache/node-gyp/16.16.0/include/node/node.h:63,
npm ERR!                  from ../src/common.cc:22:
npm ERR! /home/username/.cache/node-gyp/16.16.0/include/node/v8-internal.h: In function ‘void v8::internal::PerformCastCheck(T*)’:
npm ERR! /home/username/.cache/node-gyp/16.16.0/include/node/v8-internal.h:492:38: error: ‘remove_cv_t’ is not a member of ‘std’; did you mean ‘remove_cv’?
npm ERR!   492 |             !std::is_same<Data, std::remove_cv_t<T>>::value>::Perform(data);
npm ERR!       |                                      ^~~~~~~~~~~
npm ERR!       |                                      remove_cv
npm ERR! /home/username/.cache/node-gyp/16.16.0/include/node/v8-internal.h:492:38: error: ‘remove_cv_t’ is not a member of ‘std’; did you mean ‘remove_cv’?
npm ERR!   492 |             !std::is_same<Data, std::remove_cv_t<T>>::value>::Perform(data);
npm ERR!       |                                      ^~~~~~~~~~~
npm ERR!       |                                      remove_cv
npm ERR! /home/username/.cache/node-gyp/16.16.0/include/node/v8-internal.h:492:50: error: template argument 2 is invalid
npm ERR!   492 |             !std::is_same<Data, std::remove_cv_t<T>>::value>::Perform(data);
npm ERR!       |                                                  ^
npm ERR! /home/username/.cache/node-gyp/16.16.0/include/node/v8-internal.h:492:63: error: ‘::Perform’ has not been declared
npm ERR!   492 |             !std::is_same<Data, std::remove_cv_t<T>>::value>::Perform(data);
npm ERR!       |                                                               ^~~~~~~
npm ERR! In file included from ../src/common.cc:27:
npm ERR! ../src/common.h: At global scope:
npm ERR! ../src/common.h:80:20: error: ‘Handle’ is not a member of ‘v8’; did you mean ‘JobHandle’?
npm ERR!    80 |   bool HasAttr(v8::Handle<v8::Object> obj, std::string attr);
npm ERR!       |                    ^~~~~~
npm ERR!       |                    JobHandle
npm ERR! ../src/common.h:80:37: error: expected primary-expression before ‘>’ token
npm ERR!    80 |   bool HasAttr(v8::Handle<v8::Object> obj, std::string attr);
npm ERR!       |                                     ^
npm ERR! ../src/common.h:80:39: error: ‘obj’ was not declared in this scope
npm ERR!    80 |   bool HasAttr(v8::Handle<v8::Object> obj, std::string attr);
npm ERR!       |                                       ^~~
npm ERR! ../src/common.h:80:56: error: expected primary-expression before ‘attr’
npm ERR!    80 |   bool HasAttr(v8::Handle<v8::Object> obj, std::string attr);
npm ERR!       |                                                        ^~~~
npm ERR! ../src/common.h:80:60: error: expression list treated as compound expression in initializer [-fpermissive]
npm ERR!    80 |   bool HasAttr(v8::Handle<v8::Object> obj, std::string attr);
npm ERR!       |                                                            ^
npm ERR! ../src/common.h:81:29: error: ‘Handle’ is not a member of ‘v8’; did you mean ‘JobHandle’?
npm ERR!    81 |   std::string AttrAsStr(v8::Handle<v8::Object> obj, std::string attr);
npm ERR!       |                             ^~~~~~
npm ERR!       |                             JobHandle
npm ERR! ../src/common.h:81:46: error: expected primary-expression before ‘>’ token
npm ERR!    81 |   std::string AttrAsStr(v8::Handle<v8::Object> obj, std::string attr);
npm ERR!       |                                              ^
npm ERR! ../src/common.h:81:48: error: ‘obj’ was not declared in this scope
npm ERR!    81 |   std::string AttrAsStr(v8::Handle<v8::Object> obj, std::string attr);
npm ERR!       |                                                ^~~
npm ERR! ../src/common.h:81:65: error: expected primary-expression before ‘attr’
npm ERR!    81 |   std::string AttrAsStr(v8::Handle<v8::Object> obj, std::string attr);
npm ERR!       |                                                                 ^~~~
npm ERR! ../src/common.h:82:48: error: ‘Handle’ is not a member of ‘v8’; did you mean ‘JobHandle’?
npm ERR!    82 |   template<typename T> v8::Local<T> AttrAs(v8::Handle<v8::Object> obj, std::string attr) {
npm ERR!       |                                                ^~~~~~
npm ERR!       |                                                JobHandle
npm ERR! ../src/common.h:82:65: error: expected primary-expression before ‘>’ token
npm ERR!    82 |   template<typename T> v8::Local<T> AttrAs(v8::Handle<v8::Object> obj, std::string attr) {
npm ERR!       |                                                                 ^
npm ERR! ../src/common.h:82:67: error: ‘obj’ was not declared in this scope
npm ERR!    82 |   template<typename T> v8::Local<T> AttrAs(v8::Handle<v8::Object> obj, std::string attr) {
npm ERR!       |                                                                   ^~~
npm ERR! ../src/common.h:82:84: error: expected primary-expression before ‘attr’
npm ERR!    82 |   template<typename T> v8::Local<T> AttrAs(v8::Handle<v8::Object> obj, std::string attr) {
npm ERR!       |                                                                                    ^~~~
npm ERR! ../src/common.h:82:37: warning: variable templates only available with ‘-std=c++14’ or ‘-std=gnu++14’
npm ERR!    82 |   template<typename T> v8::Local<T> AttrAs(v8::Handle<v8::Object> obj, std::string attr) {
npm ERR!       |                                     ^~~~~~
npm ERR! ../src/common.h:82:89: error: expected ‘;’ before ‘{’ token
npm ERR!    82 |   template<typename T> v8::Local<T> AttrAs(v8::Handle<v8::Object> obj, std::string attr) {
npm ERR!       |                                                                                         ^~
npm ERR!       |                                                                                         ;
npm ERR! ../src/common.h:85:37: error: ‘Handle’ is not a member of ‘v8’; did you mean ‘JobHandle’?
npm ERR!    85 |   template<typename T> T AttrTo(v8::Handle<v8::Object> obj, std::string attr) {
npm ERR!       |                                     ^~~~~~
npm ERR!       |                                     JobHandle
npm ERR! ../src/common.h:85:54: error: expected primary-expression before ‘>’ token
npm ERR!    85 |   template<typename T> T AttrTo(v8::Handle<v8::Object> obj, std::string attr) {
npm ERR!       |                                                      ^
npm ERR! ../src/common.h:85:56: error: ‘obj’ was not declared in this scope
npm ERR!    85 |   template<typename T> T AttrTo(v8::Handle<v8::Object> obj, std::string attr) {
npm ERR!       |                                                        ^~~
npm ERR! ../src/common.h:85:73: error: expected primary-expression before ‘attr’
npm ERR!    85 |   template<typename T> T AttrTo(v8::Handle<v8::Object> obj, std::string attr) {
npm ERR!       |                                                                         ^~~~
npm ERR! ../src/common.h:85:26: warning: variable templates only available with ‘-std=c++14’ or ‘-std=gnu++14’
npm ERR!    85 |   template<typename T> T AttrTo(v8::Handle<v8::Object> obj, std::string attr) {
npm ERR!       |                          ^~~~~~
npm ERR! ../src/common.h:85:78: error: expected ‘;’ before ‘{’ token
npm ERR!    85 |   template<typename T> T AttrTo(v8::Handle<v8::Object> obj, std::string attr) {
npm ERR!       |                                                                              ^~
npm ERR!       |                                                                              ;
npm ERR! ../src/common.h:88:37: error: ‘Handle’ is not a member of ‘v8’; did you mean ‘JobHandle’?
npm ERR!    88 |   template<typename T> T AttrTo(v8::Handle<v8::Object> obj, int attr) {
npm ERR!       |                                     ^~~~~~
npm ERR!       |                                     JobHandle
npm ERR! ../src/common.h:88:54: error: expected primary-expression before ‘>’ token
npm ERR!    88 |   template<typename T> T AttrTo(v8::Handle<v8::Object> obj, int attr) {
npm ERR!       |                                                      ^
npm ERR! ../src/common.h:88:56: error: ‘obj’ was not declared in this scope
npm ERR!    88 |   template<typename T> T AttrTo(v8::Handle<v8::Object> obj, int attr) {
npm ERR!       |                                                        ^~~
npm ERR! ../src/common.h:88:61: error: expected primary-expression before ‘int’
npm ERR!    88 |   template<typename T> T AttrTo(v8::Handle<v8::Object> obj, int attr) {
npm ERR!       |                                                             ^~~
npm ERR! ../src/common.h:85:26: warning: variable templates only available with ‘-std=c++14’ or ‘-std=gnu++14’
npm ERR!    85 |   template<typename T> T AttrTo(v8::Handle<v8::Object> obj, std::string attr) {
npm ERR!       |                          ^~~~~~
npm ERR! ../src/common.h:88:70: error: expected ‘;’ before ‘{’ token
npm ERR!    88 |   template<typename T> T AttrTo(v8::Handle<v8::Object> obj, int attr) {
npm ERR!       |                                                                      ^~
npm ERR!       |                                                                      ;
npm ERR! ../src/common.h:94:9: error: ‘Handle’ is not a member of ‘v8’; did you mean ‘JobHandle’?
npm ERR!    94 |     v8::Handle<v8::Object> input, std::vector<v8::Local<v8::Object>> &buffersToPersist);
npm ERR!       |         ^~~~~~
npm ERR!       |         JobHandle
npm ERR! ../src/common.h:94:26: error: expected primary-expression before ‘>’ token
npm ERR!    94 |     v8::Handle<v8::Object> input, std::vector<v8::Local<v8::Object>> &buffersToPersist);
npm ERR!       |                          ^
npm ERR! ../src/common.h:94:28: error: ‘input’ was not declared in this scope
npm ERR!    94 |     v8::Handle<v8::Object> input, std::vector<v8::Local<v8::Object>> &buffersToPersist);
npm ERR!       |                            ^~~~~
npm ERR! ../src/common.h:94:70: error: expected primary-expression before ‘&’ token
npm ERR!    94 |     v8::Handle<v8::Object> input, std::vector<v8::Local<v8::Object>> &buffersToPersist);
npm ERR!       |                                                                      ^
npm ERR! ../src/common.h:94:71: error: ‘buffersToPersist’ was not declared in this scope
npm ERR!    94 |     v8::Handle<v8::Object> input, std::vector<v8::Local<v8::Object>> &buffersToPersist);
npm ERR!       |                                                                       ^~~~~~~~~~~~~~~~
npm ERR! ../src/common.h:94:87: error: expression list treated as compound expression in initializer [-fpermissive]
npm ERR!    94 |     v8::Handle<v8::Object> input, std::vector<v8::Local<v8::Object>> &buffersToPersist);
npm ERR!       |                                                                                       ^
npm ERR! ../src/common.cc:34:8: error: redefinition of ‘bool sharp::HasAttr’
npm ERR!    34 |   bool HasAttr(v8::Handle<v8::Object> obj, std::string attr) {
npm ERR!       |        ^~~~~~~
npm ERR! In file included from ../src/common.cc:27:
npm ERR! ../src/common.h:80:8: note: ‘bool sharp::HasAttr’ previously defined here
npm ERR!    80 |   bool HasAttr(v8::Handle<v8::Object> obj, std::string attr);
npm ERR!       |        ^~~~~~~
npm ERR! ../src/common.cc:34:20: error: ‘Handle’ is not a member of ‘v8’; did you mean ‘JobHandle’?
npm ERR!    34 |   bool HasAttr(v8::Handle<v8::Object> obj, std::string attr) {
npm ERR!       |                    ^~~~~~
npm ERR!       |                    JobHandle
npm ERR! ../src/common.cc:34:37: error: expected primary-expression before ‘>’ token
npm ERR!    34 |   bool HasAttr(v8::Handle<v8::Object> obj, std::string attr) {
npm ERR!       |                                     ^
npm ERR! ../src/common.cc:34:39: error: ‘obj’ was not declared in this scope
npm ERR!    34 |   bool HasAttr(v8::Handle<v8::Object> obj, std::string attr) {
npm ERR!       |                                       ^~~
npm ERR! ../src/common.cc:34:56: error: expected primary-expression before ‘attr’
npm ERR!    34 |   bool HasAttr(v8::Handle<v8::Object> obj, std::string attr) {
npm ERR!       |                                                        ^~~~
npm ERR! ../src/common.cc:37:15: error: redefinition of ‘std::string sharp::AttrAsStr’
npm ERR!    37 |   std::string AttrAsStr(v8::Handle<v8::Object> obj, std::string attr) {
npm ERR!       |               ^~~~~~~~~
npm ERR! In file included from ../src/common.cc:27:
npm ERR! ../src/common.h:81:15: note: ‘std::string sharp::AttrAsStr’ previously declared here
npm ERR!    81 |   std::string AttrAsStr(v8::Handle<v8::Object> obj, std::string attr);
npm ERR!       |               ^~~~~~~~~
npm ERR! ../src/common.cc:37:29: error: ‘Handle’ is not a member of ‘v8’; did you mean ‘JobHandle’?
npm ERR!    37 |   std::string AttrAsStr(v8::Handle<v8::Object> obj, std::string attr) {
npm ERR!       |                             ^~~~~~
npm ERR!       |                             JobHandle
npm ERR! ../src/common.cc:37:46: error: expected primary-expression before ‘>’ token
npm ERR!    37 |   std::string AttrAsStr(v8::Handle<v8::Object> obj, std::string attr) {
npm ERR!       |                                              ^
npm ERR! ../src/common.cc:37:48: error: ‘obj’ was not declared in this scope
npm ERR!    37 |   std::string AttrAsStr(v8::Handle<v8::Object> obj, std::string attr) {
npm ERR!       |                                                ^~~
npm ERR! ../src/common.cc:37:65: error: expected primary-expression before ‘attr’
npm ERR!    37 |   std::string AttrAsStr(v8::Handle<v8::Object> obj, std::string attr) {
npm ERR!       |                                                                 ^~~~
npm ERR! ../src/common.cc:42:20: error: redefinition of ‘sharp::InputDescriptor* sharp::CreateInputDescriptor’
npm ERR!    42 |   InputDescriptor* CreateInputDescriptor(
npm ERR!       |                    ^~~~~~~~~~~~~~~~~~~~~
npm ERR! In file included from ../src/common.cc:27:
npm ERR! ../src/common.h:93:20: note: ‘sharp::InputDescriptor* sharp::CreateInputDescriptor’ previously defined here
npm ERR!    93 |   InputDescriptor* CreateInputDescriptor(
npm ERR!       |                    ^~~~~~~~~~~~~~~~~~~~~
npm ERR! ../src/common.cc:43:9: error: ‘Handle’ is not a member of ‘v8’; did you mean ‘JobHandle’?
npm ERR!    43 |     v8::Handle<v8::Object> input, std::vector<v8::Local<v8::Object>> &buffersToPersist
npm ERR!       |         ^~~~~~
npm ERR!       |         JobHandle
npm ERR! ../src/common.cc:43:26: error: expected primary-expression before ‘>’ token
npm ERR!    43 |     v8::Handle<v8::Object> input, std::vector<v8::Local<v8::Object>> &buffersToPersist
npm ERR!       |                          ^
npm ERR! ../src/common.cc:43:28: error: ‘input’ was not declared in this scope
npm ERR!    43 |     v8::Handle<v8::Object> input, std::vector<v8::Local<v8::Object>> &buffersToPersist
npm ERR!       |                            ^~~~~
npm ERR! ../src/common.cc:43:70: error: expected primary-expression before ‘&’ token
npm ERR!    43 |     v8::Handle<v8::Object> input, std::vector<v8::Local<v8::Object>> &buffersToPersist
npm ERR!       |                                                                      ^
npm ERR! ../src/common.cc:43:71: error: ‘buffersToPersist’ was not declared in this scope
npm ERR!    43 |     v8::Handle<v8::Object> input, std::vector<v8::Local<v8::Object>> &buffersToPersist
npm ERR!       |                                                                       ^~~~~~~~~~~~~~~~
npm ERR! make: *** [sharp.target.mk:138: Release/obj.target/sharp/src/common.o] Error 1
npm ERR! gyp ERR! build error 
npm ERR! gyp ERR! stack Error: `make` failed with exit code: 2
npm ERR! gyp ERR! stack     at ChildProcess.onExit (/home/username/.nvm/versions/node/v16.16.0/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:194:23)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:527:28)
npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12)
npm ERR! gyp ERR! System Linux 5.15.0-46-generic
npm ERR! gyp ERR! command "/home/username/.nvm/versions/node/v16.16.0/bin/node" "/home/username/.nvm/versions/node/v16.16.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
npm ERR! gyp ERR! cwd /home/project_name/node_modules/sharp
npm ERR! gyp ERR! node -v v16.16.0
npm ERR! gyp ERR! node-gyp -v v9.0.0
npm ERR! gyp ERR! not ok

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/username/.npm/_logs/2022-08-16T22_41_58_633Z-debug-0.log

As you can see we got a bunch of error about sharp that node-gyp (Node.js native addon build tool) has problem to builded it . but what is sharp ? sharp is a dependency for our dependency imagemin-webp-webpack-plugin. this module used of sharp to create and converted images.

you can read more about sharp here :

https://sharp.pixelplumbing.com/

but what about above error, and how we can fix it ? if inspect error lines we can find these lines :

npm ERR! In file included from /home/username/.cache/node-gyp/16.16.0/include/node/v8.h:30,
npm ERR!                  from /home/username/.cache/node-gyp/16.16.0/include/node/node.h:63,
npm ERR!                  from ../src/common.cc:22:
npm ERR! /home/username/.cache/node-gyp/16.16.0/include/node/v8-internal.h: In function ‘void v8::internal::PerformCastCheck(T*)’:
npm ERR! /home/username/.cache/node-gyp/16.16.0/include/node/v8-internal.h:492:38: error: ‘remove_cv_t’ is not a member of ‘std’; did you mean ‘remove_cv’?
npm ERR!   492 |             !std::is_same<Data, std::remove_cv_t<T>>::value>::Perform(data);
npm ERR!       |                                      ^~~~~~~~~~~
npm ERR!       |                                      remove_cv

these two line show us header location for node and v8 engine in node-gyp directories that installed as global :

/home/username/.cache/node-gyp/16.16.0/include/node/v8.h:30,
/home/username/.cache/node-gyp/16.16.0/include/node/node.h:63,

and this file (../src/common.cc) that call some properties and function from v8.h and node.h file from node-gyp directory.

in the following, we can see this error :

‘remove_cv_t’ is not a member of ‘std’; did you mean ‘remove_cv’?

this error indicates us. this version of v8.h and node.h file in node-gyp removed all members that the current sharp use of them. for example remove_cv_t called with sharp. but we can see we got error is not a member of ‘std’; did you mean remove_cvbecauseremove_cv_tnot longer exist and it replaced withremove_cvin newest version ofv8andnode`.

as we know sharp worked with older version of node-gyp. to skipe from these errors. we must install older version of node-gyp but since I don't like to get new error to build my project I start thougthed about node version that I used in last enviorment. prehaps, if I use a older version of node our problems will be fixed !!!

But There is a problem ? I don't remember what nodejs version that I installed in last environment. This is ridiculous :D. for this case nvm really helped me.

with nvm I installed multiple node version on my machine. and start to test and install node modules and after a few minuts later I found right version of node that could build and installed all version of the project dependency. version 10.0.0 of node resolved all problems.

Conclusion

If we knew, what version of node we used in the last enviorment not needed to spent a lot of time to sloved above problems. in package.json file we can specify node version that our stuff could work with it. we should add this options to help us to avoid any mistake :

 https://docs.npmjs.com/cli/v8/configuring-npm/package-json#engines

{
  "engines": {
    "node": ">=0.10.3 <15"
   }
 }

When we are using old packages. they can't work with new version of the node and usually during install them we got a bunch of error. to avoid this problems you should knew that old package worked with old version of the node. Note : in rare case sometimes some package worked with newest node.
If we want use newest version of packages inside a old codebase. we should create own new version of webpack config file that used newest packages. then we need to updating package.json file and include new scripts item for newest configuration file.
Old packages are deprecated and don't supported. this is reason that we should be avoid of them and don't use them in production. because they could make seriously security problems. to avoid these problems it is good to use lastes version of dependencies in our project.

vheidari/nodejs-dependencies-war.md

Dependency in Development could make you crazy we have a little story about that

Frontend Dependency problems

Conclusion