Webpacker rails 6 (loading Bloodhound and typeahead)

Question

I am trying to load Bloodhound and typeahead.query.js in webpacker of Ruby. I got Bloodhound working in the environment.rb file and I got rid of that error. But typeahead is still not working getting this error thrown.

Uncaught TypeError: $(...).typeahead is not a function

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

const webpack = require('webpack')
environment.plugins.append('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  Popper: ['popper.js', 'default'],
  Typeahead: 'typeahead.js/dist/typeahead.jquery.js',
  Bloodhound: 'typeahead.js/dist/bloodhound.js'
}))

module.exports = environment

I tried loading it in my application.js folder in the webpack applicaton.js file but then Bloodhound and typeahead.js dont load in.

Answer 1

The config/webpack/environment.js needs to look as follows:

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

const webpack = require('webpack')
environment.plugins.append('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  Popper: ['popper.js', 'default'],
  Bloodhound: 'typeahead.js/dist/bloodhound.js'
}))

const aliasConfig = {
  'typeahead': 'typeahead.js/dist/typeahead.jquery.js'
};

environment.config.set('resolve.alias', aliasConfig);

module.exports = environment