webpack 5 - Parsed request is a module

Question

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);

Aerodynamics

Any reason you are not using const faker = require('faker');, instead of import faker from "faker";? – Radu

no reason I'm just imported as usual. But const faker = require('faker'); also gave the same error @NalinRanjan – Aerodynamics

Interesting... The faker package doesn't have anything in it... – Radu

try the answer please. Something seems not ok with latest package of faker. Or may be the way to use it would have changed. – Radu

Not sure how much of this is true, but now the way out for you is to stick to a lower version of the library, or look for some other library. – Radu

Yes @NalinRanjan it's issue from faker npm. I missed to check with some random model. Thank for the update – Aerodynamics

did you fix this problem? I am facing the same problem with you. #70903395 @GowthamGanapathi – Bloodmobile

Answer 1

Try with following package.json...

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

Do a fresh install and run npm start...

Radu

Issue is with the faker module. Nothing wrong with webpack5 :) Thankyou @Nalin – Aerodynamics