Develop Reference

error Unable to resolve path to module 'html-webpack-plugin' import/no-unresolved

I am getting this error
/home/runner/work/toDoList/toDoList/webpack.config.js
2:35 error Unable to resolve path to module 'html-webpack-plugin' import/no-unresolved
on my linters run by GitHub actions.
I do not get this error when I run eslint locally; this only happens in GitHub actions. These solutions did not work for me.
How to manually add a path to be resolved in eslintrc
Using eslint with typescript - Unable to resolve path to module
eslint / typescript: Unable to resolve path to module
Why I got error Unable to resolve path to module? Eslint with Typescript
https://www.appsloveworld.com/reactjs/200/340/sublime-eslint-plugin-unable-to-resolve-path-to-module-while-the-path-exist
Here is my webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
devtool: 'inline-source-map',
devServer: {
static: './dist',
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
}),
],
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
],
},
};
And my .eslintrc.json
{
"env": {
"browser": true,
"es6": true,
"jest": true
},
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module"
},
"extends": ["airbnb-base"],
"rules": {
"no-shadow": "off",
"no-param-reassign": "off",
"eol-last": "off",
"import/extensions": [ 1, {
"js": "always", "json": "always"
}]
},
"ignorePatterns": [
"dist/",
"build/"
]
}
Here is the pull request with error if I'm missing something.

Turns out my html-webpack-plugin wasn't getting installed in the GitHub actions environment because it wasn't in linters.yml file. Adding npm install html-webpack-plugin in linters.yml solved the issue.

#shasherazi is right, in my case I added it like below under eslint
run: | npm install html-webpack-plugin
just before the eslint install command in linters.yml file

Cannot find module '~/utility/functions' from 'Compnent.vue'

I'm runing unit test for vue files. in the vue component i have imported ~/utility/functions file it worked in vue but while testing im getting
Cannot find module '~/utility/functions' from 'Compnent.vue' error
jest.config.js
module.exports = {
testEnvironment: "jest-environment-jsdom",
moduleFileExtensions: [
"js",
"json",
"vue"
],
modulePaths: [ "<rootDir>" ],
moduleDirectories: [
"node_modules", "<rootDir>"
],
transform: {
"^.+\\.js$": "babel-jest",
"^.+\\.vue$": "#vue/vue2-jest"
}
};

How to force unit tests coverage for a specific folder in Jest

I'm trying to create a task that runs code coverage for a specific folder in my project (test-coverage-sub-folder). I already have it set for the entire project (test-coverage).
In my package.json I've added these two tasks:
{
"test-coverage": "jest unitTests/ --collectCoverage=true --coverage --collectCoverageFrom=./mainFolder/ui/**/*.js --coverageReporters=text-summary",
"test-coverage-sub-folder": "jest unitTests/subFolder/ --collectCoverage=true --coverage --collectCoverageFrom=./mainFolder/ui/**/*.js --coverageReporters=text-summary --config subFolder.jest.config.js",
}
subFolder.jest.config.js
module.exports = {
verbose: true,
testRegex: "(/jestTests/.*|(\\.|/)(test|spec))\\.js?$",
moduleFileExtensions: [ "js", "jsx", "json", "node", "ts", "tsx", ],
modulePathIgnorePatterns: [
"unitTests/helpers/"
],
setupFiles: [
"<rootDir>/unitTests/helpers/mock.js"
],
testEnvironment: "jsdom",
coverageDirectory: "./../../../jest-coverage",
collectCoverage: false,
forceCoverageMatch: ["unitTests/subFolder/**/*.js"],
coverageThreshold: {
global: {
statements: 80,
branches: 80,
functions: 80,
lines: 80
}
}
};
I tried using forceCoverageMatch but it didn't work unless I'm not using it right?
When I run the task it works, it runs only the tests from the subFolder but it calculates coverage based on all files in the project and I want it to calculate coverage only based on the files from subFolder.

Use ESLint plugin only for some files/directories

I'm using the ESLint plugin for Jest to lint my Jest tests. The structure of my project is
my-project
|
|--tests
|
|--unit
|
|--e2e
I only want to use the Jest plugin when linting files in the tests/unit dir (because the files in tests/e2e are not Jest tests), but when I run the linting, this plugin is applied to all files under tests/unit, which results in spurious errors in the tests/e2e files.
I can disable individual rules in the tests/e2e dir by adding the following to eslintrc.js
module.exports = {
root: true,
env: {
node: true,
'jest/globals': true
},
extends: [
'eslint:recommended',
'plugin:jest/recommended',
],
parserOptions: {
parser: 'babel-eslint'
},
plugins: ['jest'],
"overrides": [
{
"files": ["tests/e2e/*.js"],
"rules": {
"jest/no-disabled-tests": "off",
"jest/expect-expect": "off",
"jest/valid-expect-in-promise": "off"
}
}
]
}
But rather than disabling individual rules in the tests/e2e dir, I would like to disable the Jest plugin completely.

