8

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);
Gowtham Ganapathi
  • 91
  • 1
  • 1
  • 4
  • Any reason you are not using `const faker = require('faker');`, instead of `import faker from "faker";`? – Nalin Ranjan Jan 28 '22 at 07:41
  • no reason I'm just imported as usual. But const faker = require('faker'); also gave the same error @NalinRanjan – Gowtham Ganapathi Jan 28 '22 at 13:41
  • Interesting... The `faker` package doesn't have anything in it... – Nalin Ranjan Jan 28 '22 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 Jan 28 '22 at 17:09
  • Not sure how much of [this](https://www.theverge.com/2022/1/9/22874949/developer-corrupts-open-source-libraries-projects-affected) 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 Jan 28 '22 at 17:13
  • Yes @NalinRanjan it's issue from faker npm. I missed to check with some random model. Thank for the update – Gowtham Ganapathi Jan 29 '22 at 17:16
  • did you fix this problem? I am facing the same problem with you. https://stackoverflow.com/questions/70902895/field-browser-doesnt-contain-a-valid-alias-configuration-when-i-changed-the-i @GowthamGanapathi – Dolphin Jan 30 '22 at 13:18

1 Answers1

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

Nalin Ranjan
  • 1,728
  • 2
  • 9
  • 10