I'm trying to configure PostCSS Autoprefixer but it doesn't work. It should output new style.prefix.css file in the same 'css' folder. Please help me to understand, what is wrong with my npm script/setup
Here is my package.json
{
"name": "sb-demo-website",
"version": "1.0.0",
"description": "demo website",
"main": "index.js",
"scripts": {
"sass": "node-sass-chokidar sass/main.scss css/style.css -w --recursive --skip-initial",
"compile-sass": "node-sass-chokidar sass/main.scss css/style.comp.css",
"prefix-css": "postcss css/style.comp.css -o css/style.prefix.css --use autoprefixer"
},
"repository": {
"type": "git",
"url": ""
},
"author": "tk",
"license": "ISC",
"bugs": {
"url": ""
},
"homepage": "",
"browserslist": "last 3 versions",
"devDependencies": {
"autoprefixer": "^10.0.0",
"node-sass": "^4.14.1",
"node-sass-chokidar": "^1.5.0",
"postcss": "^8.0.5",
"postcss-cli": "^7.1.2"
}
}
and here is output when I run my script:
$ npm run prefix-css
> sb-demo-website#1.0.0 prefix-css C:\Users\tk\Documents\Study\web\css\demo1
> postcss css/style.comp.css -o css/style.prefix.css --use autoprefixer
Error: PostCSS plugin autoprefixer requires PostCSS 8. Update PostCSS or downgrade this plugin.
at Processor.normalize (C:\Users\tk\Documents\Study\web\css\demo1\node_modules\postcss-cli\node_modules\postcss\lib\processor.js:167:15)
at new Processor (C:\Users\tk\Documents\Study\web\css\demo1\node_modules\postcss-cli\node_modules\postcss\lib\processor.js:56:25)
at postcss (C:\Users\tk\Documents\Study\web\css\demo1\node_modules\postcss-cli\node_modules\postcss\lib\postcss.js:55:10)
at C:\Users\tk\Documents\Study\web\css\demo1\node_modules\postcss-cli\index.js:216:14
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! sb-demo-website#1.0.0 prefix-css: `postcss css/style.comp.css -o css/style.prefix.css --use autoprefixer`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the sb-demo-website#1.0.0 prefix-css 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! C:\Users\tk\AppData\Roaming\npm-cache\_logs\2020-09-18T17_50_55_597Z-debug.log
Any help is much appreciated
Looks like latest Autoprefixer v10.0.0 is kinda broken right now. Downgrading it to version 9.8.6 resolved mentioned above issue.
I'm posting this as an answer in case someone else experience similar errors.
Related
I'm new to vue and I'm having different errors trying to create new projects with vue create and executing npm run serve.
I've already tried reinstalling node and vue. Changed some PATH, but nothing worked.
First I created the application with:
vue create routing-overview
Then i got this in the final part:
added 1259 packages from 656 contributors in 37.319s
🚀 Invoking generators...
📦 Installing additional dependencies...
npm ERR! code EEXIST
npm ERR! path C:\Users\USER\Estudos\igti\m04-vue\routing-overview\node_modules\#babel\parser\bin\babel-parser.js
npm ERR! dest C:\Users\USER\Studies\m04-vue\routing-overview\parser
npm ERR! EEXIST: file already exists, cmd shim 'C:\Users\USER\Studies\m04-vue\routing-overview\node_modules\#babel\parser\bin\babel-parser.js' -> 'C:\Users\USER\Studies\m04-vue\routing-overview\parser'
npm ERR! File exists: C:\Users\USER\Studies\m04-vue\routing-overview\parser
npm ERR! Remove the existing file and try again, or run npm
npm ERR! with --force to overwrite files recklessly.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\USER\AppData\Roaming\npm-cache\_logs\2021-09-10T19_38_16_412Z-debug.log
ERROR command failed: npm install --loglevel error
Opening the project folder on VS Code I have this error in the first import of main.js:
Parsing error: Cannot find module 'babel-eslint'
Require stack:
- C:\Users\USER\Studies\m04-vue\routing-overview\node_modules\vue-eslint-parser\index.js
- C:\Users\USER\Studies\m04-vue\routing-overview\node_modules\eslint-plugin-vue\lib\utils\index.js
- C:\Users\USER\Studies\m04-vue\routing-overview\node_modules\eslint-plugin-vue\lib\rules\array-bracket-newline.js
- C:\Users\USER\Studies\m04-vue\routing-overview\node_modules\eslint-plugin-vue\lib\index.js
- C:\Users\USER\Studies\m04-vue\routing-overview\node_modules\eslint\lib\cli-engine\config-array-factory.js
- C:\Users\USER\Studies\m04-vue\routing-overview\node_modules\eslint\lib\cli-engine\cascading-config-array-factory.js
- C:\Users\USER\Studies\m04-vue\routing-overview\node_modules\eslint\lib\cli-engine\cli-engine.js
- C:\Users\USER\Studies\m04-vue\routing-overview\node_modules\eslint\lib\cli-engine\index.js
- C:\Users\USER\Studies\m04-vue\routing-overview\node_modules\eslint\lib\api.js
- c:\Users\USER\.vscode\extensions\dbaeumer.vscode-eslint-2.1.25\server\out\eslintServer.js
And when I try to npm run serve, i have a different error:
> routing-overview#0.1.0 serve C:\Users\USER\Studies\m04-vue\routing-overview
> vue-cli-service serve
internal/modules/cjs/loader.js:892
throw err;
^
Error: Cannot find module '#vue/cli-plugin-babel'
Require stack:
- C:\Users\USER\Studies\m04-vue\routing-overview\node_modules\#vue\cli-service\lib\Service.js
- C:\Users\USER\Studies\m04-vue\routing-overview\node_modules\#vue\cli-service\bin\vue-cli-service.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:889:15)
at Function.Module._load (internal/modules/cjs/loader.js:745:27)
at Module.require (internal/modules/cjs/loader.js:961:19)
at require (internal/modules/cjs/helpers.js:92:18)
at idToPlugin (C:\Users\USER\Studies\m04-vue\routing-overview\node_modules\#vue\cli-service\lib\Service.js:145:14)
at C:\Users\USER\Studies\m04-vue\routing-overview\node_modules\#vue\cli-service\lib\Service.js:184:20
at Array.map (<anonymous>)
at Service.resolvePlugins (C:\Users\USER\Studies\m04-vue\routing-overview\node_modules\#vue\cli-service\lib\Service.js:170:10)
at new Service (C:\Users\USER\Studies\m04-vue\routing-overview\node_modules\#vue\cli-service\lib\Service.js:32:25)
at Object.<anonymous> (C:\Users\USER\Studies\m04-vue\routing-overview\node_modules\#vue\cli-service\bin\vue-cli-service.js:15:17) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'C:\\Users\\USER\\Studies\\m04-vue\\routing-overview\\node_modules\\#vue\\cli-service\\lib\\Service.js',
'C:\\Users\\USER\\Studies\\m04-vue\\routing-overview\\node_modules\\#vue\\cli-service\\bin\\vue-cli-service.js'
]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! routing-overview#0.1.0 serve: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the routing-overview#0.1.0 serve 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! C:\Users\USER\AppData\Roaming\npm-cache\_logs\2021-09-10T19_48_28_445Z-debug.log
And this is what I have on package.json:
{
"name": "routing-overview",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
I have no idea what is the problem. Any help is very much appreciated.
Try running:
$ npm install
in the same folder of your package.json file, then try it again.
Have you tried updating npm and node versions?. It's possible you need to update them.
Also, you can try cleaning npm cache data: npm cache clean --force . or you can do it manually by locating appData folder and then \npm-cache folder and delete it. then try running vue create routing-overview again
I was able to fix the problem, even not having a clue about what exactly was wrong.
I uninstalled vue and then Node from my PC. After that, I deleted any trace of node or npm from my PC following the comments from this post.
Then installed Node again and #vue/cli. Used npm init to create a new package.JSON and everything is working as expected right now.
Thanks for the help!
I'm trying to create an application using Django framework as a back-End and React.js as the front-End. the django portion works just fine, but when trying to integrate the react with my app. I get npm ERR! code ELIFECYCLE
npm ERR! errno 2. I am fairly new to this technology and I don't quiet understand where the error is coming from.
I tried cleaning up the cache and deleting the node_modules repo and then npm install but it didn't work. so i turn to you asking for help skilled programmers
this the error i get:
ERROR in Entry module not found: Error: Can't resolve './gentelella/frontend/src/index.js' in 'C:\Users\USER\Desktop\finale\django-gentelella\gentelella'
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! gentelella#1.0.0 build: `webpack --mode production ./gentelella/frontend/src/index.js --output ./gentelella/frontend/static/frontend/main.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the gentelella#1.0.0 build 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! C:\Users\USER\AppData\Roaming\npm-cache\_logs\2019-05-22T10_24_53_635Z-debug.log
and this is the package.json:
{
"name": "gentelella",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-dom": "^16.8.6"
},
"devDependencies": {
"#babel/core": "^7.4.4",
"#babel/preset-env": "^7.4.4",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.6",
"babel-plugin-transform-class-properties": "^6.24.1",
"webpack": "^4.32.0",
"webpack-cli": "^3.3.2"
},
"scripts": {
"dev": "webpack --mode development ./gentelella/frontend/src/index.js --output ./gentelella/frontend/static/frontend/main.js",
"build": "webpack --mode production ./gentelella/frontend/src/index.js --output ./gentelella/frontend/static/frontend/main.js"
},
"keywords": [],
"author": "",
"license": "ISC"
}
It seems to me like your path is wrong. Try using removing the gantelella folder from the path, so this leaves 'frontend/src/index.js'.
This assumes you have structured your folders like this:
C:\Users\USER\Desktop\finale\django-gentelella\gentelella\frontend\src\index.js
I am trying to build a project for the first time and I am getting an error message.
Insufficient number of arguments or no entry found.
Alternatively, run 'webpack(-cli) --help' for usage info.
Hash: 83fdf40d8aadb2841816
Version: webpack 4.18.0
Time: 180ms
Built at: 09/11/2018 4:55:53 AM
ERROR in Entry module not found: Error: Can't resolve './src' in '/home/baudhi/website'
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! website#15.19.1 build: `webpack --mode production`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the website#15.19.1 build 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! /home/baudhi/.npm/_logs/2018-09-11T11_55_53_650Z-debug.log
The ebook I am reading has asked me to type 'npm run build' but it is not working. any help pls.
My package.json file looks like the following:
{
"name": "website",
"version": "15.19.1",
"description": "just practice",
"main": "main.js",
"scripts": {
"develop": "webpack --mode development --watch",
"build": "webpack --mode production"
},
"author": "pebaudhi",
"license": "ISC",
"devDependencies": {
"webpack": "^4.18.0",
"webpack-cli": "^3.1.0"
},
"dependencies": {
"jquery": "^3.3.1"
}
}
And my directory structure is:
/usr/baudhi/website/.babelrc
/usr/baudhi/website/package.json
/usr/baudhi/website/jquery-3.3.1.js
/usr/baudhi/website/src/main.js
/usr/baudhi/website/dist/main.js
node -v
v10.7.0
Thank you very much for helping me.
If you're using Webpack 4 the configuration has been defaulted. Hence, you don't need to provide a webpack.config.json file but you're project needs to follow the default config.
The default entry point in Webpack 4 is ./src/index.js. So either rename ./src/main.js or create webpack.config.js file with the following minimum.
module.exports = {
entry: './src/main.js'
};
This question already has answers here:
Angular2 QuickStart npm start is not working correctly
(32 answers)
Closed 6 years ago.
I got error, when I create angular 2 application. I follow link create sample application. when I run
npm start
I got bellow error,
events.js:154
throw er; // Unhandled 'error' event
^
Error: watch node_modules/weinre/web/weinre/target/WiRuntimeImpl.amd.js ENOSPC
at exports._errnoException (util.js:856:11)
at FSWatcher.start (fs.js:1313:19)
at Object.fs.watch (fs.js:1341:11)
at createFsWatchInstance (/home/mts/project/testSails1/frontend/node_modules/chokidar/lib/nodefs-handler.js:37:15)
at setFsWatchListener (/home/mts/project/testSails1/frontend/node_modules/chokidar/lib/nodefs-handler.js:80:15)
at FSWatcher.NodeFsHandler._watchWithNodeFs (/home/mts/project/testSails1/frontend/node_modules/chokidar/lib/nodefs-handler.js:228:14)
at FSWatcher.NodeFsHandler._handleFile (/home/mts/project/testSails1/frontend/node_modules/chokidar/lib/nodefs-handler.js:255:21)
at FSWatcher.<anonymous> (/home/mts/project/testSails1/frontend/node_modules/chokidar/lib/nodefs-handler.js:473:21)
at FSReqWrap.oncomplete (fs.js:82:15)
I got npm logs like this,
npm
ERR! Linux 3.19.0-51-generic
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "lite"
npm ERR! node v5.6.0
npm ERR! npm v3.8.0
npm ERR! code ELIFECYCLE
npm ERR! frontend#1.0.0 lite: `lite-server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the frontend#1.0.0 lite script 'lite-server'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the frontend package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! lite-server
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs frontend
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls frontend
npm ERR!
There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /home/mts/project/testSails1/frontend/npm-debug.log
npm run lite exited with code 1
How I solve this?
That means you have already run the app, then you attempted to run it one more time without stopping the last run. Therefore, it was conflicted. You must stop the last run <=> click the stop button (red-square button on debug panel).
My previous package.json is,
{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"typings": "typings",
"postinstall": "typings install"
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.8",
"systemjs": "0.19.22",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.2",
"zone.js": "0.5.15"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.1.0",
"typescript": "^1.8.2",
"typings":"^0.6.8"
}
}
I added to package.json like this,
{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"start": "concurrently \"npm run tsc:w\" \"npm run http\" ",
"tsc": "tsc",
"tsc:w": "tsc -w",
"http": "http-server -p 3000 -a 127.0.0.1 -o",
"typings": "typings",
"postinstall": "typings install"
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.8",
"systemjs": "0.19.22",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.2",
"zone.js": "0.5.15"
},
"devDependencies": {
"concurrently": "^2.0.0",
"http-server": "^0.9.0",
"typescript": "^1.8.2",
"typings":"^0.6.8"
}
}
now project working find.
there are change only lite ==> http then working find
npm install doesn't seem to work if I depend on a local package that itself depends on another local package. I'm using npm version 2.5.1.
Here's what I have:
package.json for /src/modules/moduleA:
{
"name": "moduleA",
"version": "0.0.1",
...
"dependencies": {
"bluebird": "^2.9.1",
"nodemailer": "^1.3.0"
}
}
package.json for /src/modules/moduleB:
{
"name": "moduleB",
"version": "1.0.0",
...
"dependencies": {
"nconf": "~0.6.7",
"moduleA": "../moduleA"
}
}
package.json for /src/apps/coolApp:
{
"name": "coolApp",
"version": "1.0.0",
...
"dependencies": {
"mysql": "~2.4.2",
"request": "~2.40.0",
"cheerio": "~0.17.0",
"async": "~0.9.0",
"expand-url": "0.1.3",
"moduleB": "../../modules/moduleB"
}
}
Now if I try to npm install :
cd /src/modules/moduleA
npm install
[success, yay!]
cd /src/modules/moduleB
npm install
[success, yay!]
cd /src/apps/coolApp
npm install
npm ERR! addLocal Could not install /src/node/apps/moduleA
npm ERR! enoent ENOENT, open '/src/node/apps/moduleA'
npm ERR! enoent This is most likely not a problem with npm itself
npm ERR! enoent and is related to npm not being able to find a file.
[oh no!]
For some reason, npm is trying to install moduleA for coolApp, even though it doesn't need to directly, and also, it is using the relative path string as it is literally specified in the package.json file for moduleB, even though that isn't valid for coolApp since it is in a relatively different location.
I found that if you specify the local modules with "file:" before the path, everything works fine. Yay
Like this:
"moduleB": "file:../../modules/moduleB"