Error with gulp serve: Requiring external module babel-register - gulp

Running yeoman generator "Webapp", I'm getting an error when running gulp serve. Here are the following versions for a better background :
sw_vers && node -e 'console.log(process.platform, process.versions)'
ProductName: Mac OS X
ProductVersion: 10.11.3
BuildVersion: 15D21
darwin { http_parser: '2.6.0',
node: '5.2.0',
v8: '4.6.85.31',
uv: '1.7.5',
zlib: '1.2.8',
ares: '1.10.1-DEV',
icu: '56.1',
modules: '47',
openssl: '1.0.2e' }
node -v
v5.2.0
gulp -v
Requiring external module babel-register
CLI version 3.9.1
Local version 3.9.1
Finally the gulp serve error:
gulp serve
Requiring external module babel-register
\node_modules/babel-core/lib/transformation/file/options/option-manager.js:372
throw new Error("Couldn't find preset " + JSON.stringify(val) + " relative to directory " + JSON.stringify(dirname));
Does anybody have any idea what the problem could be, any suggestions?
Here's what I've tried:
npm uninstall gulp
npm install gulp
//with global flag and not
npm install --save-dev gulp
//installing babel-register manually w/wo global flag and --save-dev
npm install babel-register
npm cache clean
Also read through several of other posts with similar problem with no success, some of the following :
gulp serve: Failed to load external module babel-core/register
Requiring external module babel/register #726
babel was renamed to babel-core #727
Angular-Fullstack Requiring external module babel-register

yep, after running npm install --global gulp-cli I run gulp -v and I’ve got
Failed to load external module babel-register
Requiring external module babel-core/register
CLI version 1.2.1
Local version 3.9.1
then I updated CLI version to 3.9.1 (same as I have locally) but it did not help.
but when I downgrade CLI version to 3.9.0 it started work correct and message “Failed to load external module babel-register” not shown anymore.
Looks like 3.9.1 is buggy.
Run:
npm install -g gulp#3.9.0
hopefully it'll help you.

maybe this can help.
create .babelrc in your projects, and put this:
{
"presets": [
"es2015"
]
}

I have tried many ways explaining above, including
npm install --global gulp
npm install --save-dev gulp
etc for installation of gulp, but finally found solution by running below command, which change gulp to something gulp-cli on phpStorm command line.
npm install -D babel

npm install babel-cli babel-preset-es2015

me helped when i deleted and again installed both same version as global as local in the project directory the gulp and deleted and reinstal the babel-register.
sudo npm uninstall -g gulp
npm uninstall gulp
sudo npm install -g gulp#3.9.0
npm install gulp#3.9.0
npm uninstall babel-register
npm install babel-register

Related

package.json does not update dependencies

I recently tried to run my friend's project on my machine using the angular-cli. The dependencies in the package.json were old on his machine so I tried to update them using the following commands:
npm i -g npm-check-updates
npm-check-updates -u
npm install
The commang ng serve did render a few modules but I get these errors.
What should I do?
Install and save the angular animations to the package.json file.
npm install #angular/animations#latest --save

Gulp - Babel - EcmaScript-6 - Redux / Unhandled stream error in pipe

