I have encountered an issue while trying to create a blog post page on my NextJS website. The page displays correctly on my local machine, but when I deploy it to production, I am facing the following error and I am unsure of how to resolve it: Here is the error:
ModuleNotFoundError: Module not found: Error: Can't resolve '../../public/images/posts/our-new-home/shelly-crying.jpg' in '/vercel/path0/pages/posts'
17:10:01.443 > Build error occurred
17:10:01.443 Error: > Build failed because of webpack errors
17:10:01.444 at /vercel/path0/node_modules/next/dist/build/index.js:17:924
17:10:01.444 at runMicrotasks (<anonymous>)
17:10:01.444 at processTicksAndRejections (internal/process/task_queues.js:95:5)
17:10:01.444 at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/telemetry/trace/trace.js:6:584)
17:10:01.459 Error: Command "npm run build" exited with 1
Below is the structure of my project: https://i.stack.imgur.com/lSeGQ.png
Also included is the content of my post our-new-home.tsx:
import React, { ReactElement } from "react";
import ShellyCrying from "../../public/images/posts/our-new-home/shelly-crying.jpg";
import NewTruck from "../../public/images/posts/our-new-home/new-truck.jpg";
import TrailerSold from "../../public/images/posts/our-new-home/trailer-sold.jpg";
import MessyLivingRoom from "../../public/images/posts/our-new-home/messy-living-room.jpg";
import MovingDay from "../../public/images/posts/our-new-home/snow-moving.jpg";
import LumpySleeping from "../../public/images/posts/our-new-home/lumpy-sleeping.jpg";
import CatalinaComforter from "../../public/images/posts/our-new-home/catalina-comforter.jpg";
import ShellyLumpy from "../../public/images/posts/our-new-home/shelly-lumpy.jpg";
export default function ourNewHome(): ReactElement {
return (
<div className="mx-auto max-w-2xl p-4 md:p-0">
<title>Our New Home</title>
<article>
<h1 className="text-5xl mb-4">Our New Home</h1>
<p className="my-4">
We are excited to share our next adventure! We both work remotely now,
so we decided to take this opportunity to not be confined to a one
bedroom, one bathroom insanely expensive apartment anymore. This was
our chance to do something a bit non-traditional and we dove head
first into researching how to make this happen before our lease was up
in mid-April.
</p>
<h2 className="text-2xl font-semibold">Step 1: The Essentials</h2>
<p className="my-4">
We quickly realized that we needed to decide what was essential to us
in a home on wheels. We also had to decide what was better for us –
something we could tow or something we could drive. These things were
fairly easy to hash out. With my upbringing from an aeronautical
engineer and bookkeeper and being married to a petroleum
engineer/chemist, we did the only thing one can do – make a million
Excel spread sheets! We are happily married and would like to continue
to be for many years to come, so we decided we needed to have enough
space to not be on top of each other. Other necessities - a bed that
didn’t need to be folded up every day in order to have room to walk
around, a bathroom with a door (some things need to be kept private,
am I right!), work space, storage, a spot for a litter box, and a
fully functioning kitchen. Bryan is a great cook and we wanted to be
able to maintain our lifestyle of cooking most of our meals, having
room to meal prep, and having a fridge that could hold a week’s worth
of food. As for what led us to end up purchasing a travel trailer,
there were a few things. One – price. We weren’t looking to spend
hundreds of thousands of dollars on an RV, especially since we didn’t
know if this lifestyle was going to be sustainable for us. Two –
practicality of getting around. We knew that with our lifestyle it
would be easier to drop our trailer and then explore, without worrying
about where to park a 40+ foot recreational vehicle. Three – previous
experiences. Bryan’s dad, Steve, had many RVs and there always seemed
to be something wrong with the engine. We didn’t want to risk having
the engine die and be in the shop for months. An RV in the shop isn’t
that bad when you don’t live it in full time, but when it is your
home, that would really put a damper on things. Given the popularity
of traveling since COVID, it has become increasingly difficult to get
parts and service. So maybe we were jaded, because of Steve, but we
like to think that he was proud of us for learning from his life
lessons.
</p>
... (content continues)
</article>
</div>
);
}