timber/starter-theme

Uncaught SyntaxError: Cannot use import statement outside a module

maevareynaud opened this issue · 1 comments

maevareynaud commented

Hi,
I try to import modules in js files but I obtained an error "Uncaught SyntaxError: Cannot use import statement outside a module"

I'm using gulp and here is my gulp file

const gulp        = require('gulp')
// Compile scss to css (https://www.npmjs.com/package/gulp-sass)
const sass        = require('gulp-sass')
// Rename file (https://www.npmjs.com/package/gulp-rename)
const rename      = require('gulp-rename')
// Minify JS with UglifyJS3 (https://www.npmjs.com/package/gulp-uglify)
const uglify      = require('gulp-uglify')
// Minify CSS (https://www.npmjs.com/package/gulp-clean-css)
const cleancss    = require('gulp-clean-css')
// Concat all file, in one (https://www.npmjs.com/package/gulp-concat)
const concat      = require('gulp-concat')
// Images size more small (https://www.npmjs.com/package/gulp-imagemin)
const imagemin    = require('gulp-imagemin')
// Notification on your Mac/PC (https://www.npmjs.com/package/gulp-notify)
const notify      = require('gulp-notify')
// Write ES6 > compile to ES5 (https://www.npmjs.com/package/gulp-babel)
//const babel     = require('gulp-babel')
// Browser Sync (for live render -  (https://www.npmjs.com/package/browser-sync))
const browsersync = require('browser-sync').create()

// SourceMaps, add path impacted file (https://www.npmjs.com/package/gulp-sourcemaps)
const sourcemaps  = require('gulp-sourcemaps')



// PATH
const paths = {
  js: {
    src: ['./js/**/*.js', './js/*.js'],
    dest: '.dist/js'
  },
  css: {
      src: ['./scss/**/*.scss', './scss/*.scss'],
      dest: './css'
  },
  html: {
      src: ['./templates/*.twig', './templates/**/*.twig' ]
  }
}

const styles = () =>
    gulp.src(paths.css.src)
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(sass().on('error', sass.logError))
        .pipe(cleancss())
        .pipe(concat('main.css'))
        .pipe(rename({ suffix: ".min" }))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest(paths.css.dest))
        .pipe(browsersync.stream())
        //.pipe(notify("Css ok !"))// JS

      const scripts = () =>
    gulp.src(paths.js.src)
        .pipe(sourcemaps.init())
        .pipe(uglify())
        .pipe(concat('scripts.js'))
        .pipe(rename({ suffix: ".min" }))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(paths.js.dest))
        .pipe(browsersync.stream())
        //.pipe(notify("Js ok !"))


    const browserSyncWatch = () => {
      browsersync.init({
          proxy: "maeva.live",
          // ou proxy: "yourlocal.dev",
          port: 3000
      })
    }

    const twig = () =>
    gulp.src(paths.html.src)
        .pipe(browsersync.reload({ stream: true }));

    

    const watchFiles = () =>
    //gulp.watch(paths.js.src, scripts)
    gulp.watch(paths.css.src, styles)
    gulp.watch(paths.html.src, twig);


    const watcher = gulp.parallel(watchFiles, browserSyncWatch)
    const build = gulp.series(gulp.parallel(styles));

    exports.watch = watcher         // exec with : npx gulp watcher

I don't really understand how it works but the problem comes from here.

Do you have an idea ?

Thanks a lot in advance