Angular app causes Uncaught SyntaxError: Unexpected identifier on import-from in JavaScript

Question

I've included video.js 5.16.0 and videojs-record 1.6.0 in my Bower.json, the resulting JavaScript code gets injected in the following index.html

<!DOCTYPE html>
<html>
<head>
    <base href="/">
    <title>SelectPOP</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta charset="UTF-8">
    <meta name="description" content="Architecture">
    <meta name="keywords" content="">
    <meta name="author" content="Sombra">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <!-- inject:fonts:css --><!-- endinject -->
    <!-- inject:vendor-styles:css --><link rel="stylesheet" href="../css/vendor-93729a7ec8.css"><!-- endinject -->
    <!-- inject:app-styles:css --><link rel="stylesheet" href="../css/main-53180137c4.css"><!-- endinject -->
    <!-- uncomment if using your own iconfont -->
    <!-- <link rel="stylesheet" href="styles/own-icons.css"> -->
</head>

<body ng-app="selectPopApp" ng-strict-di>

<header>
    <header-component></header-component>
</header>

<div class="container">
    <div class="row">
        <div class="col-lg-12 main-content" ui-view>
        </div>
    </div>
</div>


</body>

<!-- inject:vendor:js --><script src="../js/vendor-ef1f3e9bbb.js"></script><!-- endinject -->
<!-- inject:app:js --><script src="../js/app-d9c3c6c010.module.js"></script><!-- endinject -->
<!-- inject:scripts:js --><script src="../js/scripts-be58dca5c9.js"></script><!-- endinject -->

<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src=https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js></script>

</html>

I run the app using Spring-boot, but when I use it in Chrome I get an "Uncaught Syntax Error: Unexpected identifier". The JavaScript that causes the issue is:

import log from './utils/log';
import formatTime from './utils/format-time';
import pluginDefaultOptions from './defaults';
import window from 'global/window';

import videojs from 'video.js';
import WaveSurfer from 'wavesurfer.js';

I tried inserting type="module" into html as suggested in this Q&A, then Chrome stops complaining about the first import-from and gets an error at the "import window from 'global/window' line

Gulp.js used is the following:

