Uncaught Error: Cannot find module './components/Test' at webpackMissingModule "

Morning all

I am currently working on a project.

I am using webpack.

Currently receiving this error.

"Uncaught Error: Cannot find module './components/Test'     at webpackMissingModule "

Usually the error when the component has not been imported? But is it imported?

Am i making a very basic webpack error here? Perhaps something else?

My App.js is:

import React from "react";
import Test from './components/Test'

function App() {
  return (
    <>
      <Test />
    </>
  )
}

export default App

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
//import { Provider } from 'react-redux'
import { BrowserRouter, Routes, Route } from "react-router-dom";
import App from './App';
//import { store } from './Redux/store';

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <Routes>
        <Route path="/" element={ <App /> }>
        </Route>
      </Routes>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");

module.exports = {
  entry: "./src/index.js",
  mode: "development",
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "bundle.js",
  },
  devServer: {
    port: 9000
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "src/index.html",
    }),
    new webpack.HotModuleReplacementPlugin(),
  ],
  devtool: "eval-source-map",
};