From the eslint docs regarding overrides:
A glob specific configuration works almost the same as any other ESLint config. Override blocks can contain any configuration options that are valid in a regular config, with the exception of root and ignorePatterns.
Credit to the SO answer that helped me: Eslint allow multiple parsers based on glob patterns
The example in that answer also demonstrates overriding plugins.
My example uses two overrides sections, one for JavaScript files and one for TypeScript. This could easily be two different directories.
{
"overrides": [
{
"files": "**/*.ts",
"plugins": [
"prettier",
"#typescript-eslint"
],
"extends": [
"eslint-config-prettier",
"prettier",
"prettier/#typescript-eslint",
"plugin:import/errors",
"plugin:import/warnings",
"plugin:import/typescript",
"plugin:#typescript-eslint/recommended",
"plugin:#typescript-eslint/recommended-requiring-type-checking",
"plugin:prettier/recommended"
],
"parser": "#typescript-eslint/parser",
"parserOptions": {
"project": "./tsconfig.json"
},
"rules": {
}
},
{
// Disabling TypeScript lint rules for JS files.
"files": "**/*.js",
"plugins": [
"prettier"
],
"extends": [
"esnext",
"eslint-config-prettier",
"prettier",
"plugin:import/errors",
"plugin:import/warnings",
"plugin:prettier/recommended"
],
"parser": "babel-eslint",
"parserOptions": {
},
"env": {
"node": true
},
"rules": {
}
}
]
}

Encountered the same issue and haven't found a built in solution in eslint's config files, but you can try something that worked for me: ignore the E2E tests pattern in the main eslintrc.js and create another eslintrc.js file nested in the E2E directory.
as follows:
my-project
|-- eslintrc.js // this is your main eslint config
|--tests
|
|--unit
|
|--e2e
|
|-- eslintrc.js // nested eslintrc without the "jest" plugin
Note that you would have to tell the babel-eslint parser in the nested eslintrc where the babel config files is (usually as part of the parserOptions) since it is no longer in the same directory.
Main eslintrc.js:
module.exports = {
root: true,
env: {
node: true,
'jest/globals': true
},
extends: [
'eslint:recommended',
'plugin:jest/recommended',
],
parser: 'babel-eslint'
plugins: ['jest'],
ignorePatterns: ["tests/e2e/*.js"]
}
Nested eslintrc.js file in tests/e2e/:
module.exports = {
root: true,
env: {
node: true
},
extends: ['eslint:recommended'],
parser: 'babel-eslint',
parserOptions: {
babelOptions: {
configFile: '../../babel.config.js' // assuming this is the name of your babel config file in the project root
}
}
}

You can use ignorePatterns in your config file or create a .eslintignore file.
See: https://eslint.org/docs/user-guide/configuring#ignoring-files-and-directories

How to implement flowtype in Nuxt.js

I am currently trying to convert our existing vue.js project into nuxt.js. I am unable to add flowtype support in nuxt.js. when i run the flow server it says no errors!! but running npm run dev, its throwing error on the flow syntax.
.flowconfig
[include]
pages/**/.*
components/**/.*
layouts/**/.*
apiRoutes/.*
store/.*
utils/.*
[ignore]
.*/build/.*
.*/config/.*
.*/dist/.*
.*/node_modules/.*
.*/static/.*
.*/test/.*
.*/ssl/.*
.*/.nuxt/.*
[libs]
./flow/
[options]
emoji=true
module.file_ext=.vue
module.file_ext=.js
server.max_workers=3
log.file=./flow.log
suppress_comment= \\(.\\|\n\\)*\\$FlowFixMe
unsafe.enable_getters_and_setters=true
module.system.node.resolve_dirname=node_modules
module.name_mapper='^.*\.css$' -> 'empty/object'
module.name_mapper='^.*\.js$' -> 'empty/object'
module.name_mapper='^#/\(.*\)$' -> '<PROJECT_ROOT>/\1'
i've added all the neccessary babel and eslint packages.
.babelrc
{
"presets": [
["env", { "modules": false }],
"stage-2",
["es2015", {"modules": false }],
"flow-vue"
],
"plugins": [
"transform-runtime",
"transform-class-properties",
"syntax-flow",
"transform-flow-strip-types"
],
"comments": false,
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": [ "istanbul" ]
}
}
}
.eslintrc.js
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module'
},
env: {
browser: true,
node: true,
jquery: true
},
extends: [
'standard',
'plugin:flowtype/recommended'
// 'plugin:vue/recommended'
],
// required to lint *.vue files
plugins: [
'html',
'flowtype-errors',
'flowtype'
],
// add your custom rules here
rules: {
'flowtype-errors/show-errors': 2,
// allow paren-less arrow functions
'arrow-parens': 0,
'semi': ["error", "always"],
// allow async-await
'generator-star-spacing': 0
},
globals: {}
}
On running npm run dev, it doesnt parse flowtype syntax

I suggest following the instructions on the flow website to set up Babel. In particular there is a preset, so you shouldn't need to configure individual rules. Then you'll actually need to run Babel (again, instructions are on the website). Once you have run Babel, you should be able to run the code it outputs in Node.