0

NOT A DUPLICATE OF this, Its similar to this but the answer was never properly given.

Trying to break down a three js webpage, to understand it. But I am getting the above error. What I have realized is that I need to bundle my JS and I am trying to do the same.

gulp.task('compile', gulp.series('copy'), function() {
    var bsfy = watchify(browserify('./app/index.js', {
        debug: true,
        cache: {},
        packageCache: {}
    }));
    return bsfy.bundle()
    .on('error', notify.onError({
        'title': "Error when building Browserify",
        'subtitle': "<%= error.fileName %>",
        'message': "<%= error.message %>"
    }))
    .pipe(source('index.js'))
    .pipe(gulp.dest('./dist/'));
});

rest of my gulpfile is setup as

gulp.task('copy', function(done){ 
    gulp.src('./app/**')
    .pipe(gulp.dest('./dist/'));
    done();
});
gulp.task('watch', function() {
    gulp.watch('./app/**', ['compile']);
    browserSync.watch([
        './dist/**',
    ], {
        ignored: '**/*.map'
    }).on('change', browserSync.reload);
})

gulp.task('browser', function() {
    browserSync.init({
        port: 1234,
        watch: true,
        watchOptions: {
            ignoreInitial: true,
            ignored: '**/*.map'
        },
        files: ['./dist/**'],
        ui: false,
        server: {
            baseDir: "./dist/"
        }
    });
    gulp.series('watch');
});

gulp.task('default', gulp.series('compile', 'browser'));

but I still get the 

SyntaxError: import declarations may only appear at top level of a module

My gulp command starts the local web-server correctly

[15:58:50] Using gulpfile ~\OneDrive\Desktop\Programs\enigma\gulpfile.js
[15:58:50] Starting 'default'...
[15:58:50] Starting 'compile'...
[15:58:50] Starting 'copy'...
[15:58:50] Finished 'copy' after 9.34 ms
[15:58:50] Finished 'compile' after 11 ms
[15:58:50] Starting 'browser'...
[Browsersync] Access URLs:
 -----------------------------------
    Local: http://localhost:1234
 External: http://172.17.59.161:1234
 -----------------------------------
[Browsersync] Serving files from: ./dist/
[Browsersync] Watching files...

my app.js is configured to import gsap on the second line

'use strict';
import 'gsap';
import app from './app';
...

and I import index.js on my index.html as

<script src="./index.js" type="text/javascript"></script>
Blaine
  • 576
  • 9
  • 30
  • 1
    `import 'gsap';` is an incorrect syntax. – Khairul Islam Mar 11 '20 at 11:14
  • @KhairulIslam I dont know... The syntax error shows up whatever I import, be it app.js first, it works on my reference material however. https://github.com/Robpayot/portfolio/blob/master/dev/javascripts/app.js Note: My index.js is his app.js and my app.js is his appmanager.js – Blaine Mar 11 '20 at 11:25
  • 1
    Are you loading them in the right order? – Grumpy Mar 12 '20 at 13:10
  • @Grumpy I kind of suspected that but regardless of whatever I Import, I get syntax error on the very first import statement. – Blaine Mar 12 '20 at 13:13

0 Answers0