I'm still relatively new to the Rails game, but I was wondering whether anyone could assist with a problem that I have.

I wanted to implement [stimulus-autocomplete][1] into my rails 6 app, but when I follow the instructions laid out, I get an error in my console, and I'm not sure how to fix it.

My javascript/controllers/index.js file looks like so:

import { Application } from "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"
import { Autocomplete } from 'stimulus-autocomplete'

const application = Application.start()
const context = require.context("controllers", true, /_controller\.js$/)
application.load(definitionsFromContext(context))
application.register('autocomplete', Autocomplete)

I've run yarn add stimulus-autocomplete and rebooted my server, but I now get the following error in the console:

Uncaught Error: Module parse failed: Unexpected token (7:17)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
| export default class Autocomplete extends Controller {
>   static targets = ["input", "hidden", "results"]
|   static classes = ["selected"]
|   static values = {
    at ./node_modules/stimulus-autocomplete/src/autocomplete.js (bootstrap.esm.js:4999:1)
    at __webpack_require__ (bootstrap:19:1)
    at ./app/javascript/controllers/index.js (index.js:1:1)
    at __webpack_require__ (bootstrap:19:1)
    at ./app/javascript/packs/application.js (application.js:1:1)
    at __webpack_require__ (bootstrap:19:1)
    at bootstrap:83:1
    at bootstrap:83:1

I think it's an issue with the static targets themselves and possibly something to do with support in ES6, but I haven't been able to find a solution.

I'm using webpack on the application.

If anyone has any pointers, it's much appreciated!