I have a problem with gulp trying to get this app I found on GitHub up and running.
https://github.com/simpulton/eggly-redux
I appreciate if anyone would be interested to have a look at this.
Many thanks in advance.
My repo for this with adjusted package.json and added .babelrc file is here.
https://github.com/mehmettugrulsahin/eggly-redux
Configuration files for quick look are here:
https://rawgit.com/mehmettugrulsahin/eggly-redux/master/package.json
https://rawgit.com/mehmettugrulsahin/eggly-redux/master/webpack.config.js
https://rawgit.com/mehmettugrulsahin/eggly-redux/master/gulpfile.babel.js
https://rawgit.com/mehmettugrulsahin/eggly-redux/master/.babelrc
It should normally be starting up with the following instructions indicated in the ReadMe file, but this did not work out for me.
git clone https://github.com/simpulton/eggly-redux.git
cd eggly-redux
npm i
gulp
Similar questions are already been asked. I have gone through all I
could find from answers to those here, but no luck. That's why I am
asking a new question.
Here is what I have done when it did not work out along with all my findings
I got the following installed just in case when it did not work in the
first place..
npm install -g npm
npm install -g webpack
npm install -g gulp
npm install -g babel
npm install -g browser-sync
npm install browser-sync --save-dev
npm install babel --save-dev
npm install babel-register --save-dev
npm install babel-preset-es2015 --save-dev
npm uninstall babel
npm install --global babel-cli
npm install babel-cli --save-dev
And gulp still gives me the same error
stream.js:74
throw er; // Unhandled stream error in pipe.
^
Error: ModuleBuildError: Module build failed: ReferenceError: [BABEL] C:\projects-mts\#eggly-redux\client\app\app.js: Unknown option: C:\projects-mts\#eggly-redux\.babelrc.presets
at Logger.error (C:\projects-mts\#eggly-redux\node_modules\babel-core\lib\transformation\file\logger.js:58:11)
at OptionManager.mergeOptions (C:\projects-mts\#eggly-redux\node_modules\babel-core\lib\transformation\file\options\option-manager.js:126:29)
at OptionManager.addConfig (C:\projects-mts\#eggly-redux\node_modules\babel-core\lib\transformation\file\options\option-manager.js:107:10)
at OptionManager.findConfigs (C:\projects-mts\#eggly-redux\node_modules\babel-core\lib\transformation\file\options\option-manager.js:168:35)
at OptionManager.init (C:\projects-mts\#eggly-redux\node_modules\babel-core\lib\transformation\file\options\option-manager.js:229:12)
at File.initOptions (C:\projects-mts\#eggly-redux\node_modules\babel-core\lib\transformation\file\index.js:147:75)
at new File (C:\projects-mts\#eggly-redux\node_modules\babel-core\lib\transformation\file\index.js:137:22)
at Pipeline.transform (C:\projects-mts\#eggly-redux\node_modules\babel-core\lib\transformation\pipeline.js:164:16)
at transpile (C:\projects-mts\#eggly-redux\node_modules\babel-loader\index.js:12:22)
at Object.module.exports (C:\projects-mts\#eggly-redux\node_modules\babel-loader\index.js:71:12)
I figured out that this is something to do with this task in
gulpfile.babel.js
// use webpack.config.js to build modules
gulp.task('webpack', () => {
return gulp.src(paths.entry)
.pipe(webpack(require('./webpack.config')))
.pipe(gulp.dest(paths.output));
});
so I changed
.pipe(webpack(require('./webpack.config')))
to
.pipe(webpack(require('webpack-stream')))
in gulpfile.babel.js. Then gulp gives me the following:
[20:52:57] Requiring external module babel-register
(node:9156) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
[20:52:58] Using gulpfile C:\projects-mts\#eggly-redux\gulpfile.babel.js
[20:52:58] Starting 'default'...
[20:52:58] Starting 'webpack'...
[20:52:58] Version: webpack 1.13.1
Asset Size Chunks Chunk Names
43db048c592b328cbb29.js 2.16 kB 0 [emitted] main
[20:52:58] Finished 'webpack' after 366 ms
[20:52:58] Starting 'serve'...
[20:52:59] Finished 'serve' after 75 ms
[20:52:59] Starting 'watch'...
[20:52:59] Finished 'watch' after 46 ms
[20:52:59] Finished 'default' after 494 ms
[BS] Access URLs:
------------------------------------
Local: http://localhost:3000
External: http://192.168.2.2:3000
------------------------------------
UI: http://localhost:3001
UI External: http://192.168.2.2:3001
------------------------------------
[BS] Serving files from: client
along with a file called
https://rawgit.com/mehmettugrulsahin/eggly-redux/master/client/43db048c592b328cbb29.js
instead of bundle.js and my browser says
"NetworkError: 404 Not Found - http://localhost:3000/bundle.js"
if I rename that file to bundle.js then browser gives me
SyntaxError: import declarations may only appear at top level of a module
import 'bootstrap-css-only';
My versions are as follows:
$ npm -v
3.9.5
$ gulp -version
[20:59:02] Requiring external module babel-register
[20:59:02] CLI version 3.9.1
[20:59:02] Local version 3.9.1
$ webpack -v
Hash: 396f0bfb9d565b6f60f0
Version: webpack 1.13.1
Time: 15ms
I noticed your comments after I tried the following :
Deleted the node_modules directory
npm install babel babel-register babel-cli babel-core babel-loader babel-preset-es2015 babel-preset-es2015-webpack browser-sync gulp gulp-rename gulp-template webpack webpack-stream css-loader raw-loader style-loader stylus-loader url-loader --save-dev
npm i
and now I get some other error. I think I made some progress
$ gulp
[15:24:35] Requiring external module babel-register
(node:12704) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
[15:24:36] Using gulpfile C:\projects-mts\eggly-redux\gulpfile.babel.js
[15:24:36] Starting 'default'...
[15:24:36] Starting 'webpack'...
stream.js:74
throw er; // Unhandled stream error in pipe.
^
Error: ./~/css-loader!./~/stylus-loader!./client/app/app.styl
Module build failed: TypeError: C:\projects-mts\eggly-redux\client\app\app.styl:37:1
33| from
34| opacity 0
35| to
36| opacity 1
37|
-------^
Path must be a string. Received undefined
at assertPath (path.js:7:11)
at extname (path.js:887:5)
at new SourceMapper (C:\projects-mts\eggly-redux\node_modules\stylus\lib\visitor\sourcemapper.js:41:7)
at Renderer.render (C:\projects-mts\eggly-redux\node_modules\stylus\lib\renderer.js:94:9)
at C:\projects-mts\eggly-redux\node_modules\stylus-loader\index.js:149:12
at tryCatchReject (C:\projects-mts\eggly-redux\node_modules\when\lib\makePromise.js:840:30)
at runContinuation1 (C:\projects-mts\eggly-redux\node_modules\when\lib\makePromise.js:799:4)
at Fulfilled.when (C:\projects-mts\eggly-redux\node_modules\when\lib\makePromise.js:590:4)
at Pending.run (C:\projects-mts\eggly-redux\node_modules\when\lib\makePromise.js:481:13)
at Scheduler._drain (C:\projects-mts\eggly-redux\node_modules\when\lib\Scheduler.js:62:19)
# ./client/app/app.styl 4:14-122./~/css-loader!./~/stylus-loader!./client/app/components/categories/categories.styl
Module build failed: TypeError: C:\projects-mts\eggly-redux\client\app\components\categories\categories.styl:35:1
31| overflow-x hidden
32| overflow-y auto /* Scrollable contents if viewport is shorter than content. */
33| background-color #2B2828
34| border-right 1px solid #7B807E
35|
-------^
The first error you get "Unknown option: .babelrc.presets" comes from the wrong version of babel-core used to build your project. Update the version to 6.9. The version must be equal to the babel-preset-es2015 version
Yes, #Damien Leroux is right.
You altered the original project with a .babelrc file. The babel version that is in the project doesn't understand the presets setting yet. If you update babel-core to the current version it will work. Note that you have to update babel-loader as well:
npm uninstall babel-core --save-dev
npm uninstall babel-loader --save-dev
npm install babel-core --save-dev
npm install babel-loader --save-dev
After this it worked for me. Your package.json should now be updated:
"devDependencies": {
"babel-core": "^5.4.2",
"babel-loader": "^5.0.0",
Is now
"devDependencies": {
"babel-core": "^6.9.1",
"babel-loader": "^6.2.4",
I got the app up and running like this
$ gulp
[21:16:33] Requiring external module babel-register
(node:10132) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
[21:16:34] Using gulpfile C:\projects-mts\eggly-redux\gulpfile.babel.js
[21:16:34] Starting 'default'...
[21:16:34] Starting 'webpack'...
[21:16:40] Version: webpack 1.13.1
Asset Size Chunks Chunk Names
bundle.js 2.36 MB 0 [emitted] main
bundle.js.map 2.74 MB 0 [emitted] main
[21:16:40] Finished 'webpack' after 5.19 s
[21:16:40] Starting 'serve'...
[21:16:40] Finished 'serve' after 102 ms
[21:16:40] Starting 'watch'...
[21:16:40] Finished 'watch' after 56 ms
[21:16:40] Finished 'default' after 5.37 s
[BS] Serving files from: client
by applying the following:
npm uninstall babel-core --save-dev
npm uninstall babel-loader --save-dev
npm uninstall stylus --save-dev
npm uninstall stylus-loader --save-dev
npm install babel-core --save-dev
npm install babel-loader --save-dev
npm install stylus --save-dev
npm install stylus-loader --save-dev
Many thanks for the inspiration and valuable answers!

Gulp not installed globally?

I've installed Gulp like this:
npm install gulp -g
When I try gulp -v I get this:
[16:19:03] CLI version 3.9.1
But when I try to use gulp in my project by running gulp enter code here I receive:
[16:20:40] Local gulp not found in ~/Code/gulp
[16:20:40] Try running: npm install gulp
What is wrong?
Gulp requires two parts to work in any project:
the gulp object that has the 5 functions attached, (src,dest, watch, run, task). this is installed locally for a project, as well as all the plugins necessary, because it is included in your taskfiles such as gulpfile.js. Its a locally imported module.
npm install --save-dev gulp
the gulp-cli, because this is a command line utility, that can be called from anywhere on your computer. Its a globally accessible cli command. You console needs to be able to see it. You do not import this.
npm install -g --save gulp-cli
you can see more here:
https://www.npmjs.com/package/gulp-cli/tutorial
You have to install gulp inside your project:
npm install --save-dev gulp

how to fix global gulp not working on mac

I am having problem with installing npm global package
for example
npm install --global gulp-cli
but when i want to run "gulp" it won't run
Local gulp not found in ~
Try running: npm install gulp
running which gulp => /usr/local/bin/gulp
as you can find here in the guide,
you have to install gulp also in your project dependencies
npm install --save-dev gulp
if you try gulp outside a project with gulp instlled as depedency you'll recevie that error
hope this helps

Error: Requiring external module babel-register

sw_vers && node -e 'console.log(process.platform, process.versions)'
ProductName: Mac OS X
ProductVersion: 10.11.3
BuildVersion: 15D21
darwin { http_parser: '2.6.0',
node: '5.2.0',
v8: '4.6.85.31',
uv: '1.7.5',
zlib: '1.2.8',
ares: '1.10.1-DEV',
icu: '56.1',
modules: '47',
openssl: '1.0.2e' }
node -v
v5.2.0
gulp -v
Requiring external module babel-register
CLI version 3.9.1
Local version 3.9.1
Getting error when running gulp serve, I've fixed this before by removing the entire webapp repo from local. Any and all help/advice appreciated, also please forgive if I've not formatted this issue as correctly as possible(first issue ever opened). Would like to resolve this without having to do this. gulp serve throws the following:
Running yeoman generator "Webapp", I'm getting an error when running gulp serve. Here are the following versions for a better background :
sw_vers && node -e 'console.log(process.platform, process.versions)'
ProductName: Mac OS X
ProductVersion: 10.11.3
BuildVersion: 15D21
darwin { http_parser: '2.6.0',
node: '5.2.0',
v8: '4.6.85.31',
uv: '1.7.5',
zlib: '1.2.8',
ares: '1.10.1-DEV',
icu: '56.1',
modules: '47',
openssl: '1.0.2e' }
node -v
v5.2.0
gulp -v
Requiring external module babel-register
CLI version 3.9.1
Local version 3.9.1
Finally the gulp serve error:
gulp serve
Requiring external module babel-register
\node_modules/babel-core/lib/transformation/file/options/option-manager.js:372
throw new Error("Couldn't find preset " + JSON.stringify(val) + " relative to directory " + JSON.stringify(dirname));
Does anybody have any idea what the problem could be, any suggestions?
Here's what I've tried:
npm uninstall gulp
npm install gulp
//with global flag and not
npm install --save-dev gulp
//installing babel-register manually w/wo global flag and --save-dev
npm install babel-register
npm cache clean
I had a very similar issue with running a custom project that was originally created using the Yeoman Webapp generator and found a solution that worked for me. A bit of context... the project was running fine on my Windows 7 machine and when I tried to move it over to my Mac OSX machine I received the exact same error. What I found works is creating a new Yeoman Web App project and drag & dropping the exact node-modules folder structure over to your existing project. Most likely than not, there is a dev dependency that your machine is not reading and fetching accurately, in this case, the babel-register module which is contained within this node-modules folder.
If possible for you to do, it's also worth comparing the versions of node, npm, gulp, gulp cli with your previous working version and the version you are having trouble loading when running gulp serve to see if they match.