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

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

Related

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.

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.

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

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

Categories