Materialize: npm require misses hammerjs, then picker.js, etc ...

[joergd]

When I use the npm module,

a) I cannot require it directly as referenced in my package.json file - I need to use a path to the node_modules/materialize-css/bin folder.

b) then when I require the materialize.js file from that node_modules location, it misses hammerjs

c) then I get hammerjs, then it is missing picker.js etc ...

I'm not sure where I am going wrong here, but I am finding it impossible to require('materialize-css') in my browserify app ... :(

Am I doing something wrong?

[ktmn]

Same here.

import Materialize from '../node_modules/materialize-css/bin/materialize.js';

or

let Materialize = require('../node_modules/materialize-css/bin/materialize.js');

produces

[16:17:47] gulp-notify: [Error running Gulp] Cannot find module './picker.js' from 'C:\...\node_modules\materialize-css\bin'
[16:17:48] gulp-notify: [Error running Gulp] Cannot find module 'hammerjs' from 'C:\...\node_modules\materialize-css\bin'

[Riuujin]

same here

[Nxt3]

I can't even do var materialize = require('materialize-css'); in my node.js app. Does anyone have a work around? I ran npm install materialize-css --save and it doesn't work. (I also tried a direct path to the bin in the module, but that didn't work either).

[choonchernlim]

Agreed. Is there a npm module for picker.js?

[danazkari]

npm install materialize-css -D works but require('materialize-css') doesn't.... this is a bummer! How are we supposed to use the npm version of it?

[ndesorden]

For hammerjs you can: npm install hammerjs --save
For picker you can: npm install pickadate --save and change in materialize.js
require('./picker.js') to require(''../'../pickadate/lib/picker.js')

 ;/*!
 * Date picker for pickadate.js v3.5.0
 * http://amsul.github.io/pickadate.js/date.htm
 */

 (function ( factory ) {

// AMD.
if ( typeof define == 'function' && define.amd )
    define( ['picker', 'jquery'], factory )

// Node.js/browserify.
else if ( typeof exports == 'object' )
    module.exports = factory( require('./picker.js'), require('jquery') )  <- change here

// Browser globals.
else factory( Picker, jQuery )

}(function( Picker, $ ) {

Yes, not very elegant :( until materialize team put hammer and pickeradate as dependencies in package.json

[angusfretwell]

This really needs to be fixed, will not use the project because of it.

[jackmew]

+1 Uncaught Error: Cannot find module 'hammerjs'

[rogue780]

+1. I'm actually going back to bootstrap due to this issue.

[kengorab]

The whole concatenated file should be wrapped in a umd module. I'm trying to use this module with webpack and it cannot find jQuery or $ when trying to run it in the browser. I edited the materialize.js file within my node_modules to include var $ = jQuery = require('jquery); and it works fine, as expected. There's almost definitely a task for Grunt (there's one for gulp) in which you declare your module's dependencies, and outputs a umd-wrapped concatenated module. This is a must when using this project in any other context than manually putting script tags on the page.

When I get the time (maybe this weekend) I'll see if I can put together a pull request for it. I really want to use this module, and don't want to rely on editing the module file every time.

[kengorab]

So apparently webpack has a shimming capability that I didn't know about, allowing you to provide it dependencies that aren't explicitly required in within the module. I don't know about the rest of you all, but I'd check to see if such a solution exists for you.

Granted, this project _should_ be a more well-defined module.

[Itagiba]

Is anyone still having this problem? This stupid "picker.js" can't be placed anywhere, it doesn't get found!

[neverfox]

Yes, I cannot use this library because it defaults to an attempt to find ./picker rather than relying on an npm peer dependency.

[kmuncie]

This is terrible. Likely going to scrap using this entire project because it just isn't setup properly at all...

[davestevens]

For a work around you can use materialize with browserify-shim to stop this error.

[rogue780]

I could never get it to work properly with browserify-shim.

[davestevens]

This is what I've got setup and i'm able to build the js and get it working.

package.json

  "browserify": {
    "transform": [
      "browserify-shim"
    ]
  },
  "browser": {
    "jquery": "./node_modules/jquery/dist/jquery.js",
    "materialize": "./node_modules/materialize-css/bin/materialize.js"
  },
  "browserify-shim": {
    "jquery": "$",
    "materialize": "materialize"
  }

requiring in a .js file

var $ = require("jquery"),
    materialize = require("materialize");

[idmontie]

:+1: I am not able to load in the Javascript portion into my project using require('materialize-css) because hammer.js could not be found.

If I require('materialize-css/js/init.js'), pushpin ends up being undefined (and init.js does not export any variables).

Is there an actual entry point to the Javascript portion, or does the Gulpfile just concat everything together?

[idmontie]

Workaround:

Install hammer:

npm install --save-dev hammerjs

Make sure jQuery is required if you are not already requiring it:

window.jQuery = require('jquery');
require('materialize-css/dist/js/materialize.js');

If you are using jQuery in noConflict mode, then the following will still fail:

var Vel;
if ($) {
  Vel = $.Velocity;
}
else {
  Vel = Velocity;
}

You can replace it with the following to get to work:

var Vel;
if (jQuery) {
  Vel = jQuery.Velocity;
}
else {
  Vel = Velocity;
}

[acburst]

I just added in that case here 67c93cf

[nelsonxb]

@idmontie There's still the issue of "./picker.js" not being found.

I've got a hack at SourceComb/materialize (sc-hack branch; diff), which I'm handling as a git submodule for now. I'm don't think it's really so much a fix as a hack, but it works with browserify for now. The branch is based on v0.97.3 (not master).

[isaachinman]

Picker still isn't working in the npm package. Any plans to fix this?

[BeKnowDo]

We resolved the issue with missing dependencies by using the following configuration:
Please note that we are pointing to '/bin/' vs '/dist/'

"browser": {
"materialize": "./node_modules/materialize-css/bin/materialize.js"
},
"browserify-shim": {
"materialize": {
"exports": "materialize"
},

[damon-rand]

+1 - but can confirm that the browserify shim solutions by @davestevens and @BKD work.

[weijieblog]

same here, so sad :(

[danielberkompas]

+1. Same problem using Brunch's NPM integration.

[odb366]

+1 problem occured after updating to Meteor 1.3

[jschlieber]

+1 Can't use npm version with Meteor 1.3.
Module ./picker.js is not found. Would be nice to have an out of the box working npm version...

[meowoow]

+1, still have the same problem with Meteor 1.3.1

[xwilders]

Is there any plan or ETA on a working npm import?
As far as I know all it involves is adding the pickadate dependancy to package.json, or copying the file manually like @NelsonCrosby did.

[sobolevn]

This is still an opened issue. Why is it still not fixed?

[voodooattack]

Please.. I've been tearing my hair out over this for the past three hours with no fix at hand.

[sobolevn]

I have been using brunch. The workaround for me was:

1. install the same lib with bower
2. add file from bower to before section
3. add path to scss folder in sass section (optional)

Still very disappointed.

[pikausp]

The problem (at least in my case) was following

• file materialize.js is located at path ./bin/materialize.js
• file picker.js is located at path ./date_picker/picker.js
• materialize.js tries to require picker specificing the current directory (require('./picker.js')) so I replaced the require string with '../date_picker/picker.js'

And everything works as expected

[claytonmarinho]

To me works almost like pikaupet's solution.

example my app main.js:

import '../imports/client/templates/app';
import '../imports/router';
require('materialize-css/dist/js/materialize.js');

• css at html header

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">

I had to change the line 5081 at dist/js/materialize.js to:
module.exports = factory( require('../../js/date_picker/picker.js'), require('jquery') )

[carlosbaraza]

For people using meteor, instead of requiring the dist, do:

import 'materialize-css/js/materialize.js';

That will require everything it needs.

[praneybehl]

@carlosbaraza what version of meteor you using?
Also I just tried the above but I don't get the error anymore but also its not initialized, so I went ahead and opened the file it its all commented out. Here:

// @codekit-prepend "jquery.easing.1.3.js";
// @codekit-prepend "velocity.min.js";
// @codekit-prepend "hammer.min.js";
// @codekit-prepend "jquery.hammer.js";
// @codekit-prepend "collapsible.js";
// @codekit-prepend "dropdown.js";
// @codekit-prepend "leanModal.js";
// @codekit-prepend "materialbox.js";
// @codekit-prepend "parallax.js";
// @codekit-prepend "tabs.js";
// @codekit-prepend "tooltip.js";
// @codekit-prepend "waves.js";
// @codekit-prepend "toasts.js";
// @codekit-prepend "sideNav.js";
// @codekit-prepend "scrollspy.js";
// @codekit-prepend "forms.js";
// @codekit-prepend "slider.js";
// @codekit-prepend "date_picker/picker.js";
// @codekit-prepend "date_picker/picker.date.js";

[carlosbaraza]

You are right, I assumed it was working because I received no errors. Sorry
about that.

Maybe requiring all the files could work?

I'll try tonight.

On 22 Jul 2016 04:24, "Praney Behl" [email protected] wrote:

@carlosbaraza https://github.com/carlosbaraza what version of meteor
you using?
Also I just tried the about but still get the error, so I went ahead and
opened the file it its all commented out.

// @codekit-prepend "jquery.easing.1.3.js";
// @codekit-prepend "velocity.min.js";
// @codekit-prepend "hammer.min.js";
// @codekit-prepend "jquery.hammer.js";
// @codekit-prepend "collapsible.js";
// @codekit-prepend "dropdown.js";
// @codekit-prepend "leanModal.js";
// @codekit-prepend "materialbox.js";
// @codekit-prepend "parallax.js";
// @codekit-prepend "tabs.js";
// @codekit-prepend "tooltip.js";
// @codekit-prepend "waves.js";
// @codekit-prepend "toasts.js";
// @codekit-prepend "sideNav.js";
// @codekit-prepend "scrollspy.js";
// @codekit-prepend "forms.js";
// @codekit-prepend "slider.js";
// @codekit-prepend "date_picker/picker.js";
// @codekit-prepend "date_picker/picker.date.js";

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/Dogfalo/materialize/issues/1422#issuecomment-234445649,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABNimUK4DPJBN85PrTO4lEEBAKJHpvX4ks5qYDgBgaJpZM4Eov0V
.

[1ns1d3r]

for picker.js I did in file

node_modules/materialize-css/bin/materialize.js

search and replace using my editor I do _./picker.js_ find and replace with _./../js/date_picker/picker.js_

[praneybehl]

@michaelmax28 that is not a reliable solution since your node_modules are only limited to your dev environment.

[nahtnam]

My solution was to add a postinstall script inside my package.json that runs "ln -s ../js/date_picker/picker.js node_modules/materialize-css/bin/picker.js"

[Codescholarly]

@nahtnam can you walk me through how you did that? Having similar issue

[nahtnam]

Add:

"postinstall": "ln -s ../js/date_picker/picker.js node_modules/materialize-css/bin/picker.js",

to your package.json inside the scripts part.

[di3goleite]

Thank you @nahtnam . This fixed my issue. :D

[nahtnam]

No problem. Few extra notes here:

• This is a workaround, not a solution so therefore this issue should remain open
• The postinstall script will only run after you run npm install, therefore once you add the line to your package.json, you must run npm install again.
• This will not work on windows (I think)

[Codescholarly]

Thanks I tried it but I realized that since I have a windows machine its not working. What I am trying to do is run https://github.com/rhkina/meteor-materialize-parallax-template because I am not able to find a solution to running the template.

[mayashavin]

is this issue fixed anywhere? Still got the problem of wrong location for picker.js. Can anyone fix it finally?
I'm trying to require materialize css using browserify and it can't be done as require('./picker.js') is still missing. Happens also if i use bower :(

[romariolopezc]

+1

[boris-jensen]

I did almost the same thing as @nahtnam for picker.js, installed this in my scripts in package.json

"postinstall": "ln -f node_modules/materialize-css/js/date_picker/picker.js node_modules/materialize-css/js/date_picker/picker.date.js node_modules/materialize-css/dist/js/"

the -f makes it so that it so that you can do npm install repeatedly without error, and I removed the -s since I couldn't get it to work with only symbolic links

[daywong1119]

+1 currently use solution by @davestevens

[RyanZim]

Hate to create more +1 noise, but this is really a game-breaker.

[vineetp13]

picker.js issue still happening with meteor 1.4.0.1
(my project was working fine before, but i had to reinstall meteor due to anothe issue, and this problem is showing up now)

[vineetp13]

not having issue, i provided meteor command in dir above the project root dir :-/

[Luckino]

Thids issue still happening with nodejs

I try to copy the file picker.js to bin folder and it works

[NitroBAY]

@Dogfalo do you think this is going to be fixed this ?
I may create a PR. This doesn't seem hard to fix. It's a bit surprising you didn't fix it earlier to be honest. The require('./picker.js') even tough there's litteraly no picker.js in /bin or in /dist/js is a pretty obvious error.
Either put picker as a dependency and require('picker') either require a file that exist. Two possibility require(''../'../pickadate/lib/picker.js') or put picker.js in the bin folder and in the dist/js.
The bug here is kinda obvious and it would have been a brainless fix to do. Besides it's a pretty major issue as the npm packages simply cannot work at all w/ this bug. So it's surprising it hasn't been fixed already. Anyway I'm gonna make a PR.

[idmontie]

Shouldn't these type of dependencies be peerDependencies anyway? That way they can be upgraded without having to upgrade this repo?

[NitroBAY]

Finally I'm unsure about making a PR. Because I don't know how the gruntfile is organized. I don't know how to use it actually.

[Thanood]

From my (limited) experience with webpack, requirejs and reading browserify issues, I think that "shimming" Materialize to explicitly require jquery and in turn forcing the app to only have one single jquery instance might solve this issue. Just like here: https://github.com/Dogfalo/materialize/issues/923#issuecomment-111574672

I'm not sure how to handle this but maybe someone with more insight can use this as a hint.

[nimonian]

In 2017: Error: Cannot find module './picker.js' from '.../whatever/node_modules/materialize-css/bin'

[tomscholz]

I am going to close and lock this issue for now, since everyone is just writing "+1"! BTW, writing "+1" doesn't do anything. Please use GitHubs reactions feature instead. @NitroBAY you mentioned, that you wanted to make a PR. Are you still working on that? Please use this issue for discussions around the picker.js issue.

[tomscholz]

@Thanood

[...] Materialize to explicitly require jquery and in turn forcing the app to only have one single jquery instance might solve this issue.

Should be fixed with https://github.com/Dogfalo/materialize/pull/4774

[tomscholz]

Error: Cannot find module './picker.js' from '.../whatever/node_modules/materialize-css/bin'

Fixed in https://github.com/Dogfalo/materialize/commit/ebf3967330374b8d9a6f80252b44431af4b5baf6