We Keep Coding

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

GitHub Action [cypress CI integration ]: How to set env variables before running cypress run command

I am writing workflows for my repository, and I want to run test cases whenever there is a code push.
Here is the code snippet from .yml file:
- name: Run cypress test
with:
env: true
env:
username: ${{secrets.CYPRESS_USERNAME}}
password: ${{secrets.CYPRESS_PASSWORD}}
run: npm run cy:test --env fileConfig=production, username=$username, password=$password
continue-on-error: false
Snippet from JSON :
{
"env": {
"userId": "1",
"environment": "production",
"baseUrl": " base URL"
}
}
So, I want to pass the username and password along with the configfile in the cypress run command so that they can be set as the env variable because I am using username and password for my login test module.
With the above code i am getting error :
The workflow is not valid. .github/workflows/main.yml (Line: 43, Col: 9): Unexpected value 'run' .github/workflows/main.yml (Line: 36, Col: 9): Required property is missing: uses
Thanks :)

First, you need to add the env variables as empty strings on cypress.json:
{
"env": {
"userId": "1",
"environment": "production",
"baseUrl": "base URL",
"username": "",
"password": ""
}
}
In main.yml file, you need to add the CYPRESS_ prefix to the variables:
env:
CYPRESS_username: ${{secrets.CYPRESS_USERNAME}}
CYPRESS_password: ${{secrets.CYPRESS_PASSWORD}}
Also, you should use the setup that can be found on cypress docs (https://docs.cypress.io/guides/continuous-integration/github-actions#Basic-Setup), example:
name: Cypress Tests
on: [push]
jobs:
cypress-run:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout#v2
# Install NPM dependencies, cache them correctly
# and run all Cypress tests
- name: Cypress run
uses: cypress-io/github-action#v2
with:
build: npm run build
start: npm start
env:
CYPRESS_username: ${{secrets.CYPRESS_USERNAME}}
CYPRESS_password: ${{secrets.CYPRESS_PASSWORD}}
You should also read this article: https://glebbahmutov.com/blog/keep-passwords-secret-in-e2e-tests/

How to fix - Module not found: Can't resolve '#babel/runtime/helpers/objectWithoutPropertiesLoose'

I am working on a project of react and I am getting the following error after implement this package https://www.npmjs.com/package/react-bootstrap-typeahead then i get the following error.
Failed to compile
./node_modules/react-popper/lib/cjs/Popper.js
Module not found: Can't resolve '#babel/runtime/helpers/objectWithoutPropertiesLoose' in 'E:\reactjs\deveans-react-version\node_modules\react-popper\lib\cjs'
This error occurred during the build time and cannot be dismissed.
I found many solutions and I tried it too https://github.com/jquense/yup/issues/216 but still getting same error.
But when i remove Typeahead component then it works fine.
import React , { Component } from 'react'
import {Typeahead} from 'react-bootstrap-typeahead';
import 'react-bootstrap-typeahead/css/Typeahead.css';
class States extends Component {
state = {
multiple: false,
options: [
{id: 1, label: 'Pakistan'},
{id: 2, label: 'Indonesia'},
{id: 3, label: 'Turkey'},
{id: 4, label: 'Brazil'},
]
};
render () {
const {multiple} = this.state;
return (
<div>
<Typeahead
labelKey="label"
multiple={multiple}
options={this.state.options}
placeholder="Choose a state..."
/>
</div>
)
}
}
export default States

You can install #babel/runtime to fix the problem:
Using npm:
npm install --save #babel/runtime
Using yarn:
yarn add #babel/runtime

I found a solution
npm install --save-exact #babel/runtime#7.0.0-beta.55
Then delete the package-json.lock file and node_modules folder then re-install with npm install.
It works for me.

Make sure you got #babel/runtime installed into your regular dependencies and not the devDependencies (leave out the --dev or the -D flag when installing).
npm i #babel/runtime
OR
yarn add #babel/runtime
Else it's going to be missing when doing a production installation (which leaves out the devDependencies section), which is what happened to me.
All provided answers are correct in most cases but I wanted to add an explanation:
Babel's runtime is a production runtime that ships with your code so it can't just be left out because it runs on the client.

For me, i solve this by adding .js and .jsx as a resolvable extensions as objectWithoutPropertiesLoose is without extension.
resolve: {
extensions: [".ts", ".tsx", ".js", ".jsx"]
},

For me, I have to use these configurations on my webpack.config.js file
module: {
rules: [
{
test: /\.m?js/,
resolve: { fullySpecified: false },
},
],
}
I know this is an old issue, but it may help someone else

I had similar issue with pnpm and solved it by adding in .npmrc :
hoist-pattern[]=#babel/runtime
and install #babel/runtime to production dependencies (no -D flag!)
pnpm add #babel/runtime

Integrating Stylelint with Vue.js

I'm working on trying to integrate stylelint into my freshly created Vue project.
I thought this would be a simple case of using the Stylelint Webpack Plugin but when I run yarn serve, any errors completely freeze it with no output. If I run yarn build, the build will fail as intended but will only print "There was a stylelint error".
My vue.config.js is as follows:
const stylelintPlugin = require('stylelint-webpack-plugin');
module.exports = {
configureWebpack: {
plugins: [
new stylelintPlugin({ files: ['**/*.(vue|scss)'] }),
],
},
};
Here are my current versions from package.json:
"#vue/cli-service": "^3.9.0",
"stylelint": "^10.1.0",
"stylelint-config-recommended": "^2.2.0",
"stylelint-scss": "^3.9.2",

While this may come too late, here are working configurations by using stylelint-config-recommended-scss.
It is an extension to the 3rd party stylelint-scss plugin which needs to be installed along with stylelint itself. Also stylelint-webpack-plugin needs to be installed, which seems to have been missing from your setup.
Install dev dependencies:
# First remove an unnecessary one you had (with NPM):
npm uninstall stylelint-config-recommended
# Or with Yarn:
yarn remove stylelint-config-recommended
# Install dev deps with NPM:
npm i -D stylelint stylelint-scss stylelint-config-recommended-scss stylelint-webpack-plugin
# Or with Yarn:
yarn add -D stylelint stylelint-scss stylelint-config-recommended-scss stylelint-webpack-plugin
In your vue.config.js configuration file:
const StyleLintPlugin = require('stylelint-webpack-plugin');
module.exports = {
configureWebpack: {
plugins: [
new StyleLintPlugin({
files: ['src/**/*.{vue,scss}'],
}),
],
},
};
Create a file stylelint.config.js in your project's root folder:
module.exports = {
extends: 'stylelint-config-recommended-scss',
rules: {
'selector-pseudo-element-no-unknown': [
true,
{
ignorePseudoElements: ['v-deep']
}
]
}
};
In package.json you can add this lint:scss command (run by npm run lint:scss). It tries to run autofix on all rules, but please note that not all rules can be autofixed.
In that case the script will output a list of error lines and exit on error. You need to go and fix these by hand, and then re-run the script to see that the errors got fixed:
{
"scripts": {
"lint:scss": "stylelint ./src/**/*.{vue,scss} --fix"
}
}
Hope this helps! Please add a comment if I missed something.

my configuration is the same like ux.engineer written
but when i try run scripts npm run lint:scss then I have
node_modules/stylelint/node_modules/get-stdin/index.js:13
for await (const chunk of stdin) {
^^^^^
SyntaxError: Unexpected reserved word
it turned out that I had the wrong (old) node version, so pay attention for that

Cannot read source folder attempting to make any action

When attempting to run my nightwatch project with npm run project_one, I get this response.
There was an error while starting the test runner:
Error: Cannot read source folder: /Users/BenyJo/examples/tests
at /Users/BenyJo/node_modules/nightwatch/lib/runner/run.js:203:21
at /Users/BenyJo/node_modules/nightwatch/lib/runner/walk.js:97:18
at FSReqWrap.oncomplete (fs.js:153:21)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! package#1.0.0 project_one: `nightwatch`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the package#1.0.0 project_one script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
Whenever I use any nightwatch command using npm, I get the same error, my Nightwatch config is as follows:
{
"src_folders" : ["tests"],
"output_folder" : "reports",
"selenium" : {
"start_process" : true,
"server_path" : "./bin/selenium_v360.jar",
"log_path" : "",
"port" : 4444,
"cli_args" : {
"webdriver.chrome.driver" : "./bin/chromedriver"
}
},
"test_settings" : {
"default" : {
"launch_url" : "http://localhost",
"selenium_port" : 4444,
"selenium_host" : "localhost",
"desiredCapabilities": {
"browserName": "chrome",
"javascriptEnabled": true,
"acceptSslCerts": true
}
}
}
}
I've noticed that in that error, there is no file called, there should be a nightwatch folder in there. /Users/BenyJo/examples/tests

['nightwatch', '--', '--group', "$testSuite", '--env', "$projectEnv"].
I've resolved the issue "Error: Cannot read source folder: /"
Executing the command in this two ways:
nightwatch -- --group testSuite --env nameEnv
npm run test -- --group testSuite --env nameEnv
nightwatch -- --test testsFile/testSuite --env default
npm run test -- --test testsFile/testSuite --env default
Keep in mind the double argument lines: "-- --group".
It resolved runner.js in this way to Nightwatch execution
you can Replace the group or file test in your project and review the test Setting in nighwatch.json to resolve the parameter --env or -e

Had the same problem, there was a typo in my config file name. It must be named "nightwatch.json" (mine was named "nightwatch.js").