Monday, 25 January 2021

gulp4 - cannot compile Vue app with AG Grid Vue

It seems that Gulp JS, maybe likely Babel is not compatible with ag-grid-vue. Whenever I try to compile 1 get this error:

import { Component, Prop, Vue } from 'vue-property-decorator';
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'

One of my components is importing ag-grid-vue

import {AgGridVue} from 'ag-grid-vue';

My gulp task looks like:

const del = require('del');
const babelify     = require('babelify');
const browserify = require('browserify');
const { src, dest, series, parallel, task } = require('gulp');
const source = require('vinyl-source-stream');
const buffer = require('vinyl-buffer');
const sourcemaps = require('gulp-sourcemaps');
const fs = require('fs');
const sass = require('gulp-sass');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const imagemin = require('gulp-imagemin');
const rename = require('gulp-rename');
const minify = require('gulp-minify');
const cleanCSS = require('gulp-clean-css');
task(
  'js',
  series(
    'clean:js',
    () => {
      // set up the browserify instance on a task basis
      var b = browserify({
        entries: './_src/js/entry.js',
        debug: true
      })
      .transform(babelify.configure({
        presets: ["@babel/preset-env"]
      }));

      return b.bundle()
        .pipe(source('site.js'))
        .pipe(buffer())
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(minify({
          ext: {
            min: '.min.js'
          }
        }))
        .pipe(sourcemaps.write('./'))
        .pipe(dest('./dist/js/'));
    }
  )
);

And my package.json file has the following installed:

"ag-grid-community": "^21.0.1",
"ag-grid-vue": "^25.0.0",
"vue": "^2.6.12",

Here is the full error

/Users/.../sites/vagrant/www/.../my-app/node_modules/ag-grid-vue/lib/AgGridVue.js:20
import { Component, Prop, Vue } from 'vue-property-decorator';
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'
    at formatError (/usr/local/lib/node_modules/gulp-cli/lib/versioned/^4.0.0/format-error.js:21:10)
    at Gulp.<anonymous> (/usr/local/lib/node_modules/gulp-cli/lib/versioned/^4.0.0/log/events.js:33:15)
    at Gulp.emit (events.js:198:15)
    at Gulp.EventEmitter.emit (domain.js:481:20)
    at Object.error (/Users/.../sites/vagrant/www/.../my-app/node_modules/undertaker/lib/helpers/createExtensions.js:61:10)
    at handler (/Users/.../sites/vagrant/www/.../my-app/node_modules/now-and-later/lib/mapSeries.js:47:14)
    at f (/Users/.../sites/vagrant/www/.../my-app/node_modules/once/once.js:25:25)
    at f (/Users/.../sites/vagrant/www/.../my-app/node_modules/once/once.js:25:25)
    at tryCatch (/Users/.../sites/vagrant/www/.../my-app/node_modules/async-done/index.js:24:15)
    at done (/Users/.../sites/vagrant/www/.../my-app/node_modules/async-done/index.js:40:12)


from gulp4 - cannot compile Vue app with AG Grid Vue

No comments:

Post a Comment