ReferenceError: Can't find variable: Util - trying to support es6 modules and import
JonQuayle opened this issue · 2 comments
Hi,
I've gone about adding a gulp rollup plugin to get support for es6 modules and now I am getting the error 'ReferenceError: Can't find variable: Util' in the console. I'm still fairly new to javascript and cannot figure out a way to fix this. Maybe there is a better way to support the newer javascript files than what I have done here? I basically followed this article - https://nshki.com/es6-in-gulp-projects/, and it seems to have worked well enough, but now the utils.js file for Codyframe is erroring. My reason for wanting to add es6 support is a couple of libraries I want to use only seem to be able to be used via bundlers. My gulp file is below:
`var gulp = require('gulp');
var sass = require('gulp-sass');
var sassGlob = require('gulp-sass-glob');
var browserSync = require('browser-sync').create();
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var cssvariables = require('postcss-css-variables');
var calc = require('postcss-calc');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
const terser = require('gulp-terser');
var purgecss = require('gulp-purgecss');
const rollup = require('gulp-better-rollup');
const babel = require('rollup-plugin-babel');
const resolve = require('rollup-plugin-node-resolve');
const commonjs = require('rollup-plugin-commonjs');
// js file paths
var utilJsPath = 'main/assets/js'; // util.js path - you may need to update this if including the framework as external node module
var configJsPath = 'main/assets/js/components/config/.js'; // component js files
var componentsJsPath = 'main/assets/js/components/.js'; // component js files
var scriptsJsPath = '../web/assets/js'; //folder for final scripts.js/scripts.min.js files
// css file paths
var cssFolder = '../web/assets/css'; // folder for final style.css/style-custom-prop-fallback.css files
var scssFilesPath = 'main/assets/css/**/*.scss'; // scss files to watch
// Copying the necessary framework files from node_modules to a specified folder in the dev folder for a new project
gulp.task('copy-framework', function() {
gulp.src([
'node_modules/codyhouse-framework/main/assets/css/**/.scss',
'node_modules/codyhouse-framework/main/assets/js/.js'
])
.pipe(gulp.dest('main/assets/new'));
return new Promise(function(resolve, reject) {
console.log("Codyhouse-framework updated files have been copied from node_modules to the dev folder");
resolve();
});
});
// Update the base style scss files if they have been updated in the git repository
gulp.task('update-base-styles', function() {
gulp.src('node_modules/codyhouse-framework/main/assets/css/base/*.scss')
.pipe(gulp.dest('main/assets/css/base'));
return new Promise(function(resolve, reject) {
console.log("Codyhouse-framework base styles have been updated from node_modules to the dev folder");
resolve();
});
});
// Update the base script util.js file if it has been updated in the git repository
gulp.task('update-base-scripts', function() {
gulp.src('node_modules/codyhouse-framework/main/assets/js/util.js')
.pipe(gulp.dest('main/assets/js'));
return new Promise(function(resolve, reject) {
console.log("Codyhouse-framework base scripts have been updated from node_modules to the dev folder");
resolve();
});
});
function reload(done) {
browserSync.reload();
done();
}
/* Gulp watch task */
// This task is used to convert the scss to css and compress it. No fallback for IE is created
gulp.task('sass', function() {
return gulp.src(scssFilesPath)
.pipe(sassGlob())
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(postcss([autoprefixer()]))
.pipe(gulp.dest(cssFolder))
.pipe(browserSync.reload({
stream: true
}));
});
// This task is used to convert the scss to css and compress it. A fallback for IE (style-fallback.css) is created
gulp.task('sass-ie', function() {
return gulp.src(scssFilesPath)
.pipe(sassGlob())
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(postcss([autoprefixer()]))
.pipe(gulp.dest(cssFolder))
.pipe(browserSync.reload({
stream: true
}))
.pipe(rename('style-fallback.css'))
.pipe(postcss([cssvariables(), calc()]))
.pipe(gulp.dest(cssFolder));
});
gulp.task('scripts', function() {
return gulp.src([utilJsPath+'/util.js',configJsPath, componentsJsPath])
.pipe(rollup({ plugins: [babel(), resolve(), commonjs()] }, 'umd'))
.pipe(concat('scripts.js'))
.pipe(gulp.dest(scriptsJsPath))
.pipe(browserSync.reload({
stream: true
}))
.pipe(rename('scripts.min.js'))
.pipe(uglify())
// .pipe(terser())
.pipe(gulp.dest(scriptsJsPath))
.pipe(browserSync.reload({
stream: true
}));
});
// Change these credentials to match the host in MAMP Pro
gulp.task('browserSync', gulp.series(function (done) {
browserSync.init({
proxy: "http://jonquayle.test",
host: 'jonquayle.test',
open: 'external',
reloadOnRestart: true,
files: [scssFilesPath, componentsJsPath, "../web/assets/css/style.css"]
})
done();
}));
gulp.task('watch', gulp.series(['browserSync', 'sass', 'scripts'], function () {
// gulp.watch('main/.html', gulp.series(reload));
gulp.watch('../templates/**/.twig', gulp.series(reload));
gulp.watch('main/assets/css//*.scss', gulp.series(['sass']));
// gulp.watch('main/assets/js//*.js', gulp.series(reload));
gulp.watch(componentsJsPath, gulp.series(['scripts']));
}));
/* Gulp watch-ie task /
gulp.task('watch-ie', gulp.series(['browserSync', 'sass-ie', 'scripts'], function () {
// gulp.watch('main/.html', gulp.series(reload));
gulp.watch('../templates//*.twig', gulp.series(reload));
gulp.watch('main/assets/css//.scss', gulp.series(['sass-ie']));
// gulp.watch('main/assets/js/**/.js', gulp.series(reload));
gulp.watch(componentsJsPath, gulp.series(['scripts']));
}));
/* Gulp dist task */
// create a distribution folder for production
var distFolder = 'dist/';
var assetsFolder = 'dist/assets/';
gulp.task('dist', async function(){
// remove unused classes from the style.css file with PurgeCSS and copy it to the dist folder
await purgeCSS();
// minify the scripts.js file and copy it to the dist folder
await minifyJs();
// copy the style-fallback (IE support) to the dist folder
await moveCSS();
// copy any additional js files to the dist folder
await moveJS();
// copy all the assets inside main/assets/img folder to the dist folder
await moveAssets();
// copy all html files inside main folder to the dist folder
await moveContent();
console.log('Distribution task completed!')
});
function purgeCSS() {
return new Promise(function(resolve, reject) {
var stream = gulp.src(cssFolder+'/style.css')
.pipe(purgecss({
content: ['main/*.html', scriptsJsPath+'/scripts.js'],
safelist: ['.is-hidden', '.is-visible'],
defaultExtractor: content => content.match(/[\w-/:%@]+(?<!:)/g) || []
}))
.pipe(gulp.dest(distFolder+'/assets/css'));
stream.on('finish', function() {
resolve();
});
});
};
function minifyJs() {
return new Promise(function(resolve, reject) {
var stream = gulp.src(scriptsJsPath+'/scripts.js')
.pipe(uglify())
.pipe(gulp.dest(distFolder+'/assets/js'));
stream.on('finish', function() {
resolve();
});
});
};
function moveCSS() {
return new Promise(function(resolve, reject) {
var stream = gulp.src(cssFolder+'/style-fallback.css', { allowEmpty: true })
.pipe(gulp.dest(assetsFolder+'css'));
stream.on('finish', function() {
resolve();
});
});
};
function moveJS() {
return new Promise(function(resolve, reject) {
var stream = gulp.src([scriptsJsPath+'/*.js', '!'+scriptsJsPath+'/scripts.js', '!'+scriptsJsPath+'/scripts.min.js'], { allowEmpty: true })
.pipe(gulp.dest(assetsFolder+'js'));
stream.on('finish', function() {
resolve();
});
});
};
function moveAssets() {
return new Promise(function(resolve, reject) {
var stream = gulp.src(['main/assets/img/**'], { allowEmpty: true })
.pipe(gulp.dest(assetsFolder+'img'));
stream.on('finish', function() {
resolve();
});
});
};
function moveContent() {
return new Promise(function(resolve, reject) {
var stream = gulp.src('main/*.html')
.pipe(gulp.dest(distFolder));
stream.on('finish', function() {
resolve();
});
});
}; `
Hi there,
from the error you are getting, it looks like you are not importing the util.js file in your project.
As the util file does not require any manipulation, I would suggest you include it directly into the footer of your html file, before the script.js file gulp creates. This will fix your issue.
There's also an open Discussion on ES6 modules that may help you:
#75
Thanks, I was including the util.js script before all other scripts but wasn't getting pulled in. On inspection it looks as though that was down to Craft CMS rather than the framework. I've sorted now and its working fine, thanks for your help :).