We Keep Coding

Schemaglue throws error "No schemas found under the path '${path.resolve(schemaFolderPath)}'" when running webpack build file

I have graphql schema and resolvers in folder app/GraphQL and app.js in root folder. Root folder have files in below format:
app
GraphQL
Sample1
sample1.graphql
sample1.resolver.js
Sample2
sample2.graphql
sample2.resolver.js
app.js
And in app.js I glue the schema from app/GraphQL as shown below using library schemaglue:
const schemaglue = require("schemaglue");
const { schema, resolver } = schemaglue("app/GraphQL");
Now when I create build with webpack it creates folder in root named build and have file it in names bundle-app.js which is the build file. But when I run this file using command node ./build/bundle-app.js it throws below error and I dont know how to resolve it:
C:\Users\sai\Projects\webpack build\node_modules\schemaglue\index.js:87
throw new Error(`Missing GraphQL Schema: No schemas found under the path '${path.resolve(schemaFolderPath)}'`)
^
Error: Missing GraphQL Schema: No schemas found under the path 'C:\Users\sai\Projects\webpack build\app\GraphQL'
at glue (C:\Users\sai\Projects\webpack build\node_modules\schemaglue\index.js:87:10)
at Object.1620 (C:\Users\sai\Projects\webpack build\build\bundle-app.js:1:292073)
at n (C:\Users\sai\Projects\webpack build\build\bundle-app.js:1:296590)
at C:\Users\sai\Projects\webpack build\build\bundle-app.js:1:296794
at C:\Users\sai\Projects\webpack build\build\bundle-app.js:1:297439
at Object.<anonymous> (C:\Users\u1132351\Projects\webpack build\build\bundle-app.js:1:297443)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
at internal/main/run_main_module.js:17:47
Below are my dependencies versions:
"graphql": "^14.6.0",
"graphql-resolvers": "^0.3.3",
"graphql-tools": "^4.0.6",
"schemaglue": "^4.0.4"
"#babel/cli": "^7.7.0",
"#babel/core": "^7.7.2",
"#babel/node": "^7.7.0",
"#babel/preset-env": "^7.7.1",
"babel-loader": "^8.0.6",
"babel-plugin-transform-class-properties": "^6.24.1",
"copy-webpack-plugin": "^9.1.0",
"webpack": "^5.6.0",
"webpack-cli": "^4.2.0",
"webpack-node-externals": "^2.5.2"
Below is my webpack.config:
const path = require('path');
const nodeExternals = require('webpack-node-externals');
const CopyPlugin = require('copy-webpack-plugin');
module.exports = {
target: "node",
externals: [nodeExternals()],
entry: path.resolve(__dirname, './app.js'),
output: {
path: path.resolve(__dirname, "./build"),
filename: "bundle-app.js"
},
resolve: {
extensions: ['.js', '.graphql', '.json', '.html' ],
},
mode: process.env.environment,
plugins: [
new CopyPlugin({
patterns: [
{
from: 'queue/EmailService/templates/*.html'
}
],
})
]
};

Gulp-Error: Cannot find module 'gulp-watch'

