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 = fakermerce.productName();
  products += `<div>${name}</div>`;
}

console.log(products);

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.merce.productName();
  products += `<div>${name}</div>`;
}

console.log(products);

• javascript
• node.js
• reactjs
• webpack
• webpack-5

Share Improve this question Follow asked Jan 28, 2022 at 7:15 Gowtham GanapathiGowtham Ganapathi 17111 gold badge11 silver badge55 bronze badges 7

• Any reason you are not using const faker = require('faker');, instead of import faker from "faker";? – Nalin Ranjan Commented Jan 28, 2022 at 7:41
• no reason I'm just imported as usual. But const faker = require('faker'); also gave the same error @NalinRanjan – Gowtham Ganapathi Commented Jan 28, 2022 at 13:41
• Interesting... The faker package doesn't have anything in it... – Nalin Ranjan Commented Jan 28, 2022 at 17:00
• try the answer please. Something seems not ok with latest package of faker. Or may be the way to use it would have changed. – Nalin Ranjan Commented Jan 28, 2022 at 17:09
• 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. – Nalin Ranjan Commented Jan 28, 2022 at 17:13

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 0

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...