React.lazy returning 404 error when attempting to lazy load components

I'm attempting to convert my React application to lazy load components dynamically to increase the Lighthouse performance score and have been following the React Code Splitting Documentation in order to do so.

Following the documentation, I attempted to switch how components were loaded in the App.js file as shown below:

//Before
import Component from './components/examples/Component';

//After
const Component = lazy(() => import('./components/examples/Component'));

However, when I do this the routes in App.js with Component fail to load as the site gets a 404 error when the server tries to grab http://localhost:3000/App.js . Do I need to add a route to my server to return each component I want to lazy load? There's nothing on the docs about this...

Looking for why this is happening, not a way to redo my App.js routes.

from React.lazy returning 404 error when attempting to lazy load components