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!
Related
I'm trying to install new Angular project using angular/cli commmand:
ng new app-name
My tools are:
ng --version
Angular CLI: 8.2.2
Node: 10.16.3
OS: win32 x64
Angular:
...
Package Version
------------------------------------------------------
#angular-devkit/architect 0.802.2
#angular-devkit/core 8.2.2
#angular-devkit/schematics 8.2.2
#schematics/angular 8.2.2
#schematics/update 0.802.2
rxjs 6.4.0
So, in order to get the default angular app I run:
ng new app-name
Choose adding routing and CSS fro the styles.
I get the following output:
npm ERR! Unexpected end of JSON input while parsing near '...pes/gulp":"3.X","#typ'
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\gusenica\AppData\Roaming\npm-cache\_logs\2019-08-20T15_56_11_846Z-debug.log
Package install failed, see above.
Question is how can I solve this problem?
It was some kind of npm-related problem. I just ran
npm cache clean --force
and it worked!
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
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
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
I have installed global instance of gulp and worked fine:
npm install -g gulp
npm install -g gulp-sass
But when I try to install in the app directory
npm install gulp-sass
I´m getting several errors, starting with
gyp WARN install got an error, rolling back install
gyp ERR! configure error
gyp ERR! stack Error: 404 status code downloading 32-bit node.lib
I've tried to uninstall and install GULP again, also rebuild command. Still I got no luck.
Any idea what it would be?
Thanks
Please check the version of the dependency in the file package.json.
I am using gulp-sass 2.0.4 and the installation went fine.
"gulp-sass": "^2.0.4",