NPM build package after install - javascript

I made a package with react and typescript. Because of how typescript handles the publishing of the classes and interfaces, I need to build the package and commit the built files with every change.
Is there a way to tell npm, that it has to build the specific package after "npm install" or "yarn install"?
I tried adding "postinstall": "npm run build" and "prepare": "npm run build" but it seems, that the project, in which the package is installed, runs this commands in his own root directory, so it builds itself, instead of just the package.
I thought of something like this:
Coding in a project
yarn add packageX
yarn install
packageX runs npm run build in its own directory
make changes in packageX
run yarn update packageX
packageX runs npm run build in its own directory
run yarn build in project root
Project builds itself
Is there a way to accomplish that?
Thanks for your answers.

Related

How to add node_modules folder in a global npm package?

I have created an npm package which has a lot of dependencies, but when I test my app with npm install -g ./ the app gets added in the global npm directory but without the node-modules folder. Thus when the app is run through the terminal, although the app is recognized, it doesn't work because none of the dependency is installed.
How can I make sure to make app installs node-modules when its published in the npm registry
If I install the node-modules independently on the project folder by doing npm install, the app works. I don't want the user to install the packages independently. What I am expecting is the full installation of the app and the required dependencies only with npm install -g my_package
I have also used yarn as the package manager, and the dependencies are listed under "dependencies" in package.json file. The "bin" field in the package.json file points to our app, which can also be run as node bin/index.js. This app is also recognized by the terminal, the only problem is the dependencies
I think you can use this command npm install --save then it might work.

NPM: How to add a "post-install" hook that's not run for package consumers?

I'm writing an NPM module.
I'd like to automate some tasks after every npm install when developing the module locally.
However, I do not want these steps to be performed when consumers of my library perform an npm install and I do not want these steps to be performed after every npm pack and npm publish that I make during development (so this rules-out using the prepublish and prepare scripts).
What's the easiest way to achieve this?
(I've considered: (a) publish a separate package.json w/o the install script, (b) create a ./install.sh in the project's root that users call instead of npm install... but this kinda sucks.)
The install:local script here will run after npm install is run locally only (i.e. not when consumers install your package).
package.json:
{
...,
"scripts": {
"prepare": "case \"$npm_config_argv\" in *\"\\\"install\\\"\"*|*\"\\\"ci\\\"\"*) npm run install:local ;; esac",
"install:local": "echo 'npm install' was run directly in the project, and not by a library consumer!",
}
}

How to fix "'BROWSER' is not recognized as an internal or external command"?

I am trying to run react-d3-tree-demo following this README.md at https://github.com/bkrem/react-d3-tree-demo
After following the other steps, I got stuck on the second step of trying to run the app locally. The command line returns an error: "'BROWSER' is not recognized as an internal or external command, operable program or batch file," when I try to execute "npm run dev" in the react-d3-tree-demo directory that I cloned from the same repo.
The README.md page instructs to run "npm run dev" in both the react-d3-tree and react-d3-tree-demo directories. I actually got an error when I did that command in the react-d3-tree directory where the command line said the linebreak was incorrect, but I went into the eslintrc.js file and added "'linebreak-style': 0," in the module exports which resolved the error. I've tried turning off my Avast antivirus software which was suggested on another page. Nothing has worked so far.
To reproduce my problem:
Demo:
Clone this repo: git clone https://github.com/bkrem/react-d3-tree-demo.git
cd react-d3-tree-demo
Run yarn or npm install OR run bash ./setup.sh and skip to Running locally
React-D3-Tree library:
Inside the react-d3-tree-demo directory, clone the library: git clone https://github.com/bkrem/react-d3-tree.git
Run yarn or npm install
Running locally:
Set up 2 terminal windows, one in the react-d3-tree-demo directory, the other in react-d3-tree-demo/react-d3-tree (i.e. the sub-directory into which we cloned the library itself)
Run yarn dev/npm run dev in each
Any changes made to the demo app or the library should now automatically rebuild the library and reload the app with the fresh build (via nodemon).
I expect the react app to open a page at localhost:8000 that looks like this: https://bkrem.github.io/react-d3-tree-demo/ however, I get a message from the command line that was detailed earlier. I'm not sure why they told me to clone react-d3-tree inside the demo, I'd appreciate any explanation of that also.
Do an npm install of cross-env in your cloned repo:
npm install --save cross-env
Then in your cloned repo, open up package.json and change dev to this:
"dev": "cross-env BROWSER=none yarn clean:lib && webpack --progress --colors --watch --env dev",
Basically adding this to the beginning of the command: cross-env BROWSER=none
BROWSER is an environment variable, and you can use the cross-env package to properly handle it.
Now try running npm run dev again, and it should work.
There are two fixes I found that work perfectly well
Install cross-env (npm package cross-env) npm install cross-env then you change your dev script to
"electron-dev": "concurrently \"cross-env BROWSER=none yarn start\" \"wait-on http://localhost:3000 && electron .\"",
Install concurrently and run this (on windows though)
"electron-dev": "concurrently \"SET BROWSER=none&&npm run start\" \"wait-on http://localhost:3000 && electron .\""
please note that you also have to install concurrently if not already installed
i success using cross-env, so try this one:
"dev": "concurrently -k "cross-env BROWSER=none npm start" "npm:electron"",
"electron": "wait-on http://localhost:3000 && electron ."
Try this: paste this BROWSER=none in your project's .env file then save and re-run the project. Because maybe this a path related issue.

'react-scripts' is not recognized as an internal or external command

I've got a maven project, within which is JavaScript project cloned as a git sub-module. So the directory structure looks like mavenapp/src/main/javascript/[npm project files]
Inside my package.json, the test looks like this:
"test": "react-scripts test --env=jsdom",
but when I try to run npm test, it says
'react-scripts' is not recognized as an internal or external command,
Interestingly, when I clone the javascript project independently I don't get this error. I've tried re-running npm install.
NPM version: 5.5.1
Node.js version: 9.3.0
It is an error about react-scripts file missing in your node_modules/ directory at the time of installation.
Check your react-script dependency is avaliable or not in package.json.
If not available then add it manually via:
npm install react-scripts --save
If react-scripts is present in package.json, then just type this command
npm install
If react-scripts is not present in package.json, then you probably haven't installed it. To do that, run:
npm install react-scripts --save
Try:
rm -rf node_modules && npm install
Wiping node_modules first, often tends to fix a lot of weird, package related issues like that in Node.
Running these commands worked for me:
npm cache clean --force
npm rebuild
npm install
In my situation, some problems happened with my node package. So I run npm audit fix and it fixed all problems
2023 answer: simply remove node_modules folder and run
npm install
or:
yarn
(depends on you're using npm or yarn)
it worked for me!
no need to do more!!!
It waste a lot of my time until I discover this, I got headache...
Faced the same problem, although I am using yarn.
The following worked for me:
yarn install
yarn start
To avoid this issue to re-occur or you face this issue whenever anyone downloads your project fresh.
It's better to add this in dev dependencies using this command:
npm install react-scripts --save-dev
It will get added like this.
"devDependencies": {
"react-scripts": "^4.0.3"
}
Do Commit and push your code.
Running the npm update command solved my problem.
To rectify this issue follow the following steps
run npm install
then run npm start
This worked fine for me
For Portable apps change
package.json
as follows
"scripts": {
"start": "node node_modules/react-scripts/bin/react-scripts start",
"build": "node node_modules/react-scripts/bin/react-scripts build",
"test": "node node_modules/react-scripts/bin/react-scripts test",
"eject": "node node_modules/react-scripts/bin/react-scripts eject"
}
react-scripts should be listed as a dependency when you run npx create-react-app your-app, but for some reason, it gets this error. I will list some steps that I followed that may help you fix this error:
First, check at your React package.json if there is react-scripts or not:
for example, you should see:
"dependencies": {
...
"react-scripts": "4.0.3",
...
},
If it's already there, now try to re-install your dependencies with npm i
If you still get the same error, try to remove your node_modules with rm -rf node_modules/, then re-install your dependencies with npm i
BUT if the package react-scripts wasn't in your package.json file, you should install it by your package manager like:
npm i react-scripts
then try to start your app with npm start
This is how I fix it
Check and Update the path variable (See below on how to update the path variable)
Delete node_modules and package-lock.json
run npm install
run npm run start
if this didn't work, try to install the nodejs and run repair
or clean npm cache npm cache clean --force
To update the path variable
press windows key
Search for Edit the system environmental variable
Click on Environment Variables...
on System variable bottom section ( there will be two section )
Select Path variable name
Click Edit..
Check if there is C:\Program Files\nodejs on the list, if not add this
I uninstalled my Node.js and showed hidden files.
Then, I went to C:\Users\yourpcname\AppData\Roaming\ and deleted the npm and npm-cache folders.
Finally, I installed a new version of Node.js.
I faced the same issue. I solved it using npm audit fix --force
I had the same issue. I did everything which suggested here. but nothing worked. I had installed react-scripts in my node_modules also used cache but all in vain. then I just npx create-react-app and moved all my code into this new folder and all worked.
npx create-react-app myapp
As for me i managed to fix this issue by install this :
npm audit fix --force
and it work after that.
This is not recommended, so plz don't down arrow, but for troubleshooting..
react-scripts is not recognized as an internal or external command is related to npm.
I would update all of my dependencies in my package.json files to the latest versions in both the main directory and client directory if applicable.
You can do this by using an asterisk "*" instead of specifying a specific version number in your package.json files for your dependencies.
For Example:
"dependencies": {
"body-parser": "*",
"express": "*",
"mongoose": "*",
"react": "*",
"react-dom": "*",
"react-final-form": "*",
"react-final-form-listeners": "*",
"react-mapbox-gl": "*",
"react-redux": "*",
"react-responsive-modal": "*",
}
I would then make sure any package-lock.json were deleted and then run npm install and yarn install in both the main directory and the client directory as well if applicable.
You should then be able to run a yarn build and then use yarn start to run the application.
Use git bash or windows cmd with admin rights to run npm install while fixing this issue, running these commands inside the editor's terminals doesn't help.
first run:
npm ci
then:
npm start
In my case, the problem had to do with not having enough file permissions for some files the react-scripts package installation was going to write to. What solved it was running git bash as an administrator and then running npm install --save react-scripts again.
I have tried many of the solutions to this problem found on line, but in my case nothing worked except for reinstalling NVM for Windows (which I am using to manage multiple Node versions). In the installer, it detects installed Node versions and asks the user if they wish for NVM to control them. I said yes and NVM fixed all PATH issues. As a result, things worked as before. This issue may have multiple causes, but corrupted PATH is definitely one of them and (re)installing NVM fixes PATH.
This is rather old question but this might be of some help for future reference. Delete node_modules folder and run npm install again. Worked for me.
In my case , I edited my files on Linux where I had node v14.0.5 installed, when I rebooted to Windows where I had node v14.0.3 I got the same error. So I updated the node version on windows and all went fine for me.
had similar issue.. i used yarn to fix it.
i noticed that react-scripts was not found in my node modules so i decided to download it with npm but i seem to be failing too. so i tried yarn ( yarn add react-scripts) and that solved the nightmare! Hope this work for you as well. Happy debuging folks.
For me, I just re-installed the react-scripts instead of react-scripts --save.
Started getting this error in Azure DevOps yesterday out of nowhere when running npm run build:
'react-scripts' is not recognized as an internal or external command, operable program or batch file.
However when looking at npm ci that completed it was full of errors like:
FetchError: Invalid response body while trying to fetch
https://registry.npmjs.org/#babel%2fcompat-data: ENOENT: no such file
or directory, lstat
'D:\a\1.npm_cacache\content-v2\sha512\58\0b\dc7dce0b33e86d97736b3c419005951e32af28dda3f5b8c746f16d53d4baed1dc2fd2493e9310f744696008400bf8c91ca84f9fb3ebf541ba93a541b144a'
When commenting out the cache everything started working again:
npm_config_cache: $(Pipeline.Workspace)/.npm
- task: Cache#2
inputs:
key: 'npm | "$(Agent.OS)" | $(clientApp)\package-lock.json'
restoreKeys: |
npm | "$(Agent.OS)"
path: $(npm_config_cache)
displayName: Cache npm
The weird thing is that it has worked for over a year up until yesterday (2021-12-02) and we use the exact same code for caching as Microsoft has documented.
https://learn.microsoft.com/en-us/azure/devops/pipelines/release/caching?view=azure-devops#nodejsnpm
Noting Degraded or Unhealthy on Azure DevOps Status
https://status.dev.azure.com/
I had the same problem and I tried the above thing, but that did not work some how. So,
I just typed yarn. And it went.
When I make a new project using React, to install the React modules I have to run "npm install" (PowerShell) from within the new projects ClientApp folder (e.g. "C:\Users\Chris\source\repos\HelloWorld2\HelloWorld2\ClientApp"). The .NET core WebApp with React needs to have the React files installed in the correct location for React commands to work properly.
This worked for me:
Go to the project folder in CLI and type npm install.Go for a similar command if
using yarn etc.
Then type npm start if you are using Npm. Go for a similar command if using yarn
etc.
The file starts working

"Npm install --global" and "--save" together?

I was wondering if makes any sense to use in the npm install command the --global and the --save parameters all together. For example:
npm install gulp -g -s
As far as I know there is no package.json in the npm system folder, so I suppose the answer is "no", but I want to clear all doubt.
The npm install command does not support installing a module both globally and save it to the package.json in one step.
There is, however, a way to install a module globally indirectly. The package.json supports a preinstall property like so:
"scripts": {
"preinstall": "npm install -g gulp"
}
As soon as you execute npm install, gulp will be installed globally. Please note that your current user then needs permission to write to your global node module directory.

Categories