$(...).sideNav is not a function

[hojgr]

Hello,

I'm trying to activate my sideNav navigation when page turns to mobile view and I'm unable to use Materialize's Javascript.

I've included this in my ember-cli-build.js, searched around but the last hour of looking around was unfortunately fruitless.

  var app = new EmberApp(defaults, {
    // Add options here
    sassOptions: {
      includePaths: [
        'bower_components/materialize/sass'
      ]
    },
    'materialize-shim': {
      omitJS: true
    }
  });

The CSS works just well, but when I try to call following code from my route/activate() or chrome's console

  $(".button-collapse").sideNav();

I get

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

I've tried to include the materialize here and there with the

    import Materialize from 'materialize';

but it always ends up with this error in Chrome's console

    Caught Error: Could not find module `materialize` imported from `konektor/routes/app`

Is there any way to fix this? Am I missing something important? In the readme it says to import the materialize in my-file.js - there is no such file, so I'm not sure what to think of that.

Thank you very much :)

[Mattkins]

I am also extremely confused by what "my-file.js" means. I tried adding the import to app.js, but Ember said it couldn't find the module.

[Mattkins]

I was able to fix this issue by adding this line to my ember-cli-build.js file, after the app declaration.

app.import('bower_components/materialize/bin/materialize.js');

[lypborges]

@hojgr I just did that today and work for me. Here are my cli-build:

var app = new EmberApp(defaults, {
    // Add options here
    sassOptions: {
      includePaths: [
        'bower_components/materialize/sass'
      ]
    }
  });

Then I could call on console. To make it work by default I make a component and put this on the js of the component:

import Ember from 'ember';

export default Ember.Component.extend({
  didRender() {
     this._super(...arguments);
      $(".button-collapse").sideNav();
  }
});

[Willibaur]

Thanks @lypborges your solution saved my day, I was having a related issue on ember, my side-nav was not responding when I signed-out and then signed-in, the event listener for the icon was not initialized, but I did the same you did in my component and now it's working fine

[jacobq]

I noticed you have omitJS: true in the options. Are you bringing in the JS some other way? Also, this issue has been inactive for over a year, so I am going to close it unless someone requests otherwise.