为啥我在将 MERN 部署到 Heroku 期间错误地收到文件丢失错误？

Posted 2023-03-07

【中文标题】为啥我在将 MERN 部署到 Heroku 期间错误地收到文件丢失错误？

【英文标题】：Why am I wrongfully getting a missing file error during a MERN deploy to Heroku?为什么我在将 MERN 部署到 Heroku 期间错误地收到文件丢失错误？

【发布时间】：2019-03-10 04:44:36

【问题描述】：

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

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

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

应用文件

// 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"  />
        </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`);
);

【参考方案1】：

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

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

【讨论】：

很抱歉反馈太迟了，编码有点休息。不过，它奏效了。感谢您的帮助！