We Keep Coding

StyleLint throws error when running in Github action

I have been trying to deep dive into the problem, but I cannot figure out where everything is going wrong. As you can see below is where the error is happening for this specific rule https://stylelint.io/user-guide/rules/declaration-block-no-redundant-longhand-properties/. Any advice and help would be greatly appreciated :).
node_modules/stylelint/lib/rules/declaration-block-no-redundant-longhand-properties/index.js:117
.map((p) => transformedDeclarationNodes.get(p)?.value.trim())
^
SyntaxError: Unexpected token '.'
my linter config file
{
"extends": "stylelint-config-recommended-scss",
"plugins":["stylelint-prettier"],
"rules": {
"prettier/prettier": true,
"scss/dollar-variable-pattern": null,
"block-no-empty": null,
"rule-empty-line-before":["always",{"ignore":["first-nested"]}],
"scss/selector-no-redundant-nesting-selector": true,
"font-family-no-missing-generic-family-keyword": [true,{"ignoreFontFamilies":["MAIN_THEME"]}],
"color-function-notation": "legacy",
"alpha-value-notation": "number",
"scss/dollar-variable-colon-space-after": "always",
"scss/dollar-variable-colon-space-before": "never",
"unit-allowed-list": ["px","vmin","em","rem","deg","%","vh","vw","s"],
"declaration-block-no-redundant-longhand-properties":[true, {
"severity": "warning"
}],
"selector-class-pattern": "^.*$",
"number-max-precision":2,
"keyframes-name-pattern": "^[a-zA-Z]+?(?:-+[a-zA-Z]{2,10}){1,3}$"
}
}
my CI action file
name: something
on: [pull_request]
jobs:
buildnode:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#v3
- uses: actions/setup-node#v3
with:
node-version: '12.x'
- name: install modules
run: npm install
- name: run scss linter
run: npm run styleLinter
- name: run js linter
run: npm run linter
- name: build web app
run: npm run build
- name: test the code
run: npm test

Node version is out of date for styleLint so I updated to 18 that resolved the issue.

NPM RUN BUILD ERROR in ./node_modules/#fortawesome/fontawesome-svg-core/styles.css

