We've moved discussions to Discord

Let me count the ways I hate webpacker... (please help with jquery)

Rob Jonson
I took forever on my last rails project to get jquery properly installed. I ended up with:

#environment.js
const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.append('Provide', new webpack.ProvidePlugin({
	$: 'jquery',
	jQuery: 'jquery',
}))

module.exports = environment

now everything looks completely different in jumpstart - and the tutorials I can find all look like my example rather than

#default.js
const { webpackConfig, merge } = require('@rails/webpacker')
const customConfig = {
  // Use cheap sourcemap generation
  devtool: 'eval-cheap-module-source-map',
  resolve: {
    extensions: ['.css']
  }
}

module.exports = merge(webpackConfig, customConfig)

 I have done 'yarn add jquery'
how do I add the plugin to the default.js??

I have tried a bunch of things, but basically don't understand what is going on here - so I'm getting nowhere.

please help!


Rob Jonson
ok - so with a combination of random examples found in the webpacker repo issues, I have the following that seems to work

const { webpackConfig, merge } = require('@rails/webpacker')
const customConfig = {
  // Use cheap sourcemap generation
  devtool: 'eval-cheap-module-source-map',
  resolve: {
  	extensions: ['.css']
  }
}

const jquery     = require('jquery')
const webpack    = require('webpack')

// Add Webpack plugins
webpackConfig.plugins.unshift(
  new webpack.ProvidePlugin({
    $:         'jquery',
    jQuery:    'jquery',
    jquery:    'jquery'
  })
)

module.exports = merge(webpackConfig, customConfig, jquery)

it feels wrong/ugly though. Am I doing it right?
Stijn Verrept
Excellent question, hopefully somebody with good JS knowledge can confirm this is the right way to do this.
Chris Oliver
I don't think there's any reason to require jquery in that file.

Here's what I used to do in the free Jumpstart to add jQuery for Bootstrap 4.

const webpack = require('webpack')
environment.plugins.append('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  Rails: '@rails/ujs'
}))
Tried Rob's suggestion. JSP boots at least, but doesn't seem to actually load jquery. also tried it without the require and merged of jquery. 

As a smoketest on one of the static pages (About) I added:

<script>
  $(document).ready(function(){
    console.log("jquery is loaded");
   $("#msgid").html("This is Hello World by JQuery");
  });
</script>
<div id='msgid'></div>

but the browser's console shows:
Uncaught ReferenceError: $ is not defined

Chris Oliver re your reply, looks like jquery is dropped from the freebie so cant see exactly where you had it... for JSP where (what path/file) is the right place to add that snippet you suggest?

The main problem is that the JSP webpacker config is rather different from any other examples out there (no environment.js for example), and in the snippet you provided the part
environment.plugins.append
throws the error on startup:
[webpack-cli] ReferenceError: environment is not defined

Also there's no ".plugins"

const webpack = require('webpack')
environment.plugins.append('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  Rails: '@rails/ujs'
}))

Chris, I'd encourage you to consider adding jquery back as a first class citizen of JSP for a while. Rails is, IMO, a looooong way off from the happy day when it seems prudent to drop jquery and rely 100% of the current bleeding-edge fancy new Rails alternatives.

Chris Oliver   bumping this thread to see if you had any follow-up thoughts to  JPW  's last comment? I'm running into the exact same issue. 

thanks!
Chris Oliver
Rob Jonson
Brandon I'm using a _much_ simpler approach now. Following DHH's video about 'the new way'

https://world.hey.com/dhh/modern-web-apps-without-javascript-bundling-or-transpiling-a20f2755

I just add jquery from a cdn directly into my head:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

I haven't tried incorporating jQuery-UI, so not sure whether you'll hit the issues  Chris Oliver mentions in the esbuild screencast. But I love the simplicity!
Notifications
You’re not receiving notifications from this thread.