(function () {
    'use strict';

    var gulp = require('gulp');
    var plugins = require('gulp-load-plugins')();
    var del = require('del');
    var express = require('express');
    var open = require('open');
    var stylish = require('jshint-stylish');
    var streamqueue = require('streamqueue');
    var runSequence = require('run-sequence');
    var merge = require('merge-stream');
    var ripple = require('ripple-emulator');
    var wiredep = require('wiredep');
    var rigger = require('gulp-rigger');
    var deletefile = require('gulp-delete-file');
    var inject = require('gulp-inject');

    var path = {
        build: {
            html: {
                views: 'dist/pages/views/',
                components: 'dist/pages/components',
                directives: 'dist/pages/directives'
            },
            js: 'dist/js/',
            css: 'dist/css/',
            img: 'dist/images/',
            fonts: 'dist/fonts/',
            icons: 'dist/icons/'
        },
        src: {
            js: 'app/**/*.js',
            styles: {
                common: 'app/styles/**/*.scss',
                views: 'app/views/**/*.scss',
                components: 'app/components/**/**/*.scss',
                directives: 'app/directives/**/**/*.scss'
            },
            html: {
                views: 'app/views/**/*.html',
                components: 'app/components/**/**/*.html',
                directives: 'app/directives/**/**/*.html'
            },
            assets: {
                css: 'app/assets/css/**/*.css',
                img: 'app/assets/images/**/*.*',
                fonts: 'app/assets/fonts/*.*',
                icons: 'app/assets/icons/*.*'
            }
        },
        dist: 'dist',
        distStatic: '../resources/dist'
    };

    var resourcesPath = {
        fontsScss: 'app/styles/_fonts.scss',
        stylesMainSrc: 'app/styles/main.scss',
        appModule: 'app/app.module.js',
        indexSrc: 'app/index.html',
        indexDist: 'dist/pages/index.html',
        pagesFolder: '/pages/'
    };

    /*** Tasks ------------------------------------------------------------------------- ***/

    /*** Maintenance ---------------------------------------------- ***/

    gulp.task('clean', function (done) {
        return del([path.dist], done);
    });

    gulp.task('clean-static', function (done) {
        return del([path.distStatic], {force: true}, done);
    });

    gulp.task('delete-app-module', function () {
        var dest = path.build.js + '*.js';
        var regexp = /^app|scripts/;
        return gulp.src(dest).pipe(deletefile({
            reg: regexp,
            deleteMatch: true
        }))
    });

    gulp.task('delete-styles', function () {
        var regexp = /^main|fonts/;
        return gulp.src([path.build.css + '*.css']).pipe(deletefile({
            reg: regexp,
            deleteMatch: true
        }));
    });

    /*** Assets --------------------------------------------------- ***/

    gulp.task('images', function () {
        return gulp.src(path.src.assets.img)
            .pipe(gulp.dest(path.build.img));
    });

    gulp.task('icons', function () {
        return gulp.src(path.src.assets.icons)
            .pipe(gulp.dest(path.build.icons));
    });

    gulp.task('fonts', function () {
        gulp.src('bower_components/font-awesome/fonts/**.*')
            .pipe(gulp.dest(path.build.fonts));
        return gulp.src([path.src.assets.fonts, 'bower_components/**/*.{ttf,woff,woff2,eof,svg}'])
            .pipe(gulp.dest(path.build.fonts));
    });

    /*** App files --------------------------------------------------- ***/

    gulp.task('styles', ['delete-styles'], function () {
        var injectAppFiles = gulp.src(
            [
                path.src.styles.views,
                path.src.styles.components,
                path.src.styles.directives,
                '!' + resourcesPath.stylesMainSrc
            ],
            {read: false}
        );
        var injectAppOptions = {
            transform: transformFilepath,
            starttag: '// inject:app',
            endtag: '// endinject',
            addRootSlash: false
        };

        function transformFilepath(filepath) {
            return '@import "' + filepath + '";';
        }

        gulp.src(resourcesPath.fontsScss)
            .pipe(plugins.sass({style: 'expanded'}))
            .pipe(plugins.rev())
            .pipe(gulp.dest(path.build.css));

        return gulp.src(resourcesPath.stylesMainSrc)
            .pipe(inject(injectAppFiles, injectAppOptions))
            .pipe(plugins.sass({style: 'expanded'}))
            .pipe(plugins.autoprefixer('last 2 version', '>1%', 'ie 9'))
            .pipe(plugins.stripCssComments())
            .pipe(plugins.rev())
            .pipe(gulp.dest(path.build.css));
    });

    gulp.task('scripts', ['delete-app-module'], function () {
        var dest = path.build.js;
        var scriptStream = gulp.src(['**/*.js', '!app.module.js'], {cwd: 'app'})
            .pipe(plugins.changed(dest));

        gulp.src(resourcesPath.appModule)
            .pipe(plugins.rev())
            .pipe(gulp.dest(dest));

        return streamqueue({objectMode: true}, scriptStream)
            .pipe(plugins.ngAnnotate())
            .pipe(plugins.concat('scripts.js'))
            .pipe(plugins.rev())
            .pipe(gulp.dest(dest));
    });

    gulp.task('html', function () {
        gulp.src(path.src.html.views)
            .pipe(rigger())
            .pipe(gulp.dest(path.build.html.views));
        gulp.src(path.src.html.components)
            .pipe(rigger())
            .pipe(gulp.dest(path.build.html.components));
        gulp.src(path.src.html.directives)
            .pipe(rigger())
            .pipe(gulp.dest(path.build.html.directives));
    });

    /*** Vendor ---------------------------------------------------- ***/

    gulp.task('vendor-js', function () {
        var vendorFiles = wiredep().js;

        return gulp.src(vendorFiles)
            .pipe(plugins.concat('vendor.js'))
            .pipe(plugins.rev())
            .pipe(gulp.dest(path.build.js));
    });

    gulp.task('vendor-css', function () {
        var vendorStyle = wiredep().css;

        return gulp.src(vendorStyle)
            .pipe(plugins.concat('vendor.css'))
            .pipe(plugins.rev())
            .pipe(gulp.dest(path.build.css));
    });

    /*** Assemble tasks ------------------------------------------- ***/

    gulp.task('injector', ['scripts', 'html', 'styles'], function () {
        var _inject = function (src, tag) {
            return plugins.inject(src, {
                starttag: '<!-- inject:' + tag + ':{{ext}} -->',
                addRootSlash: false,
                ignorePath: path.dist,
                addPrefix: '..'
            });
        };
        return gulp.src(resourcesPath.indexSrc)
            .pipe(_inject(gulp.src(path.build.css + '/fonts*.css'), 'fonts'))
            .pipe(_inject(gulp.src(path.build.css + '/main*.css'), 'app-styles'))
            .pipe(_inject(gulp.src(path.build.css + '/vendor*.css'), 'vendor-styles'))
            .pipe(_inject(gulp.src(path.build.js + '/vendor*.js'), 'vendor'))
            .pipe(_inject(gulp.src(path.build.js + '/app*.js'), 'app'))
            .pipe(_inject(gulp.src(path.build.js + '/scripts*.js'), 'scripts'))
            .pipe(gulp.dest(path.dist + resourcesPath.pagesFolder));
    });

    gulp.task('log-success', function () {
        console.log('----------------- GULP BUILD SUCCESS --------------------');
    });

    gulp.task('watchers', function () {
        gulp.watch(path.src.assets.css, ['styles', 'injector']);
        gulp.watch(path.src.assets.fonts, ['fonts']);
        gulp.watch(path.src.assets.img, ['images']);
        gulp.watch(path.src.html.views, ['html', 'injector']);
        gulp.watch(path.src.html.components, ['html', 'injector']);
        gulp.watch(path.src.html.directives, ['html', 'injector']);
        gulp.watch(path.src.styles.common, ['styles', 'injector']);
        gulp.watch(path.src.styles.views, ['styles', 'injector']);
        gulp.watch(path.src.styles.components, ['styles', 'injector']);
        gulp.watch(path.src.styles.directives, ['styles', 'injector']);
        gulp.watch(path.src.js, ['scripts', 'injector']);
        gulp.watch(resourcesPath.indexSrc, ['html', 'injector']);
        gulp.watch('bower.json', ['vendor-js', 'vendor-css']);
    });

    gulp.task('default', function (done) {
        runSequence(
            'clean',
            'clean-static',
            [
                'fonts',
                'images',
                'vendor-js',
                'vendor-css',
                'styles',
                'html',
                'icons'
            ],
            'injector',
            'watchers',
            'log-success',
            done);
    });

    gulp.task('deploy', function (done) {
        runSequence(
            'clean',
            'clean-static',
            [
                'fonts',
                'images',
                'vendor-js',
                'vendor-css',
                'styles',
                'html',
                'icons'
            ],
            'injector',
            done);
    });

})();

