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.)
Firebase Cloud Functions: PubSub, "res.on is not a function"
TypeError: Cannot read properties of undefined (reading 'createMessageComponentCollector')
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
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
By default, the SideNav from Materialize supports dragging gestures on the screen to slide out the navHowever, these gestures only work outside the nav