2

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.

soniccool
  • 5,790
  • 22
  • 60
  • 98

1 Answers1

0

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
soniccool
  • 5,790
  • 22
  • 60
  • 98
  • Hey @soniccool, I have the same problem. I added the above code to the config/webpack/environment.js but I still get this error `Uncaught TypeError: $(...).typeahead is not a function`. I wanted to ask did you also add this `require("typeahead.js")` to the application.js file? – Dev Feb 12 '21 at 13:43