ParseError: 'import' 和 'export' 可能只出现在 'sourceType: module' - swiper.esm.js

Question

I've a problem with gulp and browserify. I want minify my index.js but he's import a figure.js with import 'swiper'. And Swiper contains "import" and "export" too.

My package.json

 {
  "name": "gulp-frontend-kit",
  "version": "2.0.0",
  "description": "Gulp boilerplate front-end dev Archriss",
  "author": "Archriss",
  "dependencies": {
    "cookies-js": "^1.2.3",
    "custom-event-polyfill": "^1.0.7",
    "element-qsa-scope": "^1.0.1",
    "html-truncate": "^1.2.2",
    "lightgallery.js": "^1.0.1",
    "node-fetch": "^3.2.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "swiper": "^8.2.2",
    "tingle.js": "^0.16.0",
    "tippy.js": "^6.3.7"
  },
  "devDependencies": {
    "@babel/cli": "^7.17.10",
    "@babel/core": "^7.18.5",
    "@babel/plugin-proposal-class-properties": "^7.17.12",
    "@babel/plugin-transform-runtime": "^7.18.5",
    "@babel/preset-env": "^7.18.2",
    "@babel/preset-react": "^7.17.12",
    "@babel/register": "^7.15.3",
    "autoprefixer": "^10.4.7",
    "babel-eslint": "^10.1.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babelify": "^10.0.0",
    "browserify": "^17.0.0",
    "css-mqpacker": "^7.0.0",
    "cssnano": "^5.1.11",
    "del": "^6.1.1",
    "eslint": "^8.17.0",
    "eslint-config-standard": "^17.0.0",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^6.0.0",
    "eslint-plugin-standard": "^5.0.0",
    "gulp": "^4.0.0",
    "gulp-buffer": "0.0.2",
    "gulp-clean-css": "^4.3.0",
    "gulp-combine-mq": "^0.4.0",
    "gulp-concat": "^2.6.0",
    "gulp-imagemin": "^7.1.0",
    "gulp-livereload": "^4.0.2",
    "gulp-postcss": "^9.0.1",
    "gulp-sass": "^5.1.0",
    "gulp-sourcemaps": "^3.0.0",
    "gulp-stylelint": "^13.0.0",
    "gulp-terser": "^2.1.0",
    "gulp-uglify": "^3.0.2",
    "gutil": "^1.6.4",
    "imagemin-pngquant": "^9.0.2",
    "node-sass": "^7.0.1",
    "postcss-markdown": "^1.2.0",
    "sass": "^1.52.3",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^2.0.0"
  },
  "scripts": {
    "start": "gulp",
    "watch": "gulp watch",
    "build": "gulp build"
  },
  "browserify": {
    "transform": [
      [
        "babelify",
        {
          "presets": [
            "@babel/preset-env"
          ]
        }
      ]
    ]
  }
}

My .babelrc

{
   "presets": [
       "@babel/react" , 
       "@babel/env" , 
   ],
   "plugins": [
       "@babel/plugin-proposal-class-properties"
   ]
}

My gulpfile.babel.js

const {src, dest, watch, series, parallel} = require('gulp'),
  browserify = require('browserify'),
  buffer = require('vinyl-buffer'),
  concat = require('gulp-concat'),
  livereload = require('gulp-livereload'),
  source = require('vinyl-source-stream'),
  sourcemaps = require('gulp-sourcemaps'),
  uglify = require('gulp-uglify'),
  babelify = require("babelify")

const FILENAMES = {jsCode: 'app.js', jsVendor: 'vendor.js'};

const PATHS = {
  dest: {
    global: './dist',
    imgFolder: 'img',
    prodFolder: 'prod',
    devFolder: 'dev'
  },
  src: {
    assets: ['src/assets/**', '!src/assets/{img,img/**}'],
    html: 'src/html/*.html',
    img: 'src/assets/img/**/*',
    jsCode: ['src/js/**/*.js', '!src/js/{vendor,vendor/**}'],
    jsEntry: 'src/js/index.js',
    jsVendor: 'src/js/vendor/*.js',
    scss: 'src/scss/**/*.scss'
  }
};

