I am looking for a clear answer on how the stdout and stderr work when developing a npm cli module.
I would like to print out everything exactly as it is when I run command with child_process.spawn.
I managed to output the git clone command with the --progress options. Now I want to output the npm install command but it is printing only the final string.
Would be nice to have a clear answer on how this work in general and what are the best practices.
This works:
import * as cp from 'child_process';
const child = cp.spawn('git', ['clone', 'ssh://myrepo...', '--progress']);
child.stdout.setEncoding('utf8');
child.stdout.on('data', (chunk) => {
process.stdout.write(`${chunk}`);
});
child.stderr.setEncoding('utf8');
child.stderr.on('data', (chunk) => {
process.stdout.write(`${chunk}`);
});
// BTW why git is outputing in STDERR and not in STDOUT?
However this doesn't work
const child = cp.spawn('npm', ['i', 'mymodule']);
Is there a way to make this work for each command?
You can leave off the event handlers and encoding settings and tell spawn() to pass stdio through to the parent process.
const child = cp.spawn('npm', ['i', 'mymodule'], {stdio: 'inherit'});
Both of your commands work for me as long as the listeners are added as in your first example. Your second example only stops working for me if I leave out the event handlers. It would be interesting to know what platform you are running on, what versions of node and npm you are using, and a complete not-working example that can be cut and paste into a file for testing. (Also, what is the name of the file? Are you using .mjs extension or something else to make import work? Is this file in a module loaded elsewhere or in the base level script?)
I was trying to run webpack-4 first time
webpack ./src/js/app.js ./dist/app.bundle.js
it shows warning / error :
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
ERROR in multi ./src/js/app.js ./dist/app.bundle.js
Module not found: Error: Can't resolve './dist/app.bundle.js' in 'D:\wamp64\www\webpack-4'
# multi ./src/js/app.js ./dist/app.bundle.js
Then i tried to change the mode
webpack --mode development
it shows :
ERROR in Entry module not found: Error: Can't resolve './src'
Resolved
Spent a lot of time to find out the solution.
Solution: Add index.js file into src folder.
That's it!.. solved :)
During Research, I found some facts about webpack 4 :
webpack 4 doesn’t need a configuration file by default!
webpack 4 there is no need to define the entry point: it will take ./src/index.js as the default!
Met this problem when deploying on now.sh
Solution: Use Default Behavior
Move entry point to src/index.js.
This leverage webpack#4 default value for entry:
By default its value is ./src/index.js, but you can specify a
different (or multiple entry points) by configuring the entry property
in the webpack configuration.
Solution: Be Specific
As #Lokeh pointed out, if you don't want to change your JS file location you can always use path.resolve() in your webpack.config.js:
entry: path.resolve(__dirname, 'src') + '/path/to/your/file.js',
Adding a context explicitly in webpack.config.js fixed issue for me. Adapt the following piece of code in your project:
context: __dirname + '/src',
entry: './index.js',
webpack ./src/js/app.js --output ./dist/app.bundle.js --mode development
This worked for me. I had the same trouble, it is because of a new version of webpack
webpack version 4.46.0
Perhaps someone gets stuck during migration from webpack 4 to 5.
in case of multiple webpack config files and if anyone uses merge:
Say webpack.common.js relies on some variables passed from cli eg:
module.export = (env) => {
const {myCustomVar} = env;
return {
// some common webpack config that uses myCustomVar
}
}
When you require common config in say webpack.prod.js:
const { merge } = require('webpack-merge'); // <-- `merge` is now named import if you are using > v5
const common = require('./webpack.common.js');
const getProdConfig = () => {....}
module.exports = (env) => {
return merge(common(env), getProdConfig()); // <-- here, `call` common as its exported as a fn()
};
I had a similar error and was able to resolve it with the command webpack src/index.js -o dist/bundle.js the -o did the trick. The issue wasn't the location of index.js it was missing the operator for defining the output path location.
See https://webpack.js.org/api/cli/
Version of webpack was 4.44.1
Other solutions didn't work. I solved this by adding this to package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack" //this
},
Then npm run build and it works. At first i've tried with npx webpack. Would love to know why it works.
Just leaving this here, incase someone is not paying attention to the details like me, I had the same error, but because my webpack config file was named webpack.config instead on webpack.config.js, so my custom configurations were never picked and webpack was falling back to the defaults entry "src/index.js"
As of webpack ^4.29.6 you don't need any configuration file so instead of giving path in package.json we need to write simply "build": "webpack" and keep index.js as entry point in src folder. However if you want to change entry point you can do so in webpack config file
For Rails 6 application this steps worked for me:
1) bundle exec rails webpacker:install
system will reinstall webpacker but will rewrite few files:
modified: config/webpack/environment.js
modified: config/webpacker.yml
modified: package.json
modified: yarn.lock
2) Return configs to initial state:
git checkout config/webpack/environment.js
git checkout config/webpacker.yml
package.json and yarn.lock you can leave as they are
Spent a lot of time similarly to others to get around this annoying problem. Finally changed webpack.config.js as follows:-
output: {
path: path.resolve(__dirname, './src'), //src instead of dist
publicPath: '/src/', //src instead of dist
filename: 'main.js' //main.js instead of build.js
}
...as Edouard Lopez and Sabir Hussain mentioned that you don't need to mention an entry point, removed that also and the app compiled after a long frustration.
So my problem, which I would wager is a lot of people's problem is that I set the entry path based on my whole app root. So in my case, it was /client/main.ts. But because my webpack.config.js file was actually inside /client, I had to move into that folder to run webpack. Therefore my entry was now looking for /client/client/main.ts.
So if you get this error you need to really look at your entry path and make sure it is right based on where you are running webpack and where your webpack.config.js file is. Your entry path needs to be relative to where you are running webpack. Not relative to your app root.
I had this problem when changing between React/Rails gems. Running rails webpacker:install restored me to the Rails webpacker defaults, but also overwrote all of my config files. Upon closer inspection, the culprit turned out to be my webpack/development.js file, which in a previous gem version had gotten modified from this Rails webpacker default:
process.env.NODE_ENV = process.env.NODE_ENV || 'development'
const environment = require('./environment')
module.exports = environment.toWebpackConfig()
Once I restored the file to those contents, this error went away. Specifically I had been missing the module.exports = environment.toWebpackConfig() line, which apparently is pretty important for those who want to avoid Rails webpacker thinking it needs a src/index.js file (it doesn't)
This is driving me insane, so I'm hoping someone might see something that I'm missing. Thank you for your help in advance.
I have a gulp file and I have installed via npm, babel-core, babel-preset-es2015, babel-preset-react. From researching online and in high hopes even though this might not be right, I have renamed the gulp file to be gulpfile.babel.js and I have created a .babelrc file with
{
"presets": ["es2015"]
}
I am using browsersync and when I launch the gulp task the html file loads, but the index.js I have includes 'import React....'. This files causing the error in the JS console that says 'Uncaught SyntaxError: Unexpected token import'.
I thought the es2015 npm packages I have should be taking care of that ES6 syntax?
In the gulp file the task that I thought was suppose to take care of that is;
// convert jsx to JS
gulp.task('babelFiles', function() {
return gulp.src('js/*.(jsx|js)')
.pipe(babel({
compact: false
}))
.pipe(gulp.dest('js'))
.pipe(browserSync.reload({
stream: true
}))
});
The gulp task that is responsible for launching this is:
// Default task
gulp.task('default', ['babelFiles', 'browserSync']);
I am puzzled as to what could be wrong here?
Any ideas would be much much appreciated!
There are two problems:
Gulp seems like doesn't support you syntax for file extension mask:
gulp.src('js/*.(jsx|js)') // not working
gulp.src('js/*.{js,jsx}') // working
You piping from js directory to js directory but since there are no matches because of the problem (1) it makes you believe the babel is not working
Update
Gulp uses glob syntaxt to match files - according to glob syntax the qualifier for amount of items should be included before ( | ) - in our case following syntax would be valid
gulp.src('js/*.#(js|jsx)')
where # means match exactly one occurrence of pattern after #.
In your case there was no qualifier presented
I'm trying to learn elm programing language from here. And it bugs me to manually do page refresh with every little change.
I see that elm-reactor doesn't support live realoading anymore. But what can i do unthil the next release?
I usually use elm-live.
It is very simple and easy to use if you are just compiling Elm to js.
Solved! - gulp magic saves the day!
(this solution works only with Chrome) Here is what I did - based on this: ( Thanks janiczek !! :))
Inside your root directory add a new file named gulpfile.js
Paste this content inside:
gulpfile.js:
evar gulp = require('gulp');
var elm = require('gulp-elm');
var concat = require('gulp-concat');
var plumber = require('gulp-plumber');
var livereload = require('gulp-livereload');
var path = ['*.elm']; // here you adjust the path according with your needs.
// For ex: 'scr/**/*.elm' - maps to every folder and file nested inside the src folder.
gulp.task('elm-init', elm.init);
gulp.task('elm', ['elm-init'], function(){
return gulp.src(path)
.pipe(plumber())
.pipe(elm())
.pipe(concat('elmapp.compiled.js'))
.pipe(gulp.dest('js'))
.pipe(livereload());
});
gulp.task('default',['watch']);
gulp.task('watch', function(){
livereload.listen();
gulp.watch(path,['elm']);
});
You must have gulp installed globally if not run:
npm install gulp -g
Install the gulp dependencies:
npm install gulp-elm gulp-concat gulp-plumber gulp-livereload
Install this extension: (chrome only)
run elm-reactor and open your page in Chrome.
From inside your terminal, at root directory (or wherever your gulpfile.js is) run: gulp
With the elm page tab open, Press LiveReload button on the Chorme Extension. like below and make sure it says:
You are good to go! :)
Elm compiler doesn't like .js files around, so you will still see 2 errors. Ignore them. For me , everything else works as expected.
I'm running tests with npm test - that actually runs a grunt task grunt casperjs:
casperjs:{
options:{},
files:
['./test_index.js',
'./test_map_regression.js',
'./test_index_get_gush.js'] /
},
using the grunt-casperjs-plugin in order to automate testing with slimerjs along with phantomjs, both running under casperjs in Travis-ci.
In order to do that, I need to pass the engine as a variable from the command line. something like:
casperjs --engine=slimerjs test_suite.js
Question: I can't find a way to pass the options from grunt cli (and I assume npm command line options would delegate to grunt. correctly?) to the files array.
I tried to add:
var engine = grunt.option('engine') || 'phantomjs';
engine = '--engine='+engine;
and then in the file array do:
files:['./test_index.js '+engine,
'./test_map_regression.js '+enging,
'./test_index_get_gush.js '+engine]
but seems that file array has to get real file names without the added args.
I'll be glad for any ideas on how to solve this through.
I haven't tested this, but looking at the grunt-casperjs source, it looks as though you would want to pass the engine as an option.
So, something like this should work:
casperjs:{
options: {
'engine': 'slimerjs'
},
files: [
'./test_index.js',
'./test_map_regression.js',
'./test_index_get_gush.js'
]
}