My Error Capture
ERROR in ./node_modules/#fortawesome/fontawesome-svg-core/styles.css (./node_modules/#nuxt/postcss8/node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/#nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js??ref--3-oneOf-1-2!./node_modules/#fortawesome/fontawesome-svg-core/styles.css)
Module build failed (from ./node_modules/#nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js):
ParserError: Syntax Error at line: 1, column 30
at /home/simrs/adamklinik/frontend/node_modules/#fortawesome/fontawesome-svg-core/styles.css:200:3
I use nuxt.js and tailwind

For anyone who stumbles over this issue: I solved it by following this answer: https://stackoverflow.com/a/67827344/6098257
In my case I just had to set postcss-custom-properties to false.
build: {
postcss: {
plugins: {
"postcss-custom-properties": false
},
},
}

Try to do npm install first, then rerun with npm run build.

Try to do steps:
npm uninstall #nuxtjs/fontawesome #fortawesome/free-solid-svg-icons #fortawesome/free-brands-svg-icons -D
npm i #nuxtjs/fontawesome #fortawesome/free-solid-svg-icons #fortawesome/free-brands-svg-icons -D
Or you can manual update two packages (#fortawesome/free-brands-svg-icons and #fortawesome/free-solid-svg-icons) to v6.x

Vetur can't find package.json

I was writing code for my app with Vue and everything worked perfectly. Then I started to create child components and I could not refresh the localhost anymore.
Now it says:
"Vetur can't find 'package.json"
&
"Vetur can't find 'tsconfig.json' or 'jsconfig.json"
and when I try to "npm run serve" in the cmd - then i get this:
C:\Users\cmana\Desktop\WebDeveloper\Vue app\vuetify-todo>npm run serve
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path C:\Users\cmana\Desktop\WebDeveloper\Vue app\vuetify-todo\package.json
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, open 'C:\Users\cmana\Desktop\WebDeveloper\Vue app\vuetify-todo\package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\cmana\AppData\Roaming\npm-cache\_logs\2021-04-07T12_03_13_953Z-debug.log
Acording to this https://vuejs.github.io/vetur/guide/setup.html#project-setup - I tried to add the jsconfig.json file with this content. (I deleted all the child components so I only have these vue files (About, Todo, App) left.)
{
"include": [
"./src/views/About.vue",
"./src/views/Todo.vue",
"./src/App.vue"
]
}
Still nothing. Anybody any ideas? Thank you <3

First of all, in Visual Studio code, type:
Ctrl + Shift + p
This command, will open this window
Type: settings json in search bar, like this:
Open the first option: "Open Settings (JSON)".
Now, on JSON file, add this: "vetur.ignoreProjectWarning": true, in the end of file, like this:
Restart Visual Studio Code and you're done!

Installing the EsLint extension should solve your problem
if you are on VS Code, search for the EsLint extension by publisher:"Dirk Baeumer", install it and approve the installation to start the EsLint server
Alternatively run this in the terminal
npm install eslint in your workspace
The package.json file gets modified and your server will be up again
for further information on the EsLint extension you can check
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
Good luck!

Add "vetur.config.js" outside your project.
In this example below, "vetur.config.js" is added outside the project "vueProject":
Shrinking "vueProject" looks clearer:
Then, paste this code below to "vetur.config.js":
// vetur.config.js
/** #type {import('vls').VeturConfig} */
module.exports = {
// **optional** default: `{}`
// override vscode settings
// Notice: It only affects the settings used by Vetur.
settings: {
"vetur.useWorkspaceDependencies": true,
"vetur.experimental.templateInterpolationService": true
},
// **optional** default: `[{ root: './' }]`
// support monorepos
projects: [
'./packages/repo2', // shorthand for only root.
{
// **required**
// Where is your project?
// It is relative to `vetur.config.js`.
root: './packages/repo1',
// **optional** default: `'package.json'`
// Where is `package.json` in the project?
// We use it to determine the version of vue.
// It is relative to root property.
package: './package.json',
// **optional**
// Where is TypeScript config file in the project?
// It is relative to root property.
tsconfig: './tsconfig.json',
// **optional** default: `'./.vscode/vetur/snippets'`
// Where is vetur custom snippets folders?
snippetFolder: './.vscode/vetur/snippets',
// **optional** default: `[]`
// Register globally Vue component glob.
// If you set it, you can get completion by that components.
// It is relative to root property.
// Notice: It won't actually do it. You need to use `require.context` or `Vue.component`
globalComponents: [
'./src/components/**/*.vue'
]
}
]
}

in VSCode
ctrl + p
open setting.json
add this line:
"vetur.ignoreProjectWarning": true,
this will ignore the error.

In VS Code, if the actual code is in a subfolder (e.g you have a monorepo), you can add a vetur.config.js in the root directory as per below.
module.exports = {
projects: [
{
root: './frontend', // root of your vue project (should contain package.json)
package: './package.json', // Relative to root property, don't change this.
tsconfig: './tsconfig.json', // Relative to root property, don't change this.
}
]
}
Please refer to Vetur Reference for more details.

Issue with rewire.js - Error: Cannot find module <path to rewired module>

So my directory structure looks like this:
and this is basically the cookie cutter use case for the rewire library right?
So my test module is very bare bones, just trying to rewire the module I want to test.
fetchTerms.test.js
import test from 'ava';
import rewire from 'rewire';
let fetchTerms = rewire('../src/fetchTerms.js');
let dateIsValid = fetchTerms.__get__("dateIsValid");
test("dateIsValid catches invalid dates", t => {
t.false(dateIsValid("999999"));
t.is("", "a");
});
fetchTerms.js
...
function dateIsValid(date) {
let month = parseInt(date.slice(4));
return 1 <= month && month <= 12;
}
...
export default <some other function>;
Unfortunately when I run with ava, I get this "cannot find module" error caused by the attempted rewire
> ava
✖ No tests found in target/test/fetchTerms.test.js
─
Uncaught exception in target/test/fetchTerms.test.js
Error: Cannot find module '../src/fetchTerms.js'
› internalRewire (node_modules/rewire/lib/rewire.js:23:25)
› rewire (node_modules/rewire/lib/index.js:11:12)
› file://target/test/fetchTerms.test.js:3:18
› ModuleJob.run (internal/modules/esm/module_job.js:138:23)
› Loader.import (internal/modules/esm/loader.js:178:24)
─
1 uncaught exception
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! fetch_courses#1.0.0 test: `ava`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the fetch_courses#1.0.0 test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /mnt/c/Users/********/.npm/_logs/2020-07-22T03_11_15_418Z-debug.log
Unless you can find anything wrong with the rewire path ../src/fetchTerms.js I don't know what could possibly make rewire not know how to find fetchTerms.js.
Any ideas?

TypeError: Super expression must either be null or a function

I'm very new to unit Testing in vue js. I just went through this website to learn unit testing "https://vue-test-utils.vuejs.org/guides/#testing-single-file-components-with-mocha-webpack". while I'm practicing the examples in "mocha-webpack" I got this Error
WEBPACK Failed to compile with 1 error(s)
Error in ./src/Counter.vue
TypeError: Super expression must either be null or a function
at /opt/htdocs/guru/unitTest_prct/node_modules/prettier/index.js:32893:5
at /opt/htdocs/guru/unitTest_prct/node_modules/prettier/index.js:32913:4
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! mdbvue#4.2.0 test: `mocha-webpack --webpack-config webpack.config.js --require test/setup.js test/**/*.spec.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the mdbvue#4.2.0 test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2018-09-06T10_28_47_073Z-debug.log
Can anyone tell me how to solve this error. This is my Counter.vue file
<template>
<div>
<div>
{{ count }}
<button #click="increment">Increment</button>
</div>
</div>
</template>
<script>
export default {
data () {
return {
count: 0
}
},
methods: {
increment () {
this.count++;
}
}
};
</script>
Here is my Counter.spec.js File
import { shallowMount } from '#vue/test-utils'
import Counter from '../src/docs/Counter.vue'
describe('Counter.vue', () => {
it('increments count when button is clicked', () => {
const wrapper = shallowMount(Counter)
wrapper.find('button').trigger('click')
expect(wrapper.find('div').text()).toMatch('1')
})
})

I've looked at the issue linked above.
I have --require test/setup.js in the test script. Here's how it looks like:
require('jsdom-global')();
window.Date = Date;
It solved the problem. Try it out!

It is a problem related with version 1.14.1 of prettier, that is a NPM package used in your scenario.
Indeed, looking at their GitHub repo the issue is reported. At the moment there is a possible workaround: basically, it is to comment out line 32893 of prettier/index.js.
In your environment you can find the file here: /opt/htdocs/guru/unitTest_prct/node_modules/.