Topic: Unable to import MDB Pro

doweb priority asked 1 year ago


Expected behavior Being able to use Autocomplete in this particular instance. But i'm receiving an import error.

Actual behavior Script is loaded with type module, yet an error is thrown: TypeError: undefined is not an object (evaluating 't.mdb=e()')

Resources (screenshots, code snippets etc.)

The script i'm trying to make work: (Autocomplete example)

//mdb-ui-kit is located in node_modules 
import * as mdb from "../../../node_modules/mdb-ui-kit/js/mdb.min.js";
//This throws an error: TypeError: undefined is not an object (evaluating 't.mdb=e()')


const customItemAutocomplete = document.querySelector('#customItem');
const data = [
  { title: 'One', subtitle: 'Secondary text' },
  { title: 'Two', subtitle: 'Secondary text' },
  { title: 'Three', subtitle: 'Secondary text' },
  { title: 'Four', subtitle: 'Secondary text' },
  { title: 'Five', subtitle: 'Secondary text' },
  { title: 'Six', subtitle: 'Secondary text' },
];    
const dataFilter = (value) => {
  return data.filter((item) => {
    return item.title.toLowerCase().startsWith(value.toLowerCase());
  });
};

new mdb.Autocomplete(customItem, {
  filter: dataFilter,
  displayValue: (value) => value.title,
  itemContent: (result) => {
    return `
      <div class="autocomplete-custom-item-content">
        <div class="autocomplete-custom-item-title">${result.title}</div>
        <div class="autocomplete-custom-item-subtitle">${result.subtitle}</div>
      </div>
    `;
  },
});

I'm trying to use this module within a wordpress plugin that i'm coding myself, therefore it is not using a module bundler.

What am i doing wrong??


doweb priority answered 1 year ago


After a chat with ChatGPT, i managed to solve the problem. I have never been the best friends with JS modules. So in case anybody else got stuck here, the same way i did, here's the solution:

Since i'm not using a module bundler, I cannot use the import statement in my JavaScript file. Instead, i can access the mdb object directly from the global scope since i have included the mdb.min.js script in my HTML file.

Plus, wrapping it in a DOMContentLoaded event is a good practise to prevent it from initializing before it should.

So the modified autocomplete.js file looks like this (Without import statements)

  // autocomplete.js
document.addEventListener('DOMContentLoaded', function () {
const customItemAutocomplete = document.querySelector('#customItem');
const data = [
  { title: 'One', subtitle: 'Secondary text' },
  { title: 'Two', subtitle: 'Secondary text' },
  { title: 'Three', subtitle: 'Secondary text' },
  { title: 'Four', subtitle: 'Secondary text' },
  { title: 'Five', subtitle: 'Secondary text' },
  { title: 'Six', subtitle: 'Secondary text' },
];

const dataFilter = (value) => {
  return data.filter((item) => {
    return item.title.toLowerCase().startsWith(value.toLowerCase());
  });
};

new mdb.Autocomplete(customItemAutocomplete, {
  filter: dataFilter,
  displayValue: (value) => value.title,
  itemContent: (result) => {
    return `
      <div class="autocomplete-custom-item-content">
        <div class="autocomplete-custom-item-title">${result.title}</div>
        <div class="autocomplete-custom-item-subtitle">${result.subtitle}</div>
      </div>
    `;
  },
});
  });

And the html file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your Project</title>

  <!-- MDB UI Kit CSS -->
  <link rel="stylesheet" href="node_modules/mdb-ui-kit/css/mdb.min.css">
</head>
<body>

  <!-- Your HTML content here -->
    <div class="container">
        <div class="row">
        <div class="col-12">
            <div id="customItem" class="form-outline" data-mdb-list-height="290">
                <input type="text" id="form14" class="form-control" />
                <label class="form-label" for="form1">Example label</label>
              </div>
        </div>
        </div>
  <!-- MDB UI Kit JS (Without type module)-->
  <script type="text/javascript" src="node_modules/mdb-ui-kit/js/mdb.min.js"></script>
  <!-- Custom script for adding autocomplete functionality  (Without type module) -->
  <script type="text/javascript" src="public/partials/js/autocomplete.js"></script>
</body>
</html>

This works just as intended :)

You can close this one as resolved. Thanks



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 6.2.0
  • Device: MacBook Pro 16"
  • Browser: Chrome, Safari
  • OS: Mac OS
  • Provided sample code: No
  • Provided link: No