尝试将MERN应用部署到Now（zeit.co）时出现“ sh：react-scripts：命令未找到”错误

时间：2020-01-04 21:21:51

标签： node.js reactjs mern react-scripts vercel

我正在尝试将MERN应用程序部署到Now（zeit.co），但没有成功。当Now尝试在部署期间进行构建时，它会显示“ sh：react-scripts：未找到命令”错误并记录以下内容：

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

我的应用程序的体系结构是：

app architecture

我使用n npx create-react-app client --use-npm创建了应用程序，并使用{ (...) "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" }, (...) } } 创建了React客户端，所以我不认为它是yarn和npm之间的冲突。

我的服务器 package.json 是：

{
  "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"
    ]
  }
}

我的 client / package.json 是create-react-app的默认设置：

npm install

只是为了确保，我尝试在我的 client 文件夹中运行# 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* ，但是并没有做什么。我检查了我的package-lock.json，并且可以肯定的是，react-scripts在那里，所以我希望当Now试图从github仓库中构建时，它也应该显示出来，对吗？我还查看了 client / .gitignore ，但这只是create-react-app的默认文件：

    (function () {
        'use strict';
        let slides = 
        [
        'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg',
        'https://www.presse-citron.net/wordpress_prod/wp-content/uploads/2018/11/meilleure-banque-image.jpg',
        'https://image.shutterstock.com/image-photo/bright-spring-view-cameo-island-260nw-1048185397.jpg',
        'https://www.lamodeenimages.com/sites/default/files-lmi/styles/1365x768/public/images/article/homepage/full/balenciaga-defile-pret-a-porter-femme-ete-printemps-2019-la-mode-en-images-cover3.jpg?itok=I41_VWrm',
        'https://images.charentelibre.fr/2019/09/04/5d7016527971bb79570d2e7b/default/1000/80-hectares-de-pins-sont.jpg'
        ],

            currentSlide = 0,
            doc = document,
            elSlide = doc.getElementById('slide'),
            elPrev = doc.getElementById('prev-slide'),
            elNext = doc.getElementById('next-slide'),

            showSlide = function (index) {
                if (index > -1 && index < slides.length) {
                    currentSlide = index;
                    elPrev.classList.remove('disabled');
                    elNext.classList.remove('disabled');
                    if (index === 0) {
                        elPrev.classList.add('disabled');
                    } else if (index === slides.length - 1) {
                        elNext.classList.add('disabled');
                    }
                    elSlide.src = slides[index];
                    elSlide.title = 'Picture ' + (index + 1) + ' of ' + slides.length;
                }
            },
            changeSlide = function (step) {
                let index = currentSlide + step;
                showSlide(index);
            },
            prevSlide = changeSlide.bind(null, -1),
            nextSlide = changeSlide.bind(null, 1);

        elPrev.addEventListener('click', prevSlide, false);
        elNext.addEventListener('click', nextSlide, false);

        showSlide(0);
    }());

我服务器的 .gitignore 文件也没有任何可能导致此问题的文件，它只是忽略了node_modules和.env。

如果有更多部署MERN应用程序经验的人可以帮助我，我将非常感谢。

1 个答案:

答案 0 :(得分：0)

如果有人遇到同样的麻烦，我就有了见识。一个简单的解决方案是将服务器的 package.json 构建脚本更改为：

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

引起问题的原因是Now（zeit.co）正在建立服务器的依赖关系，该服务器位于app文件夹的根目录，但没有建立客户端文件夹的依赖关系。

它将运行位于 root / package.json 上的脚本"build": "npm run build --prefix client"。这会将其重定向为运行 root / client / package.json 脚本，即它将尝试运行脚本"build": "react-scripts build"并折叠，因为找不到响应脚本。

进行上述更改，现在它会先安装客户端依赖项，然后再尝试运行"build": "react-scripts build"

相关问题
最新问题