I'm trying to create an address search component using Dawa Address library (Danish Addresses) https://dawadocs.dataforsyningen.dk/dok/guide/autocomplete#trin-2-installer-dawa-autocomplete2-komponenten

This is my js code

import corejs from "@salesforce/resourceUrl/corejs";
import dawaFetch from "@salesforce/resourceUrl/dawaFetch";
import dawaAutocomplete from "@salesforce/resourceUrl/dawaAutocomplete";
import dawaStyles from "@salesforce/resourceUrl/dawaStyles";

import { LightningElement } from "lwc";
import { loadScript, loadStyle } from "lightning/platformResourceLoader";

export default class DawaAddress extends LightningElement {
  hasRendered = false;
  isLoading = false;

  renderedCallback() {
    if (this.hasRendered) {
    this.hasRendered = true;
    this.isLoading = true;
      loadScript(this, dawaAutocomplete + '/dawa.js'),
      loadScript(this, corejs + '/core.js'),
      loadScript(this, dawaFetch + '/fetch.js'),
      loadStyle(this, dawaStyles)
      .then(() => {
        this.isLoading = false;
      .catch((err) => {
        console.error("Error = ", err);


  initAddress() {
    const addressElm = this.template.querySelector("input");
    console.log("addresselm = ", addressElm);
    if (addressElm) {
      dawaAutocomplete.dawaAutocomplete(addressElm, {
        select: function (selected) {
          console.log("Valgt adresse: " + selected.tekst);
      // eslint-disable-next-line @lwc/lwc/no-async-operation
      setTimeout(() => {
      }, 100);
    } else {
      console.error("No input element found");

and this is my template code

    <div class="autocomplete-container">
      <div class='autocomplete-container'>
        <input type="text" id="adresse">
        <!-- Suggestions will appear here -->

When I type in the front end, it throws this error

Uncaught TypeError: d.default.dawaAutocomplete is not a function throws at

Any suggestions how to fix it?


1 Answer 1


You won't be able to use this on lightning-input at all, because the dawa library needs to manipulate an HTMLInputElement, which is protected by the Shadow DOM in LWC. If you want SLDS styling but still have this work, you'll have to adapt the Input blueprint and then load the script, having it attach to the native input instead. I'm not sure what it's supposed to look like when it's done, but I did manage a simple example, which I'll link below.


  • I was thinking that because it's an npm library, the default export did not work as expected ... looked into into perhaps changing to an ES6 module, but looked like too much work. Am I wrong in thinking that might have been the issue? Nov 13, 2022 at 21:39
  • 1
    @CasparHarmer It's not a default export. The actual code I needed was import { dawaAutocomplete } from "dawa-autocomplete2" (in my npm-based example). I think the entire thing ends up being a function if you import it as a static resource, so it'd probably be dawaAutocomplete(...) instead of dawaAutocomplete.dawaAutocomplete(...).
    – sfdcfox
    Nov 13, 2022 at 21:57
  • @sfdcfox thank you for the demo and I tried to implement in the project and it doesn't get loaded I guess because I'm still getting the. error dawaAddress.js:1 Error = TypeError: r.default is not a function at p.handleAddress (dawaAddress.js:1:2047) at eval (dawaAddress.js:1:1963) I edit the code in the question to the new implementation
    – Mujahid
    Nov 14, 2022 at 15:23
  • @sfdcfox It looks like I may need to add core js and fetch js but it looks like core js has some issues, that the loadScript throws undefined error
    – Mujahid
    Nov 14, 2022 at 19:20

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .