I have two scripts prod and build as given below and I'm accessing them both as package.json vars for creating another script build_prod as follows:
"prod": "cross-env NODE_ENV=production BABEL_ENV=production",
"build": "webpack",
"build_prod": "npm run $npm_package_scripts_prod $npm_package_scripts_build"
Running npm run build_prod from the terminal works perfectly, as expected. But if I try to nest build_prod in another script, it gives an error - missing script.
ie, After changing build_prod
from npm run $npm_package_scripts_prod $npm_package_scripts_build
to $npm_package_scripts_prod $npm_package_scripts_build
and adding script: "build_final": "npm run $npm_package_scripts_build_prod --config prod.config.js"
and running npm run build_final from terminal.
I searched for some time about nested package.json vars but could not find any information, even in the official documentation of package.json vars.
Do npm support nested variables ? If so, what is the right way of creating nesting scripts ?
Related
I have a normal react setup, without CRA, which means I manually configured webpack and babel etc...
I currently have 2 scripts which run webpack :
package.json :
"scripts": {
"dev": "NODE_OPTIONS='--openssl-legacy-provider --max-old-space-size=8000' webpack --watch --config webpack.dev.js",
"prod": "NODE_OPTIONS='--openssl-legacy-provider' webpack --config webpack.prod.js"
},
when I run npm run prod, the issue does not happen and all the assets get compiled like normal. However, when i run npm run dev, after working for a while (less than an hour), the terminal kills webpack and shows the following:
I'm not sure what is happening here but I saw some recommendations to circumvent the issue by adding --max-old-space-size=8000 to the NODE_OPTIONS in the script.
However the issue persists. Any idea How to deal with it ?
I was trying to run this SVELT GitHub repo on local server:
https://github.com/fusioncharts/svelte-fusioncharts
I tried to launch it with "npm run dev" command. But I am seeing this error:
npm ERR! missing script: dev
I have tried to fix the issue by setting 'ignore-scripts' to false with this command:
npm config set ignore-scripts false
But it doesn't work.
How can I fix the issue?
npm ERR! missing script: dev means you are there isn't a script having dev. You are likely running on an incorrect directory.
Fusion charts seem to work with svelte codesandbox.
npm ERR! missing script: dev means it cannot find a script called dev inside package.json.
That makes sense!
It looks at the package.json inside the svelte-fusioncharts repo. In that file, there is a scripts property.
Notice how that property looks as follows:
"scripts": {
"build": "rollup -c",
"prepublishOnly": "npm run build"
}
It does not contain a dev script. That’s why it says there’s a missing script. Other commands will work, like npm run build or npm run prepublishOnly.
Md. Ehsanul Haque Kanan,
"scripts": {
"build": "cross-env NODE_ENV=production webpack",
"dev": "webpack-dev-server --content-base public" }
The above is the script from the examples folder in the repo: https://github.com/fusioncharts/svelte-fusioncharts/blob/develop/examples/package.json
You have missed out on the "dev" script in your package.json file.
Please check the "package.json" file in your project and just add the "dev" script as in the repo link and then retry.
Alright. I have fixed the issue. I just go inside examples folder. Then I run the following commands:
npm install
npm run dev
I had the same problem.
It is due to changes in script object in package.json by me. I had installed nodemon and to run the code, I changed the script lifecycle events start and dev in package.json to run the code via nodemon.
But even after installing nodemon, it was not reflecting in devDependencies, so I made manual entry in package.json with its version seeing from package-lock.json.
"devDependencies": {
"nodemon":"^2.0.15"
}
Making this arrangement, my code started as expected.
So, check your recent npm package installation and verify its reflection in devDependencies or dependencies in package.json.
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.
I'm a beginner developing with Nodejs and React.
Right now, I've got a first version of my web application which works correctly in development environment, but I'm trying to build a version for production environment but I've got this error
ReferenceError: document is not defined
The scripts of my package.json are:
"scripts": {
"dev-webpack": "webpack-dev-server --hot --mode development",
"clean": "rm -rf ./dist",
"dev": "npm run build-dev && cross-env NODE_ENV=development nodemon --exec babel-node src/server/server.js --ignore ./src/client",
"build-dev": "npm run clean && npm run compile-dev",
"compile-dev": "NODE_ENV=development webpack -d --config ./webpack.config.babel.js --progress",
"compile": "NODE_ENV=production webpack -p --config ./webpack.config.babel.js --progress",
"build": "npm run clean && npm run compile",
"start": "npm run build && node ./dist/assets/js/bundle.js"
},
And I try to create the version for production environment with the command npm run start
I have been looking for information about the problem and it seems it's due because I have no Browserify my web application. But, I don't know how to do this correctly nor the steps to follow to do it correctly.
I am seeking a list of the steps required to build a correct version for production environment.
Edit I:
These are the static files generated with "build" script:
The React application is designed to be run in a browser.
When you run dev-webpack you are running an HTTP server and pointing a browser at it.
When you run build you are creating a static JavaScript file. You need to deploy it to a web server (along with the associated HTML document) and then point a browser at the HTML document.
You are currently trying to execute bundle.js with Node and not a browser.
You need to serve your index.html file. You can use serve to host the HTML file.
What is the difference between npm run serve and npm run dev in vuejs. Why should i use npm run serve command to run the project
npm run serve basically is just saying "npm please run the command I defined under the name serve in package.json" the same happens with npm run dev.
Given this the commands can do the exact same thing, similar things, or very different things. Usually they are a shorthand for running a dev server on localhost, but it’s not a rule, only a convention.
So you'll need to check in your package.json file and look for
"scripts": {
"serve": "[list of commands here]",
"dev": "[list of commands here]"
},