Avoid using document.write() occurs when trying to load a dashboard page in Chrome

javascript html css angular gulp

16,521

Solution 1

The violation message is caused by browserSync that will add the following line to the document.

<script id="__bs_script__">//<![CDATA[
    document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.23.3'><\/script>".replace("HOST", location.hostname));
//]]></script>

This can be pretty much ignored as it will only affect the app when it's viewed through browserSync and not the final app.

Solution 2

If anyone stumbles across this post. I found a handy solution to get around the warning being displayed by browserSync.

<script id="__bs_script__">//<![CDATA[
    let script = document.createElement('script');
    script.setAttribute('async', '');
    script.setAttribute('src', '%script%'.replace("HOST", location.hostname));
    document.body.appendChild(script);
//]]></script>

Taken from this post.

Happy coding =)

16,521

Author by

Rav

Always learning!

Updated on June 26, 2022

Comments

Rav almost 2 years

So I have been stuck on this problem for longer than i'd care to admit but as a Angular newbie I am completely baffled.

So I am following some online tutorials in order to implement Gulp into an application I am working on and whenever I run the Gulp tasks I get an error in Chrome which states:

"[Violation] Avoid using document.write().(anonymous) @ (index):13"

and:

//\/script>".replace("HOST", location.hostname)); //]]>

I am even more confused as the index.html doesn't actually contain a document.write reference before execution. Also despite mostly following a tutorial when integrating Gulp I cannot seem to have the CSS background changes reflected on screen, could this be related to the previously mentioned error?

index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>SmartSystemOverviewWeb</title>
    <link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="app/css/styles.css" rel="stylesheet">
</head>

<body>
<sso-dashboard>  
    Loading...    
  <i class="fa fa-spinner fa-spin"></i>
</sso-dashboard>

  <script type="text/typescript" src="app/vendor.ts"></script>
  <!-- <script src="app/app.component.js"></script> -->
</body>
</html>

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var tsc = require('gulp-typescript');
var tslint = require('gulp-tslint');
var tsProject = tsc.createProject('tsconfig.json');
var config = require('./gulp.config')();

var browserSync = require('browser-sync').create();
var superstatic = require('superstatic');
var useref = require('gulp-useref');
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');
var minifyCSS = require('gulp-minify-css');
var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');
var del = require('del');
var runSequence = require('run-sequence');

/*
-- TOP LEVEL FUNCTIONS --
gulp.task - Define tasks
gulp.src - point to files to use
gulp.dest - point to folder to output
gulp.watch - watch files + folders for changes
*/

// Logs Message
gulp.task('message', function(){
    return console.log('Gulp is running...');
});

gulp.task('ts-lint', function() {
    console.log('ts-lint task running...');
    return gulp.src(config.allTs)
        .pipe(tslint())
        .pipe(tslint({
            formatter: "verbose"
        }))
        // .pipe(tslint.report("verbose"))
})

gulp.task('compile-ts', function() {
    console.log('compile-ts task running...');
    var sourceTsFiles = [
        config.allTs,
        config.typings
    ];

    var tsResult = gulp
    .src(sourceTsFiles)
    .pipe(sourcemaps.init())
    .pipe(tsProject())

    return tsResult.js
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(config.tsOutputPath));
});

gulp.task('sass', function(){
    console.log('sass is running...');
    // return gulp.src('src/app/styles.scss')
    return gulp.src('src/app/**/*.scss')
      .pipe(sass()) // Using gulp-sass
      .pipe(gulp.dest('src/app/css'))
      .pipe(browserSync.reload({
        stream: true
      }))
    });

gulp.task('browserSync', function() {
    console.log('browserSync is running...');
    
    browserSync.init({
        // port: 4200,
        // file: ['index.html', '**/*.js'],
        // injectChanges: true,
        // logFileChanges: true,
        // logLevel: 'verbose',
        // notify: true,
        // reloadDelay: 0,
      server: {
        baseDir: 'src',
        middleware: superstatic({debug: false})
      },
    })
})

gulp.task('watch', ['browserSync', 'sass'], function(){
    gulp.watch('src/app/**/*.scss', ['sass']); 
    gulp.watch('src/app/component/**/*.scss', ['sass']); 
    // Reloads the browser whenever HTML or JS files change
    gulp.watch('src/app/**/*.html', browserSync.reload);
    gulp.watch('src/app/component/**/*.html', browserSync.reload);
    gulp.watch('src/app/**/*.js', browserSync.reload);
    gulp.watch('src/app/component/**/*.js', browserSync.reload);    
    gulp.watch('src/*.html', browserSync.reload);    
})

gulp.task('useref', function() {
	var assets = useref.assets();

	return gulp.src('app/*.html')
		.pipe(assets)
		.pipe(gulpIf('*.css', minifyCSS()))
		.pipe(gulpIf('*.js', uglify()))
		.pipe(assets.restore())
		.pipe(useref())
		.pipe(gulp.dest('dist'))
});

gulp.task('images', function() {
	return gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg)')
	.pipe(cache(imagemin( {
		interlaced: true
	})))
	.pipe(gulp.dest('dist/images'))
});

gulp.task('fonts', function() {
	return gulp.src('app/fonts/**/*')
	.pipe(gulp.dest('dist/fonts'))
});

// Cleaning
gulp.task('clean', function(callback) {
	del('dist');
	return cache.clearAll(callback);
})


gulp.task('clean:dist', function(callback) {
	del(['dist/**/*', '!dist/images', '!dist/images/**/*'], callback)
});

// Build Sequences
gulp.task('build', function (callback) {
	runSequence('clean:dist',
		['sass', 'useref', 'images', 'fonts'],
		callback
		)
})

gulp.task('default', function (callback) {
	runSequence(['message', 'ts-lint', 'sass', 'browserSync', 'watch'],
		callback
		)
})

styles.css

.testing {
  width: 71.42857%; }

.head {
  background: red; }

.body {
  background: #177794; }

.html {
  background: green; }

Any tips or advice to solve these issues would be greatly appreciated!

Thanks in advance!

Rav about 6 years

I see, any idea what is preventing the execution of the gulpfile.js code?
lofihelsinki about 6 years

I'm not sure it makes a difference, but try to replace .pipe(browserSync.reload({ stream: true })) with .pipe(browserSync.stream()); in gulp.task('sass')
Rav about 6 years

that unfortunately returns the same error: { "message": "Uncaught ReferenceError: require is not defined", "filename": "stacksnippets.net/js", "lineno": 13, "colno": 20 }
lofihelsinki about 6 years

I don't think that error has much to do with Gulp, but rather Angular. You could start by searching for similar issues: stackoverflow.com/search?q=%5Bangular%5D+require+is+not+defi‌ned