0

I'm using the materialize lib in my project. I initialize all elements at once:

import 'materialize-css/dist/js/materialize.min';
let main = require('./js/main');
let $ = require('jquery');

M.AutoInit();

main.init();

and that causes no errors. Then in main.js I'm trying to use it as in documentation:

$('.tabs').tabs("select","tab2");

But I receive the error

TypeError: $(...).tabs is not a function

What am I forgetting about?

Malvinka
  • 1,185
  • 1
  • 15
  • 36
  • I see that you're including jQuery _after_ your custom script. Is that how it's loaded in the page? – isherwood Dec 11 '20 at 20:54
  • why need jquery? there is a standalone method for it: https://materializecss.com/tabs.html – Sysix Dec 11 '20 at 20:57
  • @isherwood not sure to be honest... the projects uses webpack in the way that I do not fully understand. Changing the order in the file does not change it though. I need to include jQuery in main.js as well (as it is not included generally) so maybe that is the same with materialize? The problem is that using that with `import` causes `ES Modules may not assign module.exports or exports.*, Use ESM export syntax, instead: ./js/main.js` error. How to include and use it then it correctly in that case? – Malvinka Dec 11 '20 at 20:58
  • @Sysix I use jquery anyway, not for materialize only. – Malvinka Dec 11 '20 at 21:00
  • @isherwood jquery is available, I'm using it in the project in `main.js` script successfully. – Malvinka Dec 11 '20 at 21:02
  • https://stackoverflow.com/questions/28969861/managing-jquery-plugin-dependency-in-webpack – Sysix Dec 11 '20 at 21:06
  • @Sysix jquery works fine in the very same module. – Malvinka Dec 11 '20 at 21:10

0 Answers0