ReferenceError: Can't find variable: Util - trying to support es6 modules and import

[JonQuayle]

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();
});

}); }; `

[claudia-romano]

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: https://github.com/CodyHouse/codyhouse-framework/discussions/75

[JonQuayle]

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 :).