function html() {
  return src(PATHS.src.html).pipe(livereload());
}

function JSVendor(isDev) {
  const targetFolder = isDev === true ? PATHS.dest.devFolder : PATHS.dest.prodFolder;
  return src(PATHS.src.jsVendor)
    .pipe(concat(FILENAMES.jsVendor))
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(sourcemaps.write('./'))
    .pipe(dest(PATHS.dest.global + '/' + targetFolder))
    .pipe(livereload());
}

function JSCode(isDev) {
  const targetFolder = isDev === true ? PATHS.dest.devFolder : PATHS.dest.prodFolder;
  return (
    browserify({
      entries: [PATHS.src.jsEntry],
      // Pass babelify as a transform and set its preset to @babel/preset-env
      transform: [babelify.configure({presets: ["@babel/preset-env"]})]
    })
      // Bundle it all up!
      .bundle()
      // Source the bundle
      .pipe(source("bundle.js"))
      // Then write the resulting files to a folder
      .pipe(dest(PATHS.dest.global + '/' + PATHS.dest.devFolder))
  );
}

function catchJSErrors(err) {
  if (err instanceof SyntaxError) {
    console.log('Syntax Error');
    console.log(err.message);
    console.log(err.codeFrame);
  } else {
    console.log('Error', err.message);
  }
  this.emit('end');
}

exports.dev = function () {
  const isDev = true;

  watch(PATHS.src.html, html);
  watch(PATHS.src.jsVendor, JSVendor(isDev));
  watch(PATHS.src.jsCode, JSCode(isDev));
};

exports.build = function () {
  const devOptions = {type: 'changed'};
};

exports.default = series(html);

And My error

$ gulp dev
[17:58:49] Requiring external module @babel/register
[17:58:50] Using gulpfile E:\docker\images\XXX\web\themes\custom\XXX\front\gulpfile.babel.js
[17:58:50] Starting 'dev'...
[17:58:51] 'dev' errored after 1.13 s
[17:58:51] Error:
E:\docker\images\XXX\web\themes\custom\XXX\front\node_modules\swiper\swiper.esm.js:13
export { default as Swiper, default } from './core/core.js';
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'
    at formatError (C:\Users\XXX\AppData\Roaming\npm\node_modules\gulp-cli\lib\versioned\^4.0.0\format-error.js:21:10)
    at Gulp.<anonymous> (C:\Users\XXX\AppData\Roaming\npm\node_modules\gulp-cli\lib\versioned\^4.0.0\log\events.js:33:15)
    at Gulp.emit (node:events:539:35)
    at Gulp.emit (node:domain:475:12)
    at Object.error (E:\docker\images\XXX\web\themes\custom\XXX\front\node_modules\undertaker\lib\helpers\createExtensions.js:61:10)
    at handler (E:\docker\images\XXX\web\themes\custom\XXX\front\node_modules\now-and-later\lib\map.js:50:14)
    at f (E:\docker\images\XXX\web\themes\custom\XXX\front\node_modules\once\once.js:25:25)
    at f (E:\docker\images\XXX\web\themes\custom\XXX\front\node_modules\once\once.js:25:25)
    at tryCatch (E:\docker\images\XXX\web\themes\custom\XXX\front\node_modules\async-done\index.js:24:15)
    at done (E:\docker\images\XXX\web\themes\custom\XXX\front\node_modules\async-done\index.js:40:12)

My versions : npm -v : 8.12.1

node -v : v16.15.1

gulp -v : CLI : 2.3.0 - Local : 4.0.2

How fix this error ?

Answer 1

尝试添加global: true

transform: [babelify.configure({global: true, presets: ["@babel/preset-env"]})]