It's clearly AngularJs there's no such things as 'ng-app' or 'ng-strict-di' in Angular 2+. However those are commonplace in AngularJs — Mickers, Dec 11 '18 at 20:37

score 0 · Answer 1 · answered Dec 11 '18 at 20:30

how are you compiling this? Based on your syntax and the names of your compiled modules, I'm assuming you're using either Webpack, which means you're likely using Typescript (unless you meant to tag as AngularJS instead). In any case, ES6 import statements are the same, and the syntax you're using is for default exports only.

import can only be used in ES6 JS if type="module" is on the script tag.

So, unless you're setting default exports and relying on them, the syntax for importing explicit exports is:

import { exportedProperty1 } from 'module-name'
import { exportedThing1, exportedThing2 } from 'module-name'
import defaultExport from 'module-name'
import * as Name from 'module-name'

...where 'module-name' is a relative path to the file.

This syntax does not require type="module":

let myThing = import('module-name')

your issue with window from global/window is going to be specific to your bundler, your platform, your files, and your polyfills.

score 0 · Accepted Answer · answered Jan 25 '19 at 20:43

All the packages that contained es6 JavaScript had to be compiled individually using webpack, then changes had to be made to the "overrides" section of bower.json for the big project to include dist directories and generated min.js files of the compiled projects in order for gulp to inject them. E.g.

"overrides" {
   "videojs-record": {
      "main": [
      "dist/videojs.record.min.js"
      ]
   }
}

Angular app causes Uncaught SyntaxError: Unexpected identifier on import-from in JavaScript

2 Answers2