I am making a WordPress plugin that uses gulp to control all my assets and when I try to trigger the gulp-watch function it gives me this error:
C:\xampp\htdocs\testsite\wp-content\plugins\basic-plugin>gulp watch
Error: Cannot find module 'gulp-watch'
Require stack:
- C:\xampp\htdocs\testsite\wp-content\plugins\basic-plugin\gulpfile.js
- C:\xampp\htdocs\testsite\wp-content\plugins\basic-plugin\node_modules\gulp-
cli\lib\shared\require-or-import.js
- C:\xampp\htdocs\testsite\wp-content\plugins\basic-plugin\node_modules\gulp-
cli\lib\versioned\^4.0.0\index.js
- C:\xampp\htdocs\testsite\wp-content\plugins\basic-plugin\node_modules\gulp-
cli\index.js
- C:\xampp\htdocs\testsite\wp-content\plugins\basic-plugin\node_modules\gulp\
bin\gulp.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:1
5)
at Function.Module._load (internal/modules/cjs/loader.js:725:27)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object.<anonymous> (C:\xampp\htdocs\testsite\wp-content\plugins\basic-
plugin\gulpfile.js:7:13)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'C:\\xampp\\htdocs\\testsite\\wp-content\\plugins\\basic-plugin\\gulpfile
.js',
'C:\\xampp\\htdocs\\testsite\\wp-content\\plugins\\basic-plugin\\node_mod
ules\\gulp-cli\\lib\\shared\\require-or-import.js',
'C:\\xampp\\htdocs\\testsite\\wp-content\\plugins\\basic-plugin\\node_mod
ules\\gulp-cli\\lib\\versioned\\^4.0.0\\index.js',
'C:\\xampp\\htdocs\\testsite\\wp-content\\plugins\\basic-plugin\\node_mod
ules\\gulp-cli\\index.js',
'C:\\xampp\\htdocs\\testsite\\wp-content\\plugins\\basic-plugin\\node_mod
ules\\gulp\\bin\\gulp.js'
]
}
Although I have added the gulp-watch plugin and saved it in my devDependencies and I also have called it in gulpfile.js using require() method but it still gives the error MODULE NOT FOUND. I have also added my gulpfile.js and package.json file you can see it for yourselves. Here is my package.json file:
{
"name": "basic-plugin",
"version": "1.0.0",
"description": "basic wordpress custom plugin",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"js",
"gulp",
"wordpress",
"plugin"
],
"author": "Arslan Abbasi <arslanarshad321#gmail.com>",
"license": "GPL-3.0",
"devDependencies": {
"#babel/preset-env": "^7.13.8",
"babel-core": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babelify": "^10.0.0",
"browser-sync": "^2.18.13",
"browserify-shim": "^3.8.14",
"gulp": "^4.0.2",
"gulp-autoprefixer": "^7.0.1",
"gulp-concat": "^2.5.2",
"gulp-if": "^3.0.0",
"gulp-notify": "^3.0.0",
"gulp-options": "^1.1.1",
"gulp-plumber": "^1.1.0",
"gulp-rename": "^2.0.0",
"gulp-sass": "^4.1.0",
"gulp-sourcemaps": "^3.0.0",
"gulp-strip-debug": "^3.0.0",
"gulp-uglify": "^3.0.0",
"gulp-uglifycss": "^1.0.9",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^2.0.0"
},
"babel": {
"presets": [
"env"
]
},
"browserify": {
"transform": [
"browserify-shim"
]
},
"browser": {
"jquery": "./node_modules/jquery/dist/jquery.js"
},
"browserify-shim": {
"jquery": "$"
}
}
Here is my gulpfile.js:
var gulp = require('gulp');
var rename = require('gulp-rename');
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
var autoprefixer = require( 'gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
var watch = require('gulp-watch');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var styleSRC = 'src/scss/mstyle.scss';
var styleDIST = './assets/';
var jsSRC = 'src/js/';
var jsScript = 'script.js';
var jsFiles = [jsScript];
var jsDIST = './assets/js/';
var styleWatch = 'src/scss/**/*.scss';
var jsWatch = 'src/js/**/*.js';
gulp.task('style', function(done){
return gulp.src(styleSRC)
.pipe(sourcemaps.init())
.pipe(sass({
errorLogToConsole: true,
outputStyle: 'compressed'
}) )
.on('error',console.error.bind(console))
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(rename({suffix: '.min'}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(styleDIST));
done();
});
gulp.task('js', function(done){
jsFiles.map(function(entry){
return browserify({entries: [jsSRC+entry]})
.transform(babelify, {presets:['#babel/env']})
.bundle()
.pipe(source(entry))
.pipe(rename({extname:'.min.js'}))
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(uglify())
.pipe(sourcemaps.write('./'))
.pipe( gulp.dest( jsDIST) );
});
done();
});
gulp.task('default',gulp.series(['style', 'js']));
gulp.task('watch',gulp.series(['default'], function(done){
gulp.watch(styleWatch,gulp.parallel(['style']));
gulp.watch(jsWatch,gulp.parallel(['js']));
done();
}));
Can someone please help me with what to do? I have been struggling with it for hours.

You need to add add/install gulp-watch... i dont see it in your package.json. To add it try:
npm install gulp-watch
or
yarn add gulp-watch

Gulpfile.js failed to load

Visual Studio task runner cannot load the gulp file. I use VS2017 v15.9.4 now, however, the project developed some years ago.
Failed to run "...\Gulpfile.js"...
cmd.exe /c gulp --tasks-simple
assert.js:350
throw err;
^
AssertionError [ERR_ASSERTION]: Task function must be specified
at Gulp.set [as _setTask] (...\node_modules\undertaker\lib\set-task.js:10:3)
at Gulp.task (...\node_modules\undertaker\lib\task.js:13:8)
at Object.<anonymous> (...\gulpfile.js:34:6)
at Module._compile (internal/modules/cjs/loader.js:689:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:22:18)
I replaced my project local address by "..."
npm -v --> 6.4.1
node -v --> 10.14.2
gulp -v --> CLI version 2.0.1
Local version 4.0.0
The content of package.json file:
{
"version": "1.0.0",
"name": "tratic",
"private": true,
"devDependencies": {
"gulp": "github:gulpjs/gulp#4.0",
"gulp-clean-css": "3.5.0",
"gulp-concat": "2.6.1",
"gulp-durandal": "1.1.7",
"gulp-install": "^1.1.0",
"gulp-uglify": "3.0.0",
"gulp-util": "3.0.8",
"rimraf": "2.6.1"
},
"dependencies": {
"assert": "^1.4.1",
"assert-js": "^0.20.0",
"natives": "^1.1.5"
},
"scripts": {
"gulp": "./node_modules/gulp/bin/gulp.js"
}
}
The content of gulpfile.js:
var gulp = require('gulp'),
durandal = require('gulp-durandal'),
rimraf = require('rimraf');
gulp.task('clean', function (cb) {
rimraf('app/main-built.js', cb);
});
gulp.task('durandal', ['clean'], function () {
durandal({
baseDir: 'app',
main: 'main.js',
output: 'main-built.js',
almond: true,
minify: true
})
.pipe(gulp.dest('app'));
});
gulp.task('default', ['durandal']);
I google it and the existing solutions cannot solve the problem. There are some related issue but does not work for me.
How can I solve the problem?

I have tried your setup, it indeed threw an error like yours.
I went to the gulp docs and tried their version of a gulpfile, and it worked with no issues. So I have rewritten your gulpfile to match their example and it worked well.
here's the code:
var gulp = require('gulp'),
durandal = require('gulp-durandal'),
rimraf = require('rimraf');
var paths = {
app: "./App/**/*.js",
js: "./Scripts/**/*.js",
css: "./Content/**/*.css",
concatJsDest: "./Scripts/vendor-scripts.min.js",
concatCssDest: "./Content/vendor-css.min.css"
};
function clean (cb) {
rimraf('app/main-built.js', cb);
}
gulp.task('clean', clean);
function runDurandal () {
return durandal({
baseDir: 'app',
main: 'main.js',
output: 'main-built.js',
almond: true,
minify: true,
rjsConfigAdapter: function (rjsConfig) {
rjsConfig.deps = ['text'];
return rjsConfig;
}
})
.pipe(gulp.dest('app'));
}
var build = gulp.series(clean, runDurandal);
gulp.task('default', build);
Basically I have moved functions that you use as tasks to variables, and used series to run durandal.
then I have tried npx gulp --tasks-simple
and have a proper output
clean
default
btw, have a look at npx so you don't have to install gulp globally.
Hope that helps!

This syntax is no longer allowed in gulp4:
gulp.task('default', ['durandal']);
Use :
gulp.task('default', gulp.series('durandal'));
Likewise change to:
gulp.task('durandal', gulp.series('clean', function (done) {
durandal({
baseDir: 'app',
main: 'main.js',
output: 'main-built.js',
almond: true,
minify: true
})
.pipe(gulp.dest('app'));
done();
});
Also, using pump would probably give you better error reporting than you are getting without it.

Try to use this workaround: https://github.com/ampproject/docs/issues/793
Downgrade gulp to this version 3.9.1.

Gulp and index.html issue

I have 4 html files.
index.html,
menu.html,
dishdetail.html,
contactus.html,
And I am using gulp for testing purposes and live preview. However,the index.html is not concatenated inside the dist folder. All the other folders such as images,styles and scripts are concatenated. So this is how I set up the gulp.
var gulp = require('gulp'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
stylish = require('jshint-stylish'),
uglify = require('gulp-uglify'),
usemin = require('gulp-usemin'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
changed = require('gulp-changed'),
rev = require('gulp-rev'),
ngannotate = require('gulp-ng-annotate'),
browserSync = require('browser-sync'),
del = require('del');
gulp.task('jshint', function() {
return gulp.src('app/scripts/**/*.js')
.pipe(jshint())
.pipe(jshint.reporter(stylish));
});
// Clean
gulp.task('clean', function() {
return del(['dist']);
});
//Default task
gulp.task('default', ['clean'], function() {
gulp.start('usemin', 'imagemin','copyfonts');
});
gulp.task('usemin',['jshint'], function () {
return gulp.src('app/*.html')
.pipe(usemin({
css:[minifycss(),rev()],
js: [ngannotate(),uglify(),rev()]
}))
.pipe(gulp.dest('dist/'));
});
// Images
gulp.task('imagemin', function() {
return del(['dist/images']), gulp.src('app/images/**/*')
.pipe(cache(imagemin({ optimizationLevel: 3, progressive: true,
interlaced:
true })))
.pipe(gulp.dest('dist/images'))
.pipe(notify({ message: 'Images task complete' }));
});
gulp.task('copyfonts', ['clean'], function() {
gulp.src('./bower_components/font-awesome/fonts/**/*.{ttf,woff,eof,svg}*')
.pipe(gulp.dest('./dist/fonts'));
gulp.src('./bower_components/bootstrap/dist/fonts/**/*.{ttf,woff,eof,svg}*')
.pipe(gulp.dest('./dist/fonts'));
});
// Watch
gulp.task('watch', ['browser-sync'], function() {
// Watch .js files
gulp.watch('{app/scripts/**/*.js,app/styles/**/*.css,app/**/*.html}',
['usemin']);
// Watch image files
gulp.watch('app/images/**/*', ['imagemin']);
});
gulp.task('browser-sync', ['default'], function () {
var files = [
'app/**/*.html',
'app/styles/**/*.css',
'app/images/**/*.png',
'app/scripts/**/*.js',
'dist/**/*'
];
browserSync.init(files, {
server: {
baseDir: 'dist',
index: 'index.html'
},
reloadDelay: 1000
});
// Watch any files in dist/, reload on change
gulp.watch(['dist/**']).on('change', browserSync.reload);
});
And when I type in cmd gulp,I get this error.
events.js:160
throw er; // Unhandled 'error' event
^
Error: write after end
at writeAfterEnd (C:\Users\Theodosios\Desktop\AngularJs\Week3\03_SPAs\node_m
odules\gulp-minify-css\node_modules\readable-
stream\lib\_stream_writable.js:229:
12)
at Transform.Writable.write (C:\Users\Theodosios\Desktop\AngularJs\Week3\03_
SPAs\node_modules\gulp-minify-css\node_modules\readable-
stream\lib\_stream_writa
ble.js:272:20)
Any ideas why this is happening?
All the modules are instralled through npm. They are shown here
package.json
{
"name": "conFusion",
"private": true,
"devDependencies": {
"browser-sync": "^2.18.8",
"del": "^2.2.2",
"gulp": "^3.9.1",
"gulp-cache": "^0.4.5",
"gulp-changed": "^2.0.0",
"gulp-concat": "^2.6.1",
"gulp-imagemin": "^3.1.1",
"gulp-jshint": "^2.0.4",
"gulp-minify-css": "^1.2.4",
"gulp-ng-annotate": "^2.0.0",
"gulp-notify": "^3.0.0",
"gulp-rename": "^1.2.2",
"gulp-rev": "^7.1.2",
"gulp-uglify": "^2.0.1",
"gulp-usemin": "^0.3.28",
"jshint": "^2.9.4",
"jshint-stylish": "^2.2.1"
},
"engines": {
"node": ">=0.10.0"
}
}
Thanks,
Theo

use gulp-useref plugin
npm install --save-dev gulp-useref
Update gulpfile.js as below
var useref = require('gulp-useref');
gulp.task('usemin',['jshint'], function () {
return gulp.src('./app/*.html')
.pipe(useref())
.pipe(usemin({
css:[minifycss(),rev()],
js: [ngannotate(),uglify(),rev()]
}))
.pipe(gulp.dest('dist/'));
});

There are a couple of possible reasons:
First, gulp-minify-css is deprecated and they recommend using gulp-clean-css, so you should try updating that.
Secondly, gulp-usemin is designed for node >=4.0 and your engines.node is set to >=0.10.0.

bundle.js not found (**not webpack related)

I keep getting a 404 error on my bundle.js file. I have been googling, reading, and trying everything I can for hours to figure it out, but I haven't found a solution to help me. I get the following error in my browser (Chrome)
"Failed to load resource: the server responded with a status of 404
http://localhost:3000/bundle.js (NOT FOUND)"
Here is my gulpfile.babel.js:
import gulp from 'gulp';
import babelify from 'babelify';
import browserify from 'browserify';
import source from 'vinyl-source-stream';
import browserSync from 'browser-sync';
import less from 'gulp-less';
import ghPages from 'gh-pages';
import gutil from 'gulp-util';
import fs from 'fs';
const sync = browserSync.create();
gulp.task('html', () => {
gulp.src('src/**/*.html')
.pipe(gulp.dest('dist'))
.pipe(sync.reload({
stream: true
}));
});
gulp.task('json', () => {
gulp.src('src/**/*.json')
.pipe(gulp.dest('dist'))
.pipe(sync.reload({
stream: true
}));
});
gulp.task('script', () => {
browserify().transform(babelify.configure({
presets: ["es2015", "react"] }))
.bundle()
.pipe(fs.createWriteStream("bundle.js"))
});
gulp.task('styles', ['fonts'], () => {
gulp.src('src/styles/**/*.{css,less}')
.pipe(less()
.on('error', (error) => {
gutil.log(gutil.colors.red('Error: ' + error.message));
gutil.beep();
}))
.pipe(gulp.dest('dist'))
.pipe(sync.reload({
stream: true
}));
});
// Fonts
gulp.task('fonts', () => {
gulp.src('node_modules/font-awesome/fonts/*')
.pipe(gulp.dest('dist/fonts/'));
});
gulp.task('build', ['html', 'script', 'styles', 'json']);
gulp.task("deploy", ["build"], () => {
ghPages.publish("dist");
});
gulp.task('serve', ['build'], () => {
sync.init({
server: 'dist',
});
gulp.watch('src/**/*.html', ['html']);
gulp.watch('src/**/*.json', ['json']);
gulp.watch('src/**/*.{css,less}', ['styles']);
gulp.watch('src/**/*.{js,jsx}', ['script'])
});
gulp.task('default', ['serve']);
My package.json
{
"private": true,
"devDependencies": {
"babel-core": "^6.3.26",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babelify": "^7.2.0",
"browser-sync": "^2.10.1",
"browserify": "^12.0.1",
"fs": "0.0.2",
"gh-pages": "^0.8.0",
"gulp": "^3.9.0",
"gulp-less": "^3.0.5",
"gulp-util": "^3.0.7",
"react": "^0.14.3",
"vinyl-source-stream": "^1.1.0",
"webpack": "^1.12.9"
},
"dependencies": {
"backbone": "^1.2.3",
"bootstrap": "^3.3.6",
"font-awesome": "^4.5.0",
"jquery": "^2.1.4",
"parse": "^1.6.13",
"react": "^0.14.3",
"react-dom": "^0.14.3",
"underscore": "^1.8.3"
}
}
My index.html has the following at the bottom of the body:
<script type="text/javascript" src="bundle.js"></script>
Also, I have a .babelrc set up with the es2015 and react presets
Thanks in advance for any feedback!
UPDATE SOLVED:
gulp.task('script', () => {
browserify().transform(babelify.configure({
presets: ["es2015", "react"] }))
.bundle()
.pipe(fs.createWriteStream("dist/bundle.js"))
});
Had to add - dist/ - to the last line

Do you have multiple web servers running? For instance on port 3000 and port 80? And if so, is bundle.js placed in the correct web folder?
Could a .htaccess file or similar be blocking access to bundle.js?
If you create a random file (test.html), can you then access it from http://localhost:3000/test.html?