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);
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...
Related
My main code. I has "require('node-rsa')" which in node_modules folder. Is it possible to create one file from this code?
a.js
var testFunct = function test(message) {
const NodeRSA = require('node-rsa');
const key = new NodeRSA();
var k = key.generateKeyPair();
var p = k.exportKey('pkcs1');
return p};
console.log(testFunct())
package.json
{
"name": "pol",
"version": "1.0.0",
"description": "",
"main": "a.js",
"dependencies": {
"node-rsa": "^1.1.1",
"build": "webpack a.js b.js"
},
"devDependencies": {
"webpack": "^5.58.2"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
webpack.config.js
module.exports = {
entry: ['a.js'],
output: {
path: './build',
filename: 'bundle.js'
}
}
Add this entry to the scripts section of your package.json:
"build": "webpack"
This will trigger webpack, when you run the build action.
I am trying to run mockingoose example
> alonjest#1.0.0 test /home/milenko/pract/alonjest
> jest __tests__
FAIL .history/__tests__/user.test_20201028132815.js
● Test suite failed to run
Details:
/home/milenko/pract/alonjest/.history/__tests__/user.test_20201028132815.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import mockingoose from 'mockingoose';
Package.json
"name": "alonjest",
"version": "1.0.0",
"description": "",
"main": "user.js",
"type": "module",
"scripts": {
"test": "jest __tests__"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"mongoose": "^5.10.11"
},
"devDependencies": {
"jest": "^26.6.1",
"mockingoose": "^2.13.2"
}
}
Dir structure
node_modules
package.json
package-lock.json
__tests__
user.mjs
What is wrong with my configuration?
I am trying to run the ESLint JSDoc plugin
When I run npx eslint . airbnb rules are enforced but not the jsdoc ones requiring to add JSDoc.
Am I missing something ?
Here is a test repo
package.json
{
"name": "eslint-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"eslint": "^6.7.2",
"eslint-config-airbnb-base": "^14.0.0",
"eslint-plugin-import": "^2.19.1",
"eslint-plugin-jsdoc": "^18.4.3"
}
}
index.js
const fn = (a) => {
console.log('a :', a);
return a;
};
module.exports = { fn };
You are missing the ESLint configuration file. Add .eslintrc.js to the root of your project. Then copy the following basic configuration:
module.exports = {
root: true,
plugins: ['jsdoc', 'import'],
extends: [
'eslint:recommended',
'plugin:jsdoc/recommended',
'plugin:import/errors',
'plugin:import/warnings',
'airbnb-base'
]
}
See Configuring ESLinf for more informaion.
I'm new to coding and I'm trying to do what the lecturer is doing. We're looking at webpacks but everytime I try to use the command "npx webpack" it comes up with
/home/ubuntu/workspace/assignment1/hellowp/webpack.config.json: Unexpected token m in JSON at position 0"
How do I fix this?
module.exports = {
entry: './src/app.js',
output: {
filename: 'app.bundle.js',
path: __dirname + '/dist'
}
};
package.json:
{
"name": "hellowp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.10.1",
"webpack-cli": "^2.1.4"
},
"dependencies": {
"jquery": "^3.3.1"
}
}
app.js
import $ from "jquery";
$(document).ready(function(){
$('#intro').html("Hello Webpack");
})
<div id = 'intro'></p>
<script src='./dist/app.bundle.js'></script>
//whats in my html
Change filename to webpack.config.js (not .json)
package.json
{
"name": "learningmocha",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "mocha && mocha test --require blanket --reporter html-cov > coverage.html"
},
"author": "",
"license": "ISC",
"devDependencies": {
"blanket": "^1.2.3",
"chai": "^3.5.0",
"mocha": "^3.2.0"
},
"config": {
"blanket": {
"pattern": [ "index.js" ],
"data-cover-never": "node-module"
}
}
}
I am using Mocha for testing in nodejs. when i run npm test after adding html-cov in the test script of my package.json as show above then it give me error
"Error: invalid reporter "html-cov"
You can see more in this image
html-cov was dropped in 3.0.0 [1]
[1] https://github.com/mochajs/mocha/issues/2356