I am npm newbee and trying to have a very simple build proccess with pure npm (without grunt, gulp, etc). All my package json scripts works fine execpt the one responsible to watch SCSS files and run compilers on file change.
Here is my Package.json files which should be self explaining:
{
"name": "test-site.com",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"scss": "node-sass --indent-type tab --indent-width 1 --output-style expanded -o dist/css src/scss",
"autoprefixer": "postcss -u autoprefixer -r dist/css/app.css",
"build:css": "npm run scss && npm run autoprefixer",
"serve": "browser-sync start --server --files 'dist/css/*.css, **/*.html, !node_modules/**/*.html'",
"reload": "browser-sync reload",
"watch:css": "onchange 'src/scss/*.scss' -- npm run build:scss",
"build:all": "npm run build:css",
"watch:all": "npm-run-all -p serve watch:css",
"postinstall": "npm run build:all && npm run watch:all"
},
"author": "Homam",
"license": "ISC",
"devDependencies": {
"autoprefixer": "latest",
"browser-sync": "latest",
"node-sass": "latest",
"npm-run-all": "latest",
"onchange": "latest",
"postcss-cli": "latest"
}
}
The problematic script is "watch:css".
When i change my "index.html" it changes the web page accordingly but there is no change effect when I change any of my SCSS files.
Are you on Windows?
If so, try to replace the single quotes with escaped double quotes as said in the onchange README.
"watch:css": "onchange \"src/scss/*.scss\" -- npm run build:scss",
Might be because
"watch:css": "onchange 'src/scss/*.scss' -- npm run build:scss",
Is referencing build:scss which is not defined? You've defined "scss" and "build:css". Try with:
"watch:css": "onchange 'src/scss/*.scss' -- npm run build:css",
Related
I have 4 packages in my package.json:
"#CT/package-1": "*",
"#CT/package-2": "*",
"#CT/package-3": "*",
"#CT/package-4": "*",
All four packages are not on the NPM registry, but locally linked.
In each package directory I did:
sudo npm link
After that I went into my main project and linked all packages like so:
npm link #CT/package-1
npm link #CT/package-2
npm link #CT/package-3
npm link #CT/package-4
For each command it outputs the linked chain of the sym-links, I checked the paths of each one, and it's correct. If I go in the node_modules folder of my main project and follow #CT/package-X I will end up in my local package directory.
Now I expect that I can run npm i on my main project and it won't try to install those packages from the npm registry. This works for package 2-4, but it does not work for package-1:
npm ERR! code E404
npm ERR! 404 Not Found - GET https://npm.pkg.github.com/#CT%2fpackage-1 - npm package "package-1" does not exist under owner "CT"
As soon as I remove "#CT/package-1": "*", from my package.json, npm i will success, because it seems to right-fully skip package 2-4, just not package-1.
Now I inspected all four package projects, and it makes no sense to me. All projects compile, all package.json contain the correct package name. Here is the package.json of my first faulty package:
{
"name": "#CT/package-1",
"version": "0.0.2",
"description": "",
"main": "dist/plugin.cjs.js",
"module": "dist/esm/index.js",
"types": "dist/esm/index.d.ts",
"unpkg": "dist/plugin.js",
"files": [
"android/src/main/",
"android/build.gradle",
"dist/"
],
"author": "martin-braun",
"license": "ISC",
"keywords": [
"capacitor",
"plugin",
"native"
],
"scripts": {
"lint": "npm run prettier -- --check",
"prettier": "prettier \"**/*.{css,html,ts,js,java}\"",
"build": "npm run prettier && npm run clean && tsc && rollup -c rollup.config.js",
"clean": "rimraf ./dist",
"watch": "tsc --watch",
"prepublishOnly": "npm run build"
},
"devDependencies": {
"#capacitor/android": "^3.0.0",
"#capacitor/core": "^3.0.0",
"#capacitor/docgen": "^0.0.18",
"#ionic/eslint-config": "^0.3.0",
"#ionic/prettier-config": "^1.0.1",
"eslint": "^7.11.0",
"prettier": "~2.2.0",
"prettier-plugin-java": "~1.0.0",
"rimraf": "^3.0.2",
"rollup": "^2.32.0",
"typescript": "~4.0.3"
},
"peerDependencies": {
"#capacitor/core": "^3.0.0"
},
"prettier": "#ionic/prettier-config",
"eslintConfig": {
"extends": "#ionic/eslint-config/recommended"
},
"capacitor": {
"android": {
"src": "android"
}
},
"publishConfig": {
"registry": "https://npm.pkg.github.com/CT"
},
"dependencies": {}
}
.npmrc
registry=https://npm.pkg.github.com/#CT
registry=https://registry.npmjs.org
When I linked the project on my main project it shew the right paths (i.e.)
/Users/mb/Projects/CT/MAIN/node_modules/#CT/package-1 -> /Users/mb/node_module_collections/ekol/lib/node_modules/#CT/package-1 -> /Users/mb/Projects/CT/package-1
What could I try to find the issue? Again, package 2-4 won't cause npm i to fail, but package.json and npmrc look similar. I'm thankful for any advice.
node v13.12.0
I looked at and executed almost every single answer on this post:
The CLI moved into a separate package: webpack-cli
It has not helped.
Allow me to present my case:
So I have developed a container folder, a separate application where I ran npm init -y and then installed the following:
npm install html-webpack-plugin#4.5.0 nodemon webpack#5.3.2 webpack-cli#4.1.0 webpack-dev-server#3.11.0
Then I went into my package.json file and added the start script:
{
"name": "container",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack serve"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"html-webpack-plugin": "^4.5.0",
"nodemon": "^2.0.6",
"webpack": "^5.3.2",
"webpack-cli": "^4.1.0",
"webpack-dev-server": "^3.11.0"
}
}
When I go to terminal and run npm start, this is why I get every single time:
➜ container npm start
> container#1.0.0 start /Users/luiscortes/Projects/ecommRS/container
> webpack serve
[webpack-cli] The command moved into a separate package: #webpack-cli/serve
? Would you like to install #webpack-cli/serve? (That will run npm install -D #webpack-cli/serve) (Y/n) › true
And yes even if I choose Y or true and it runs its npm install -D #webpack-cli/serve, when I go back to running npm start it just gives me the same error over and over again.
Apparently, this is an issue with webpack-cli#4.1.0. I upgraded to webpack-cli#4.2.0 and now it works.
I am using A2hosting and trying to configure cron worker, but no luck yet.
I followed this article to install node and npm, which is basically list of commands below
cd ~
wget https://nodejs.org/dist/v12.9.1/node-v12.9.1-linux-x64.tar.xz
tar xvf node-v12.9.1-linux-x64.tar.xz
mv node-v12.9.1-linux-x64 nodejs
mkdir ~/bin
cp nodejs/bin/node ~/bin
cd ~/bin
ln -s ../nodejs/lib/node_modules/npm/bin/npm-cli.js npm
I have tried multiple commands
npm run --prefix ~/cloudflare-upload-tool start which produces /bin/bash: npm: command not found
and
~/nodejs/bin/npm run --prefix ~/cloudflare-upload-tool start which produces /usr/bin/env: node: No such file or directory
Both commands run fine in terminal, could you tell what are my options to fix this?
package.json
{
"name": "cloudflare-upload-tool",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "env-cmd node index.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^0.20.0",
"cloudflare": "^2.7.0",
"env-cmd": "^10.1.0",
"form-data": "^3.0.0",
"fs": "0.0.1-security",
"jsonwebtoken": "^8.5.1",
"path": "^0.12.7",
"tus-js-client": "^2.2.0"
}
}
Support told that this approach is not supported. Ended up creating node js app using UI, stopping it as we don't need to expose it and using command for cron worker below as suggested in other article
source /home/<USERNAME>/nodevenv/cloudflare_upload_tool/10/bin/activate && cd /home/<USERNAME>/cloudflare_upload_tool && npm run start
If it's a Gatsby, webpack or npm issue i don't understand yet.
I did these commands in terminal and they seem to have started the issue, trying to fix a material-ui "Popper" module that had a "could not find module" error.
npm install react-popper#next --save
npm install avj
npm install --save-dev webpack
npm install & npm update
Terminal:
error There was a problem loading the local develop command. Gatsby
may not be installed. Perhaps you need to run "npm install"?
Error: Cannot find module 'webpack/lib/removeAndDo'
package.json
{
"name": "auto-club-reviews",
"description": "Auto Club Reviews Blog",
"version": "1.0.0",
"author": "Sofianu Alin",
"dependencies": {
"#material-ui/core": "^1.4.3",
"#material-ui/icons": "^1.1.0",
"gatsby": "^1.9.277",
"gatsby-link": "^1.6.46",
"gatsby-plugin-feed": "^1.3.25",
"gatsby-plugin-google-analytics": "^1.0.31",
"gatsby-plugin-offline": "^1.0.18",
"gatsby-plugin-react-helmet": "^2.0.11",
"gatsby-plugin-react-next": "^1.0.11",
"gatsby-plugin-sharp": "^1.6.48",
"gatsby-plugin-typography": "^1.7.19",
"gatsby-remark-copy-linked-files": "^1.5.37",
"gatsby-remark-images": "^1.5.67",
"gatsby-remark-responsive-iframe": "^1.4.20",
"gatsby-remark-smartypants": "^1.4.12",
"gatsby-source-contentful": "^1.3.54",
"gatsby-source-filesystem": "^1.5.39",
"gatsby-transformer-remark": "^1.7.44",
"gatsby-transformer-sharp": "^1.6.27",
"lodash": "^4.17.10",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-helmet": "^5.2.0",
"react-hover": "^1.3.2",
"react-popper": "^1.0.2",
"typeface-roboto": "0.0.54"
},
"devDependencies": {
"eslint": "^5.3.0",
"eslint-plugin-react": "^7.10.0",
"gh-pages": "^1.2.0",
"html-webpack-plugin": "^3.2.0",
"prettier": "^1.14.2",
"webpack": "^4.16.5",
"webpack-command": "^0.4.1",
"webpack-dev-middleware": "^3.1.3",
"webpack-dev-server": "^3.1.5"
},
"homepage": "https://github.com/gatsbyjs/gatsby-starter-blog#readme",
"keywords": [
"gatsby"
],
"license": "MIT",
"main": "n/a",
"repository": {
"type": "git",
"url": "git+https://github.com/gatsbyjs/gatsby-starter-blog.git"
},
"scripts": {
"dev": "gatsby develop",
"lint": "./node_modules/.bin/eslint --ext .js,.jsx --ignore-pattern public .",
"test": "echo \"Error: no test specified\" && exit 1",
"format": "prettier --trailing-comma es5 --no-semi --single-quote --write 'src/**/*.js' 'src/**/*.md'",
"develop": "gatsby develop",
"build": "gatsby build",
"deploy": "gatsby build --prefix-paths && gh-pages -d public",
"fix-semi": "eslint --quiet --ignore-pattern node_modules --ignore-pattern public --parser babel-eslint --no-eslintrc --rule '{\"semi\": [2, \"never\"], \"no-extra-semi\": [2]}' --fix gatsby-node.js"
}
}
Also tried to:
delete node_modules then npm install;
uninstall "webpack-cli": "^3.1.0" and install webpack-commander;
uninstall extract-text-webpack-plugin that seemed to be complained about in terminal;
Any ideas comrades?
Have you been experimenting with Gatsby v2? Your package.json shows React v16, which is a peerDependency of Gatsby v2, but not of Gatsby v1. In Gatsby v1 (which is what you have in package.json) you should not install React directly, it's installed as a dependency of Gatsby.
Webpack is also (both v1 and v2) a dependency of Gatsby. I don't think you should have it in package.json as a top level dependency.
I would recommend starting with a clean Gatsby starter, then copying your gatsby-node.js, gatsby-config.js, components, content, etc, into that project. Leave the package.json file. Then run npm install --save for every package that you explicitly import or require. Hopefully that gets you back to a working site.
Sidenote, personally, I would also recommend yarn over npm.
Gatsby clean-cache
Then delete node modules
and then
yarn start/npm install
I have a package.json file like this
{
"name": "E2E",
"version": "1.0.0",
"description": "AngularJS E2E testing",
"main": "conf.js",
"scripts": {
"postinstall": "node_modules/protractor/bin/webdriver-manager update",
"test": "echo \"Error: no test specified\" && exit 1"
},
"license": "ISC",
"devDependencies": {
"protractor": "^2.2.0"
}
}
when running command npm install after protractor is installed its throwing error
node_modules/protractor/bin/webdriver-manager update
'node_modules' is not recognized as an internal or external command, operable program or batch file
Ok found the fix, I need to run it as node command like this
"postinstall": "node node_modules/protractor/bin/webdriver-manager update",
Try prepending the path to executable with a dot followed by a slash:
./node_modules/protractor/bin/webdriver-manager update
The problem is that you need to be in the folder where that command is installed before you call it. Assuming you are using Windows, this can be solved by running a simple batch file:
#echo off
call npm install -g protractor
call npm install
cd C:/Users/%USERNAME%/AppData/Roaming/npm/node_modules/protractor/selenium/
call webdriver-manage update
You should be able to run a batch file from anywhere. In fact, the entire Protractor testing process can be automated with a batch file. You just need to add Grunt, load-grunt-tasks, grunt-protractor-runner, jasime, and protractor-jasmine2-html-reporter to your package.json:
{
"name": "yourproject",
"version": "0.0.1",
"dependencies": { },
"devDependencies": {
"grunt": "~0.4.1",
"load-grunt-tasks": "~1.0.0",
"grunt-protractor-runner": "~2.1.0",
"jasmine": "~2.3",
"protractor-jasmine2-html-reporter": "~0.0.5"
},
"engines": {
"node": ">=0.12.0"
}
}
After you configure Protractor and writing some tests, you can then call the whole process with one simple batch file:
#echo off
cd %CD%
#echo running tests
call grunt
#echo Opening test results in browser
start "" %CD%\tests\reports\index.html