0

I would to use easy-autocomplete to add suggestions while my users are typing the pseudo of a player on my web-app.

But it doesn't work.

Here is the message I've got :

people.js:7 Uncaught TypeError: $input.easyAutocomplete is not a function
    at HTMLDocument.<anonymous> (people.js:7)
    at Object../node_modules/turbolinks/dist/turbolinks.js.e.dispatch (turbolinks.js:75)
    at r.notifyApplicationAfterPageLoad (turbolinks.js:994)
    at r.pageLoaded (turbolinks.js:948)
    at turbolinks.js:872

Here is my code :

In app/javascript/packs/people.js

document.addEventListener("turbolinks:load", function() {
  $input = $("[data-behavior='autocomplete']")
  var options = {
    getValue: "pseudo"
  }
  $input.easyAutocomplete(options)
});

console.log("custom js file loaded")

Here is my layout :

app/views/layouts/application.html.erb

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload', defer: true %>
<%= javascript_pack_tag 'people', 'data-turbolinks-track': 'reload' %>

Of course in my layout, before and after this part there are script for OG facebook and twitter balises

Here is my environment.js :

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

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

module.exports = environment

I also tried this but it did not work as well :

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

const webpack = require('webpack');
// Preventing Babel from transpiling NodeModules packages
environment.loaders.delete('nodeModules');
// Bootstrap 4 has a dependency over jQuery & Popper.js:
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: ['popper.js', 'default']
  })
);
module.exports = environment

If you need more information I'm ready to answer.

Thanks by advance

gclement
  • 83
  • 9
  • You are loading `jquery` from a CDN but it seems you are providing a local path `$: 'jquery/src/jquery'` – engineersmnky Apr 19 '21 at 19:27
  • Yes, it means, I should change my environment.js file ? Or I can use another way to load my Jquery ? Also when I type ````$().jquery```` in the console it prints me the version of Jquery, don't know if it helps you to see more clearly ? – gclement Apr 19 '21 at 19:28
  • I honestly don't know anything about webpack but the way you have it configured does seem erroneous. – engineersmnky Apr 19 '21 at 19:29
  • Ok, I tried something else, but it still doesn't work (you can see the edit) – gclement Apr 19 '21 at 19:39

1 Answers1

0

You are including the javascript file in wrong way. As the helper method doc say:

  # DO:
  #
  #   <%= javascript_pack_tag 'calendar', 'map' %>
  #
  # DON'T:
  #
  #   <%= javascript_pack_tag 'calendar' %>
  #   <%= javascript_pack_tag 'map' %>

https://github.com/rails/webpacker/blob/f1b06c7fd5bc4b7fc7128742d1078466b94af71f/lib/webpacker/helper.rb#L89-L97

In your case:

<%= javascript_pack_tag 'application', 'people', 'data-turbolinks-track': 'reload', defer: true %>
Patrick Barattin
  • 617
  • 6
  • 18