为什么在将MERN部署到Heroku的过程中错误地丢失文件错误？

Question

我试图将MERN应用程序部署到Heroku，但是遇到了一个非常奇怪的问题。我收到'Cannot find file './layout/NavBar' in './src/components'文件中出现的./src/components/App.js错误消息，导致构建过程失败。该文件显然存在，否则在开发过程中我会注意到。实际上，手动执行（React）构建在我的本地计算机上工作正常，因此，我的问题很奇怪。作为参考，我正在使用create-react-app自举前端和Express后端，因此它应该是一个非常简单的过程。另外，我为另一个应用程序使用了几乎类似的设置，并且效果很好。

不确定部署失败的屏幕截图是否相关，但下面是链接的图像。

此外，这是与App.js和NavBar文件相对应的代码段。同样，不确定它们如何相关和/或有用。

应用文件

// App.js
import React, { Fragment } from 'react';

import NavBar from './layout/NavBar';
import Main from './layout/Main';

function App() {
  const token = localStorage.getItem('token');

  return (
    <Fragment>
      {token && <NavBar />}
      <Main />
    </Fragment>
  );
}

export default App;

导航栏文件

// NavBar.js
import React, { Component } from 'react';
import { Link, NavLink } from 'react-router-dom';

import Button from '../shared/Button';

class Navbar extends Component {
  //...

  render() {
    const { isLoggedIn } = this.state;

    return (
      <nav className="navbar navbar-expand-lg navbar-light">
        <Link className="navbar-brand" to="/">
          <img src="/images/K5gCLXM.png" alt="Quora Logo" />
        </Link>
        <button
          className="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation">
          <span className="navbar-toggler-icon" />
        </button>

        <div className="collapse navbar-collapse row">
          {
            //...
          }
        </div>
      </nav>
    );
  }
}

export default Navbar;

package.json文件中根目录中的脚本，这些脚本在部署时将构建后端以及客户端。我在这里没有问题，因为我再次对另一个应用程序使用了相同的设置，效果很好。

"scripts": {
  //...
  "client": "cd client && yarn start",
  "prebuild": "rm -rf server/dist",
  "build-babel": "babel -d ./server/dist ./server/src -s",
  "build": "yarn build-babel",
  "heroku-postbuild": "YARN_PRODUCTION=false cd client && yarn && yarn build"
}

最后，（快捷）服务器设置（应用程序和服务器文件）。

应用文件

// server/src/app.js 
import express from 'express';
//...
import path from 'path';

//...

// Middlewares
app.use(express.static(path.join(__dirname, '../frontend/build')));
//...

// Serve static assets if in production
if (process.env.NODE_ENV === 'production') {
  app.use(express.static('../../client/build'));

  app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, '../../client', 'build', 'index.html'));
  });
}

//...

export default app;

服务器文件

// server/src/server.js
import http from 'http';

import app from './app';
import config from './config';

const { port } = config;

http.createServer(app).listen(port, () => {
  console.log(`Server running at ${port}`);
});

Answer 1

代码看起来不错。 我遇到了同样的问题，最后浪费了几个小时，我发现如果我在本地将文件名从大写更改为小写，反之亦然（例如，如果我的文件名是git source上的Admin.js，而我又更改为admin .js本地），因此问题在于，当您将代码推送到git时，它不会自动将文件名更新为大写/小写，您需要手动进行操作：Changing capitalization of filenames in Git

更改文件名后，部署效果很好。