Unable to import MDB Pro

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??

Add comment

doweb priority answered 1 year ago

0 0 Best answer

<p>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:</p>

<p>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.</p>

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

<p>So the modified autocomplete.js file looks like this (Without import statements)</p>

<pre class="prettyprint"><code>  // 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>
    `;
  },
});
  });
</code></pre>

<pre class="prettyprint"><code><!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>

<link rel="stylesheet" href="node_modules/mdb-ui-kit/css/mdb.min.css">
</head>
<body>

<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>
  
  <script type="text/javascript" src="node_modules/mdb-ui-kit/js/mdb.min.js"></script>
  
  <script type="text/javascript" src="public/partials/js/autocomplete.js"></script>
</body>
</html>
</code></pre>

<p>This works just as intended :)</p>

<p>You can close this one as resolved. Thanks</p>

Please insert min. 20 characters.

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

Add comment

Write

Create snippet

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

doweb

15Support score
8Questions 5Answers 0Snippets