I'm trying to deploy a MERN app to Heroku but I'm running into a rather bizarre issue. I'm getting a 'Cannot find file './layout/NavBar' in './src/components' error message which occurs in the ./src/components/App.js file, leading to the build process failing. The file is obviously present, otherwise I would have noticed during development. In fact, manually doing the (React) build works just fine on my local machine, hence the strange nature of my issue. For reference, I'm working with a create-react-app bootstrapped frontend and an Express backend, so it should be a pretty straightforward process. Also, I've used an almost similar setup for another app and it worked just fine.
Not sure if a screenshot of the failed deploy is relevant, but below is a linked image.
Also, here are the code snippets corresponding to the App.js and NavBar files. Again, not sure how they'd be relevant and/or useful.
App file
// 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 file
// 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;
The scripts in the package.json file, in the root directory which build the backend as well as the client build when deploying. I have no issues here as, again, I have used the same setup for another app, which works just fine.
"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"
}
And finally, the (Express) server setup (App and Server files).
App file
// 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 file
// 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}`);
});
