webpack 5 - Parsed request is a module

I'm creating webpack5 setup for an small app and while doing I'm facing the below mentioned issue. Please suggest the way to resolve

Issue Snapshot

Module not found: Error: Can't resolve 'faker' in 'C:\Gowtham\micro-frontend-training\products\src'      
resolve 'faker' in 'C:\Gowtham\micro-frontend-training\products\src'
  Parsed request is a module
  using description file: C:\Gowtham\micro-frontend-training\products\package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      C:\Gowtham\micro-frontend-training\products\src\node_modules doesn't exist or is not a directory
      looking for modules in C:\Gowtham\micro-frontend-training\products\node_modules
        single file module
          using description file: C:\Gowtham\micro-frontend-training\products\package.json (relative path: ./node_modules/faker)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              C:\Gowtham\micro-frontend-training\products\node_modules\faker is not a file
            .js

Folder Structure folder structure

webpack.config.js

module.exports = {
  mode: "development",
};

package.json

{
  "name": "products",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "faker": "^6.6.6",
    "webpack": "^5.67.0",
    "webpack-cli": "^4.9.2"
  }
}

src/index.js

import faker from "faker";

let products = "";

for (let i = 0; i < 3; i++) {
  const name = faker.commerce.productName();
  products += `<div>${name}</div>`;
}

console.log(products);