javascript - 为什么我在 MERN 部署到 Heroku 期间错误地收到丢失文件错误？

Question

我正在尝试将 MERN 应用程序部署到 Heroku，但我遇到了一个相当奇怪的问题。我在 ./src/components/App.js< 中收到 'Cannot find file './layout/NavBar' in './src/components' 错误消息 文件，导致构建过程失败。该文件显然存在，否则我会在开发过程中注意到。事实上，手动执行 (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 时，它不会自动将文件名更新为大写/小写，您需要手动执行:Changing capitalization of filenames in Git

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