I'm trying to display a map and a geosearch input field in a Laravel 8.0 app, using Leaflet and a plug-in called Leaflet-Geosearch. The map displays fine, but I'm having trouble with the geosearch plug-in. The docs say that "something like this should be bound to something like a form or input":

import { OpenStreetMapProvider } from 'leaflet-geosearch';

const form = document.querySelector('form');
const input = form.querySelector('input[type="text"]');

form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const results = await provider.search({ query: input.value });
  console.log(results); // » [{}, {}, {}, ...]
});

I can't figure out how to adapt this for a Laravel app. When I put the above code into the script tags on the form with the "import" statement included, I get an error, "Uncaught SyntaxError: import declarations may only appear at top level of a module." If I put that statement anywhere else, I get "Uncaught ReferenceError: OpenStreetMapProvider is not defined." Where should that import statement go and what form should it take?

I have very limited experience with javascript and with integrating javascript packages into Laravel, so I'd greatly appreciate some help!