为什么在将 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"
}

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

应用文件

// 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 源上是 Admin.js 而我更改为 admin .js 本地），所以问题是当您将代码推送到 git 时，它不会自动将文件名更新为大写/小写，您需要手动执行：在 Git 中更改文件名的大写

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