Error using Materialize css with require

Question

I created a new project using durandal using its starter kit (http://durandaljs.com/get-started.html)

I then added materialize using bower (bower install materialze)

After adding materialize to require config of durandal

requirejs.config({
    paths: {
        'text': '../lib/require/text',
        'durandal':'../lib/durandal/js',
        'plugins' : '../lib/durandal/js/plugins',
        'transitions' : '../lib/durandal/js/transitions',
        'knockout': '../lib/knockout/knockout-3.1.0',
        'bootstrap': '../lib/bootstrap/js/bootstrap',
        'jquery': '../lib/jquery/jquery-1.9.1',
        'hammerjs': '../lib/hammer/hammer',
        'jquery.hammer': '../bower_components/materialize/js/jquery.hammer',
        'materialize': '../bower_components/materialize/dist/js/materialize'
    },
    shim: {
        'bootstrap': {
            deps: ['jquery'],
            exports: 'jquery'
        },
        'materialize': {
            deps: ['jquery', 'hammerjs']
        },
        'jquery.hammer': {
            deps: ['jquery', 'hammerjs', 'waves']
        }
    }
});

I end up in error - Uncaught Error: Mismatched anonymous define() module: function ($, Hammer)

Actually, every time I refresh, I end up with different errors, which seems to point me to something messed up with require. My question is - if everything works rock solid before adding materialize, how does adding it make things so flaky?

Am I doing something wrong?

Ben R · Accepted Answer · 2018-06-21 23:02:03Z

Your question is from 1 year, 9 months ago and now Materialize doesn't have jQuery as a dependency and I believe they no longer use hammer.js or they are about not to. Still this is something everybody runs into with Materialize and it is fixable!

First off, if you aren't in the habit of looking inside of your node_modules I encourage you to take a look and see if you can find hammer.min.js (I believe it is in the bundle you would have in 2016) or hammer.js because as soon as you can if you start looking at other people's source you will learn stuff faster. Some of these problems arise because you can install modules globally or locally and you gotta manage all the versions and it just goes on and on but this is the fun of npm and node package managers.

**

Quick Answer Begins Here:

**

Bower is deprecated but this issue effects you similarly if you use npm in 2018 and it would in theory help people using bower. You need to include the javascript dependencies (note that jQuery became optional recently with the release of version 1.0.0)

Example 1

This is what I do if I've installed my npm modules locally and I am making an electron application:

you are going to have the same problem with CSS so in foo.html you want: <link href="./node_modules/materialize-css/dist/css/materialize.css" rel="stylesheet">

in bar.js you want: window.Hammer = require('./node_modules/materialize-css/js/hammer.min.js')

Example 2:

I install my modules globally and want to pull in Materialize maybe I use grunt or webpack and in this contrived example im using jquery-2.1.4.min.js

In foo.js

window.$ = window.jQuery = require('../assets/jquery/jquery-2.1.4.min.js'); window.Hammer = require('../assets/hammer/hammer.min.js');

Collectives™ on Stack Overflow

Error using Materialize css with require

1 Answer 1

Quick Answer Begins Here:

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Quick Answer Begins Here:

Comments

Your Answer

Sign up or log in

Post as a guest

Related