Babel + Rollup.js Importing jQuery

990
May 01, 2017, at 06:23 AM

I'm trying to load jQuery into my bundled js with Babel and Rollup, but for some reason, it keeps throwing this error message:

src/js/components/jquery/dist/jquery.js (40:46) The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten
events.js:163
      throw er; // Unhandled 'error' event
      ^
Error: 'default' is not exported by src/js/components/jquery/dist/jquery.js
    at error (/var/www/node_modules/rollup/dist/rollup.js:170:12)
    at Module.error$1 [as error] (/var/www/node_modules/rollup/dist/rollup.js:8007:2)
    at Module.trace (/var/www/node_modules/rollup/dist/rollup.js:8106:9)
    at ModuleScope.findDeclaration (/var/www/node_modules/rollup/dist/rollup.js:7691:22)
    at Node.bind (/var/www/node_modules/rollup/dist/rollup.js:6743:29)
    at /var/www/node_modules/rollup/dist/rollup.js:5291:50
    at Node.eachChild (/var/www/node_modules/rollup/dist/rollup.js:5308:5)
    at Node.bind (/var/www/node_modules/rollup/dist/rollup.js:5291:7)
    at /var/www/node_modules/rollup/dist/rollup.js:5291:50
    at Node.eachChild (/var/www/node_modules/rollup/dist/rollup.js:5305:19)

Here is my gulp file.

var gulp         = require('gulp');
var gutil        = require('gulp-util');
var sourcemaps   = require('gulp-sourcemaps');
var sass         = require('gulp-sass');
var rollup       = require('gulp-better-rollup')
var autoprefixer = require('gulp-autoprefixer');
var server       = require('gulp-express');
var babel        = require('rollup-plugin-babel');
var eslint       = require('rollup-plugin-eslint');
//var commonjs     = require('rollup-plugin-commonjs');
//var nodeResolve  = require('rollup-plugin-node-resolve');
var inject       = require('rollup-plugin-inject');

gulp.task('bundle', function() {
  gulp.src('./src/js/**/*.js')
  .pipe(sourcemaps.init())
    // transform the files here.
    .pipe(rollup({
      // any option supported by Rollup can be set here.
      entry: './src/js/app.js',
      plugins: [
        babel({
          exclude: 'node_modules/**',
        }),
        eslint({
          exclude: 'node_modules/**',
        }),
        inject({
          include: '**/*.js',
          exclude: 'node_modules/**',
          jQuery: 'jquery',
          $: 'jquery',
        })
      ],
      format: 'cjs',
    }))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./dist'));
});

And of course, I have Bower importing jQuery into my 'components' folder where Babel code sits...

Here is my app.js

import jQuery from 'jquery';
var $ = jQuery;
$(function(){
  console.log("Hello, jQuery!");
});

Am I importing my jQuery incorrectly? Do I need to use a better plugin to accomplish this? All the tutorials I've found on the net have me doing the runaround. (Hence why I have a few modules commented out in my gulpfile.)

Rent Charter Buses Company
READ ALSO
jquery latest owlcarousel plugin usage issue

jquery latest owlcarousel plugin usage issue

Whenever i am trying to use the latest jquery based plugins (with Aspnet mvc5/ core) and download the sample/example source, i find many plugins rather than just one

323
How to populate server called data to materialized css chip autocomplete

How to populate server called data to materialized css chip autocomplete

I am trying to populate materialized css chip autocomplete data by using a server callI did tried many ways to make it, but not able to do so

364
How to make a SideNav draggable in Materialize.css?

How to make a SideNav draggable in Materialize.css?

By default, the SideNav from Materialize supports dragging gestures on the screen to slide out the navHowever, these gestures only work outside the nav

586