尝试将 MERN 应用程序部署到 Now (zeit.co) 时出现“sh: react-scripts: command not found”错误

Question

I am trying to deploy a MERN app to Now(zeit.co) with no success. When Now tries to build during deployment, it gets a 'sh: react-scripts: command not found' error and logs the following:

Downloading 56 deployment files...
Installing build runtime...
Build runtime installed: 422.936ms
Looking up build cache...
Installing dependencies...
> nodemon@2.0.2 postinstall /zeit/3a1e3f7b/node_modules/nodemon
> node bin/postinstall || exit 0
Love nodemon? You can now support the project via the open collective:
 > https://opencollective.com/nodemon/donate
npm WARN debts-app-api@1.0.0 No description
npm WARN debts-app-api@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.2 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

added 188 packages from 92 contributors in 2.415s
Running "npm run build"
> debts-app-api@1.0.0 build /zeit/3a1e3f7b
> npm run build --prefix client
> client@0.1.0 build /zeit/3a1e3f7b/client
> react-scripts build
sh: react-scripts: command not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! client@0.1.0 build: `react-scripts build`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the client@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?
npm ERR! A complete log of this run can be found in:
npm ERR!     /zeit/.npm/_logs/2020-01-04T20_32_03_150Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! debts-app-api@1.0.0 build: `npm run build --prefix client`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the debts-app-api@1.0.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!     /zeit/.npm/_logs/2020-01-04T20_32_03_163Z-debug.log
Error: Exited with 1
    at ChildProcess.child.on (/zeit/69d347bcc38c1970/.build-utils/.builder/node_modules/@now/static-build/dist/index.js:32747:24)
    at emitTwo (events.js:126:13)
    at ChildProcess.emit (events.js:214:7)
    at maybeClose (internal/child_process.js:925:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
worker exited with code 20 and signal null
done

My app's architecture is:

I created the app with npm, using npx create-react-app client --use-npm to create the React client, so I don't believe it to be a conflict between yarn and npm.

My server package.json is:

{
  (...)
  "scripts": {
    "start": "node index.js",
    "server": "nodemon index.js",
    "client": "npm run start --prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client\"",
    "build": "npm run build --prefix client"
  },
  (...)
  }
}

My client/package.json is the default for create-react-app:

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-scripts": "3.3.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Just to make sure, I tried running npm install on my client folder, but it didn't do much. I checked my package-lock.json and, sure thing, react-scripts is there, so I expect it should also show up when Now tries to build from the github repo, right? I also took a look on my client/.gitignore , but it is just the default file for create-react-app:

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*

My server's .gitignore file also has nothing that could be causing the problem, it's only ignoring node_modules and .env.

If anybody with more experience deploying MERN apps could help me, I would be very grateful.

Answer 1

If anyone is having the same trouble, I had an insight. A simple solution was to change the server's package.json build script to:

"build": "npm install --prefix client && npm run build --prefix client"

What was causing the problem is that Now(zeit.co) was building the dependencies for the server, which was at the root of the app folder, but wasn't building dependencies for the client folder.

It would run the script "build": "npm run build --prefix client" , found on root/package.json . That redirects it to run the root/client/package.json scripts, ie it would try to run the script "build": "react-scripts build" and collapse because it couldn't find react-scripts.

Making the aforementioned change, it now installs the client dependencies before trying to run "build": "react-scripts build"