i'm trying to upload my create-react-app site to Cloudflare Pages, and everything's been going great, However, when I add this line: import NotFoundPage from "pages/NotFound.js";
of code to my App.js, it throws a rather odd error:
22:57:43.995 Failed to compile.
22:57:43.996
22:57:43.996 ./src/App.js
22:57:43.996 Cannot find module: 'pages/NotFound.js'. Make sure this package is installed.
22:57:43.996
22:57:43.996 You can install this package by running: npm install pages/NotFound.js.
What makes this even more confusing, is the code right above it works completely fine:
import PrivacyPolicyPage from "pages/PrivacyPolicy.js";
import TermsOfUsePage from "pages/TermsOfUse.js";
import NotFoundPage from "pages/NotFound.js";
Is anyone aware of why this is happening, and most importantly, why the app is building on my home environment (Windows 11) and not Cloudflare Pages?
The code of NotFound.js
:
import React, { useState } from 'react';
import { Helmet } from 'react-helmet';
import ScrollToTop from 'components/ScrollToTop';
import NotFound from 'components/NotFound';
import Sidebar from 'components/Sidebar';
import Navbar from 'components/Navbar';
import Footer from 'components/Footer';
function NotFoundPage() {
const [isOpen, setIsOpen] = useState(false);
const toggle = () => {
setIsOpen(!isOpen);
};
return (
<>
<Helmet>
<link rel="stylesheet" href="/css/notfound.css" />
</Helmet>
<ScrollToTop />
<Sidebar isOpen={isOpen} toggle={toggle} />
<Navbar noFade toggle={toggle} />
<NotFound />
<Footer sticky />
</>
);
}
export default NotFoundPage;
And App.js
:
import React from "react";
import "App.css";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Home from "pages";
import PrivacyPolicyPage from "pages/PrivacyPolicy.js";
import TermsOfUsePage from "pages/TermsOfUse.js";
import NotFoundPage from "pages/NotFound.js";
function App() {
return (
<Router>
<Switch>
<Route path="/" component={Home} exact />
<Route path="/privacy-policy" component={PrivacyPolicyPage} exact />
<Route path="/terms-of-use" component={TermsOfUsePage} exact />
<Route component={NotFoundPage} />
</Switch>
</Router>
);
}
export default App;
NOTE: I have tried it with ./
at the start of the import string, tried adding {}
around the import object, and neither of those work either, throwing the same error. npm build with Browserify - Error: Cannot find module did not help.
Thank you to anyone who can help.
I managed to fix the issue by (and I know how odd this sounds) renaming the pages
directory to page
. My guess is that Cloudflare is doing some weird stuff with that, but I can't really be sure.