I'm getting the following error anytime I try to run 'npm run production'. The rest of the error is just a list of 'node_modules' packages where this error also occur.
ERROR in ./resources/assets/sass/app.scss
Module build failed: ModuleBuildError: Module build failed: TypeError: Cannot read property 'unprefixed' of undefined at clearDecl (/Users/prusso/Sites/qut-match-my-skills/node_modules/postcss-unprefix/lib/clearDecl.js:13:30)
I believe the error is in the version of 'autoprefixer' and/or 'postcss-unprefix'. Please check my 'devDependencies' below:
"devDependencies": {
"autoprefixer": "^8.6.3",
"babel-eslint": "^8.2.6",
"babel-polyfill": "^6.26.0",
"browser-sync": "^2.24.5",
"browser-sync-webpack-plugin": "2.0.1",
"cross-env": "^5.2.0",
"cssnano": "^3.10.0",
"eslint": "^4.0.0",
"eslint-plugin-vue": "^4.7.1",
"laravel-mix": "^2.1.11",
"postcss-unprefix": "^2.1.3",
"prettier-eslint": "^8.8.2",
"raw-loader": "^0.5.1"
},
"dependencies": {
"#nextindex/next-scss": "^1.2.1",
"animate-sass": "^0.8.2",
"axios": "^0.18.0",
"babel-core": "^6.26.3",
"es6-promise": "^4.2.4",
"family.scss": "^1.0.8",
"lodash.compact": "^3.0.1",
"lodash.get": "^4.4.2",
"normalize.css": "^8.0.0",
"portal-vue": "^1.3.0",
"smoothscroll-polyfill": "^0.4.3",
"uuid": "^3.3.2",
"vue": "^2.5.16",
"vue-parallaxy": "^1.1.1",
"vue-router": "^3.0.1",
"vuex": "^3.0.1",
"vuex-persistedstate": "^2.5.4",
"zeus-grid": "^8.2.0"
}
Other thing that I have noticed is that if I comment out the following line 'require('postcss-unprefix')' inside 'webpack.mix.js' and run 'npm run production' everything works fine.
mix.options({
postCss: [
// require('postcss-unprefix'),
require('autoprefixer')({
browsers: '>0.1%',
}),
require('cssnano')({
preset: [
'default',
{
discardComments: {
removeAll: true,
},
},
],
}),
],
});
Thanks for your help!!
try autoprefixer:10.2.5 latest version
Trt postcss-rtlcss package insted of postcss-rtl
Latest version (postcss#^8.0.0)
npm install postcss-rtlcss --save-dev
Latest legacy version (postcss#^7.0.0)
npm install postcss-rtlcss#legacy --save-dev
Related
Here is the package.json from my project, I've ran npm install.
npm run dev is working fine on localhost. After 1 hour, when I restart my computer, I got the following error
Module build failed (from ./node_modules/less-loader/dist/cjs.js): #import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght#400;700&family=Roboto:wght#100;300;400;500;700;900&display=swap'); #import url('https://fonts.googleapis.com/css2?family=Prompt:ital,wght#0,200;0,300;1,200&display=swap'); ^ Resource 'https://fonts.googleapis.com/css2?family=Prompt:ital,wght#0,200;0,300;1,200&display=swap' gave this Error: Error: socket hang up Error in C:\xampp\htdocs\frontend\assets\styles\custom.less (line 5, column 0)
I already solved this issue once by deleting my node_modules.
But here, even after removing my package-lock.json, the issue persists.
{
"dependencies": {
"#babel/core": "^7.16.5",
"#babel/preset-env": "^7.16.5",
"#fullcalendar/daygrid": "^5.8.0",
"#fullcalendar/interaction": "^5.8.0",
"#fullcalendar/timegrid": "^5.8.0",
"#fullcalendar/vue": "^5.8.0",
"#line/liff": "^2.8.0",
"#nuxt/content": "1.8.1",
"#nuxtjs/auth": "4.9.1",
"#nuxtjs/axios": "^5.12.2",
"#nuxtjs/dotenv": "^1.4.1",
"#nuxtjs/pwa": "3.0.2",
"ant-design-vue": "1.6.5",
"apexcharts": "^3.27.1",
"axios": "^0.20.0",
"bootstrap": "5.0.0-alpha2",
"downloadjs": "^1.4.7",
"html-to-image": "^1.6.2",
"nuxt": "2.14.4",
"nuxt-cookie-control": "1.9.9",
"nuxt-i18n": "6.13.12",
"object-fit-images": "^3.2.4",
"omise": "^0.8.5",
"quasar": "^1.15.21",
"vue-apexcharts": "^1.6.1",
"vue-fb-customer-chat": "^0.2.0",
"vue-google-oauth2": "^1.5.8",
"vue-meta": "^2.4.0",
"vue-social-sharing": "^3.0.7"
},
"devDependencies": {
"#nuxtjs/eslint-config": "3.1.0",
"#nuxtjs/eslint-module": "2.0.0",
"#nuxtjs/moment": "^1.6.1",
"#vue/test-utils": "1.0.5",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "10.1.0",
"babel-jest": "26.3.0",
"eslint": "7.8.1",
"eslint-plugin-nuxt": "1.0.0",
"jest": "26.4.2",
"less": "3.12.2",
"less-loader": "7.0.1",
"node-sass": "^4.14.1",
"sass": "^1.32.13",
"stylus": "^0.54.8",
"stylus-loader": "^6.1.0",
"vue-jest": "3.0.6"
}
I have Azure DevOps build pipeline configured to build NPM application, that includes the following tasks:
Install Node.js (Node.js tool installer) - Version Spec 10.x
npm ci (npm task)
And it almost always fails on the npm ci task, with error:
SyntaxError: Unexpected end of JSON input while parsing near ' and then some random string, each time different.
If I re-run the job manually, it will works. Then, at the next build, it fails again (until I manually rerun it again).
I am also using Azure Artifacts feed with configured Upstream sources to https://registry.npmjs.org/ and npm ci task is configured to use packages from this registry.
I have tried to:
remove Artifacts feed and create a new one
remove Install Node.js task
change node version
change npm ci to npm install
and nothing works. How else can I fix that?
EDIT - 03 April 2020
Here is my package.json - I've removed some of the private data.
There are two private packages, #project-name/jodit-vue and #project-name/vuex-orm-plugin-axios hosted on Azure Artifacts - those are forks of jodit-vue and vuex-orm-plugin-axios with some customizations.
Also, less builds failed recently. About one in 8 builds fails now.
{
"name": "name",
"version": "1.0.0",
"private": true,
"scripts": {
},
"dependencies": {
"#project-name/jodit-vue": "^1.2.4-fix",
"#project-name/vuex-orm-plugin-axios": "0.5.0",
"#stomp/stompjs": "^5.4.2",
"#vuex-orm/core": "^0.33.0",
"axios": "^0.19.0",
"chart.js": "^2.9.3",
"chartjs-plugin-colorschemes": "^0.4.0",
"core-js": "^3.4.8",
"crypto-js": "^3.1.9-1",
"drag-drop-touch": "^1.3.0",
"emoji-mart-vue-fast": "^6.1.2",
"file-saver": "^2.0.2",
"jquery": "^3.4.0",
"lodash": "^4.17.14",
"moment": "^2.24.0",
"oidc-client": "^1.9.1",
"shepherd.js": "^5.0.1",
"vue": "^2.6.10",
"vue-chartjs": "^3.5.0",
"vue-class-component": "^7.1.0",
"vue-cookie-law": "^1.8.0",
"vue-cropperjs": "^4.0.0",
"vue-i18n": "^8.15.1",
"vue-matomo": "^3.13.0-0",
"vue-property-decorator": "^8.3.0",
"vue-recaptcha": "^1.3.0",
"vue-router": "^3.1.3",
"vue-stripe-elements-plus": "^0.2.8",
"vuejs-logger": "^1.5.3",
"vuetify": "^1.5.21",
"vuex": "^3.1.2",
"vuex-oidc": "^3.3.1",
"xlsx": "^0.15.2"
},
"devDependencies": {
"#babel/core": "^7.7.5",
"#babel/plugin-transform-runtime": "^7.7.6",
"#babel/preset-env": "^7.7.6",
"#babel/preset-typescript": "^7.7.4",
"#kazupon/vue-i18n-loader": "^0.4.1",
"#storybook/addon-actions": "^5.3.13",
"#storybook/addon-docs": "^5.3.13",
"#storybook/addon-knobs": "^5.3.13",
"#storybook/addon-links": "^5.3.13",
"#storybook/addon-viewport": "^5.3.13",
"#storybook/vue": "^5.3.13",
"#types/chai": "^4.1.6",
"#types/crypto-js": "^3.1.43",
"#types/file-saver": "^1.3.1",
"#types/jquery": "^2.0.47",
"#types/lodash": "^4.14.119",
"#types/mocha": "^2.2.46",
"#types/sinon": "^7.0.13",
"#types/stripe": "^5.0.24",
"#types/stripe-v3": "^3.0.8",
"#types/webpack": "^4.4.14",
"#types/webpack-env": "^1.13.6",
"#vue/cli": "^4.1.1",
"#vue/cli-plugin-babel": "^4.1.1",
"#vue/cli-plugin-eslint": "^4.1.2",
"#vue/cli-plugin-pwa": "^4.1.1",
"#vue/cli-plugin-typescript": "^4.1.1",
"#vue/cli-plugin-unit-jest": "^4.1.1",
"#vue/cli-plugin-unit-mocha": "^4.1.1",
"#vue/cli-service": "^4.1.1",
"#vue/eslint-config-typescript": "^4.0.0",
"#vue/test-utils": "1.0.0-beta.29",
"babel-loader": "^8.0.6",
"babel-plugin-transform-imports": "^2.0.0",
"chai": "^4.2.0",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"moment-locales-webpack-plugin": "^1.1.2",
"node-sass": "^4.13.0",
"react": "^16.12.0",
"react-is": "^16.12.0",
"sass-loader": "^8.0.0",
"sinon": "^7.4.1",
"stylus": "^0.54.7",
"stylus-loader": "^3.0.2",
"typescript": "^3.7.4",
"vue-cli-plugin-i18n": "^0.6.0",
"vue-cli-plugin-storybook": "^1.2.0",
"vue-cli-plugin-vuetify": "^2.0.2",
"vue-jest": "^3.0.4",
"vue-loader": "^15.7.1",
"vue-template-compiler": "^2.6.10"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
SOLVED (partially) - 15 April 2020
I have changed npm ci to npm install a few days ago. No more fails, every build finished successfully since this change.
install is slower that ci but we can spend one more minute in each build but be sure that it will not fail.
I upgraded to Babel 7 using https://github.com/babel/babel-upgrade and now have an error relating to grunt/browserify.
In grunt file:
browserify: {
options: {
watch: true,
transform: [['babelify', {
presets: ['#babel/preset-env', '#babel/preset-react'],
plugins: [
['#babel/plugin-transform-react-jsx', {'pragma':'h'}]
],
}]],
browserifyOptions: {
standalone: 'Viewer', // Set name of package as window global when no package system is present
debug: true // Enables Source Maps
}
},
all: {
options: {
watch: true, // Listen for incremental changes to files (fast incremental build)
},
files: {
...
}
}
} . . .
I get the following error on 'browserify:all' :
Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible version of #babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "#babel/core" or "babel-core" to see what is calling Babel. (While processing preset: "XXXX") while parsing file: "XXXXXX"
Can someone help me to resolve this showstopper?
package.json:
"devDependencies": {
"#babel/core": "^7.0.0",
"#babel/plugin-proposal-class-properties": "^7.0.0",
"#babel/plugin-proposal-decorators": "^7.0.0",
"#babel/plugin-proposal-do-expressions": "^7.0.0",
"#babel/plugin-proposal-export-default-from": "^7.0.0",
"#babel/plugin-proposal-export-namespace-from": "^7.0.0",
"#babel/plugin-proposal-function-bind": "^7.0.0",
"#babel/plugin-proposal-function-sent": "^7.0.0",
"#babel/plugin-proposal-json-strings": "^7.0.0",
"#babel/plugin-proposal-logical-assignment-operators": "^7.0.0",
"#babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
"#babel/plugin-proposal-numeric-separator": "^7.0.0",
"#babel/plugin-proposal-optional-chaining": "^7.0.0",
"#babel/plugin-proposal-pipeline-operator": "^7.0.0",
"#babel/plugin-proposal-throw-expressions": "^7.0.0",
"#babel/plugin-syntax-dynamic-import": "^7.0.0",
"#babel/plugin-syntax-import-meta": "^7.0.0",
"#babel/plugin-transform-react-jsx": "^7.3.0",
"#babel/preset-env": "^7.0.0",
"#babel/preset-react": "^7.0.0",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^23.6.0",
"grunt-browserify": "^5.3.0",
"jest": "^23.5.0",
"jsdom": "^12.1.0"
},
"dependencies": {
"#tweenjs/tween.js": "^17.3.0",
"autoprefixer": "^6.7.5",
"babelify": "^7.3.0",
"browserify": "^13.1.0",
"cssnano": "^3.10.0",
"diff-arrays-of-objects": "^1.1.2",
"eslint": "^3.7.1",
"eslint-plugin-react": "^6.10.3",
"filesize": "^3.6.1",
"grunt": "^1.0.2",
"grunt-contrib-uglify-es": "^3.3.0",
"grunt-contrib-watch": "^1.0.0",
"grunt-env": "^0.4.4",
"grunt-eslint": "^19.0.0",
"grunt-open": "^0.2.4",
"grunt-postcss": "^0.8.0",
"grunt-sass": "^2.1.0",
"mathjs": "^5.4.0",
"p-queue": "^3.0.0",
"preact": "^8.2.7",
"preact-range-slider": "^0.2.0",
"preact-redux": "^2.0.1",
"redux": "^3.6.0",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.2.0",
"redux-undo": "^1.0.0-beta9-9-7",
"tslib": "^1.9.0",
"tween": "^0.9.0"
}
1- Delete node modules
npm install rimraf -g
rimraf node_modules
2- Upgrade "babelify": "^7.3.0" to "babelify": "^9.0.0" (Babelify 7.3.0 loads babel-core v 6.26.3)
3- Change "babel-preset-es2015" and "babel-preset-react to
"#babel/preset-env": "^7.5.5",
"#babel/preset-react": "^7.0.0"
(if you use them)
4- In .babelrc change "presets": ["react", "es2015"] to "presets": ["#babel/preset-env", "#babel/preset-react"] (if you use them)
5-npm install
Try deleting your node_modules folder and then rerunning npm install - this should remove any dependency remants from when you were on an older version.
When you run your grunt file it is looking for babel-register. However, for babel 7.0.0 and higher, you need it to look for #babel/register. So you need to install #babel/register and it should work without any further action from you.
npm install --save-dev #babel/register
After I reinstalled my Windows and cloning project from GitHub, I am getting npm Error: EPERM: operation not permitted D:\System Volume Information
In terminal I run:
webpack-dev-server --open --config webpack.dev.js
And it compiles all good but when I open my browser on http://localhost:8000/ it says:
Internal Server Error
When I check terminal I can see:
i ｢wdm｣: Compiled successfully.
Error: EPERM: operation not permitted, stat 'D:\System Volume Information'
So my webpack compiles all good, the problem is when I try to open it at localhost:8000
Already tried
removing node_modules
npm cache clean --force
npm install npm#6.4.0 & npm#6.3.0
reinstalling node.js
using port 9000
running terminal as administrator
reinstalling webpack-dev-server
disabling kaspersky antivirus
deleting files from C:\Users\.config\configstore\
{
"name": "site",
"version": "1.0.0",
"main": "webpack.base.js",
"scripts": {
"start": "webpack-dev-server --open --config webpack.dev.js",
"build": "webpack --config webpack.prod.js "
},
"author": "",
"license": "ISC",
"dependencies": {
"#babel/plugin-syntax-optional-catch-binding": "^7.0.0",
"#babel/plugin-transform-async-to-generator": "^7.1.0",
"#babel/preset-react": "^7.0.0",
"#babel/template": "^7.1.2",
"#babel/types": "^7.1.3",
"adjust-sourcemap-loader": "^1.2.0",
"autoprefixer": "^9.3.1",
"babel": "^6.23.0",
"babel-core": "^6.26.3",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"bootstrap": "^4.1.3",
"debug": "^4.1.0",
"detect-libc": "^1.0.3",
"glob": "^7.1.3",
"gsap": "^2.0.2",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"imagemin-pngquant": "^5.1.0",
"jquery": "^3.3.1",
"locate-path": "^3.0.0",
"lodash": "^4.17.11",
"lodash._baseassign": "^3.2.0",
"lodash._basecopy": "^3.0.1",
"lodash.isarguments": "^3.1.0",
"lodash.keys": "^4.2.0",
"ms": "^2.1.1",
"npm": "^6.5.0",
"only": "0.0.2",
"owl.carousel": "^2.3.4",
"pngquant-bin": "^3.1.1",
"popper.js": "^1.14.4",
"pretty-error": "^2.1.1",
"raw-loader": "^0.5.1",
"svg-url-loader": "^2.3.2",
"toposort": "^2.0.2",
"uglifyjs-webpack-plugin": "^2.0.1",
"update": "^0.7.4",
"util-promisify": "^2.1.0",
"webpack-cli": "^3.1.2"
},
"devDependencies": {
"#babel/cli": "^7.1.2",
"#babel/core": "^7.1.5",
"#babel/parser": "^7.1.3",
"#babel/preset-env": "^7.1.6",
"#webpack-cli/init": "^0.1.2",
"babel-loader": "^8.0.4",
"babel-minify-webpack-plugin": "^0.3.1",
"babel-plugin-transform-async-to-generator": "^6.24.1",
"clean-webpack-plugin": "^0.1.19",
"critters-webpack-plugin": "^2.0.1",
"css-loader": "^1.0.1",
"eslint": "^5.9.0",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^2.0.0",
"html-critical-webpack-plugin": "^2.1.0",
"mini-css-extract-plugin": "^0.4.5",
"node-sass": "^4.9.4",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"postcss-loader": "^3.0.0",
"purify-css": "^1.2.5",
"purifycss-webpack": "^0.7.0",
"resolve-url-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"svg-inline-loader": "^0.8.0",
"url-loader": "^1.1.2",
"webpack": "^4.26.0",
"webpack-manifest-plugin": "^2.0.4",
"webpack-merge": "^4.1.4"
},
"description": ""
}
Versions
npm -v 6.5.0
node -v 11.4.0
Windows 10.0.17134
I solve this issue by opening Visual Studio Code in Admin Mode.
Actually problem was because webpack-dev-server watched wrong files.
Fix
Change your public path of webpack-dev-server and it should work
Trying to pin down the source of this error when running jest:
TypeError: (0 , (_jestUtil || _load_jestUtil(...)).validateCLIOptions) is not a function
My directory structure:
root
-test
--spec-files
---*.js
Dev dependencies in my package:
"devDependencies": {
"babel-eslint": "6.1.2",
"babel-jest": "22.1.0",
"chai": "3.5.0",
"chai-as-promised": "5.3.0",
"eslint": "2.13.1",
"eslint-config-airbnb": "6.2.0",
"eslint-plugin-react": "4.3.0",
"jest": "22.1.4",
"jest-cli": "22.1.4",
"jest-runner-eslint": "0.4.0",
"nodemon": "1.12.1",
"nyc": "11.2.1",
"sinon": "2.4.1",
"snyk": "1.69.10",
"spec-xunit-file": "0.0.1-3",
"supertest": "1.2.0",
"supertest-as-promised": "3.2.0",
"xunit-file": "0.0.9"
}
jest.config.js:
module.exports = {
estPathIgnorePatterns: [
'<rootDir>/bower_components/',
'<rootDir>/node_modules/',
'<rootDir>/gulp-tasks/',
],
testMatch: ['<rootDir>/test/spec-files/*.js'],
globalSetup: '<rootDir>/test/setup.js',
};
Running:
./node_modules/.bin/jest --testPathPattern=test/spec-files/.*\\.js$
Ive only noticed one issue opened related to this type of bug: https://github.com/facebook/jest/issues/5740
The cause appears to be having an invalid testPathPattern, however that doesnt seem to be the case for me.
Updating jest and jest-cli to the following fixed the issue:
"jest": "22.4.4",
"jest-cli": "22.4.4",