react-scripts issues with npm run build

Question

We are facing these errors on running the command npm run build (to build the frontend of the project) on production setup (errors reported by DevOps team, not sure if they tried this after removing dependency react-scripts. Package.json copied below) -

> mvc-panel@0.1.0 build /usr/local/mvc/releases/2017-10-23-17:00/mvc_build/panel/mvc-panel
> react-scripts build

sh: react-scripts: command not found

npm ERR! Linux 3.10.0-327.36.3.el7.x86_64
npm ERR! argv "/root/.nvm/versions/node/v7.2.1/bin/node" "/root/.nvm/versions/node/v7.2.1/bin/npm" "run" "build"
npm ERR! node v7.2.1
npm ERR! npm  v3.10.10
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! mvc-panel@0.1.0 build: `react-scripts build`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the mvc-panel@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 mvc-panel 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 mvc-panel
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls mvc-panel
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /usr/local/mvc/releases/2017-10-23-17:00/mvc_build/panel/mvc-panel/npm-debug.log

and after installing react-scripts , we are facing these errors

/root/.nvm/versions/node/v7.2.1/bin/react-scripts -> /root/.nvm/versions/node/v7.2.1/lib/node_modules/react-scripts/bin/react-scripts.js

> uglifyjs-webpack-plugin@0.4.6 postinstall /root/.nvm/versions/node/v7.2.1/lib/node_modules/react-scripts/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js

module.js:472
    throw err;
    ^

Error: Cannot find module '/root/.nvm/versions/node/v7.2.1/lib/node_modules/react-scripts/node_modules/uglifyjs-webpack-plugin/lib/post_install.js'
    at Function.Module._resolveFilename (module.js:470:15)
    at Function.Module._load (module.js:418:25)
    at Module.runMain (module.js:605:10)
    at run (bootstrap_node.js:427:7)
    at startup (bootstrap_node.js:151:9)
    at bootstrap_node.js:542:3
/root/.nvm/versions/node/v7.2.1/lib
└── (empty)

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.2 (node_modules/react-scripts/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules/react-scripts/node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm ERR! Linux 3.10.0-327.36.3.el7.x86_64
npm ERR! argv "/root/.nvm/versions/node/v7.2.1/bin/node" "/root/.nvm/versions/node/v7.2.1/bin/npm" "install" "-g" "react-scripts"
npm ERR! node v7.2.1
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE

npm ERR! uglifyjs-webpack-plugin@0.4.6 postinstall: `node lib/post_install.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the uglifyjs-webpack-plugin@0.4.6 postinstall script 'node lib/post_install.js'.
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 uglifyjs-webpack-plugin package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node lib/post_install.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs uglifyjs-webpack-plugin
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls uglifyjs-webpack-plugin
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /usr/local/mvc/releases/2017-10-23-17:00/mvc_build/panel/mvc-panel/node_modules/npm-debug.log
npm ERR! code 1

Following is the package.json file -

{
  "name": "mvc-panel",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "bootstrap": "^3.3.7",
    "jquery": "^3.2.1",
    "material-ui": "^0.18.3",
    "qs": "^6.4.0",
    "react": "^15.5.4",
    "react-alert": "^2.1.2",
    "react-bootstrap-table": "^3.4.1",
    "react-dom": "^15.5.4",
    "react-loader": "^2.4.2",
    "react-router-dom": "^4.1.1",
    "react-tap-event-plugin": "^2.0.1",
    "serve": "^6.0.0"
  },
  "devDependencies": {
    "datatables.net": "^1.10.15",
    "jquery": "^3.2.1",
    "react-scripts": "1.0.7"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Previously, we had got the following while trying to build on our staging server -

> mvc-panel@0.1.0 build D:\Sandeepan\Payu MVC\backend codebase\MVC2.0\panel\mvc-
panel
> react-scripts build

Creating an optimized production build...
Failed to compile.

Module not found: Error: Can't resolve './../common/panelConfig.js' in 'D:\Sande
epan\Payu MVC\backend codebase\MVC2.0\panel\mvc-panel\src\components'


npm ERR! Windows_NT 6.1.7601
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.11.2
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! mvc-panel@0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the mvc-panel@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 mvc-panel 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 mvc-panel
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls mvc-panel
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     D:\Sandeepan\Payu MVC\backend codebase\MVC2.0\panel\mvc-panel\npm-d
ebug.log

It seems they had been getting away with this by doing a rm -rf reacts-scripts but I could not verify the same. I tried by removing the entire node_modules directory and running the following commands -

npm install 
npm install -g serve 
npm run build

But still getting the same error.

I looked for './../common/panelConfig.js' in the codebase and found many files in components directory including files like this -

var panelConfig = require('./../common/panelConfig.js');

If I change this to (just hit and trial) -

var panelConfig = require(__dirname+'/../common/panelConfig.js');

I still get the following error on build -

Module not found: Error: Can't resolve 'D:\Sandeepan\Payu MVC\backend codebase\M
VC2.0\panel\mvc-panel\src\components/../common/panelConfig.js' in 'D:\Sandeepan\
Payu MVC\backend codebase\MVC2.0\panel\mvc-panel\src\components'

Could someone give some pointers please.

Answer 1

First of all there are two different problems here, it is better to separate them out.

For your first question, Error: Cannot find module means the package is missing or its not properly installed. Most of the cases it would get solved once you remove your node_modules and do a fresh install.

Regarding this error uglifyjs-webpack-plugin/lib/post_install.js , I see that the react-scripts package is fixed to 1.0.7 version. I tried it out with latest version 1.0.14 and it worked just fine for me. Update your package.json with a ^ before the version to auto install the latest releases

"react-scripts": "^1.0.7"

Another approach, a temporary solution I once got it fixed by installing the beta version of that package. you can try it out with the following command.

npm i -D uglifyjs-webpack-plugin@beta

Coming to your second problem,

The slash '/' varies with the operating system you use, for example Windows uses backward slash '\\' whereas the rest of the OS' follows forward slash '/' and that causes your reference error.

var panelConfig = require('./../common/panelConfig.js'); this seems fine. Are you sure that the panelConfig.js file exist in the mentioned path? If not kindly pass the appropriate path to require . Hope this will fix your reference issue.