[eslint] can't resolve masonry/masonry

[MartinMuzatko]

I get this error code, when linting with es6 (es:recommended)

ERROR in ./~/isotope-layout/js/layout-modes/masonry.js
Module not found: Error: Cannot resolve module 'masonry/masonry' in /home/martin/dev/bitbucket/k15t-theme/theme/node_modules/isotope-layout/js/layout-modes
 @ ./~/isotope-layout/js/layout-modes/masonry.js 16:4-58

[desandro]

You may need to add an alias for desandro-masonry. See http://isotope.metafizzy.co/extras.html#webpack

[MartinMuzatko]

Ah, thank you! Are you planning to fix this in isotope? (if there is a possibility) Otherwise, feel free to close this issue.

[desandro]

The issue is that the Bower name masonry does not match the npm name desandro-masonry. Fixing this issue would mean causing lots of others, so these name mis-match bugs are here :/

[MartinMuzatko]

Okay, thank you anyway :)

[barinali]

@desandro it would be really nice if you can provide some support about this issue. Because there are developers that use create-react-app without willing of ejecting. Then they (including me) are not able to define an alias. In this case, I'm not able to use isotope even if I really want to.

I know that publishing the library as masonry isn't possible at the moment because the name is already taken. But you may support a feature that we can pass Masonry library to options object. It may not be ideal but just an idea.

Besides that there is another unpleasant case; if someone somehow wants to use that masonry (which is a templating library in js) and isotope together, it would confuse the set-up. Because then they're gonna need to use masonry-layout as masonry, and use masonry as something else via alias.. arghh..

If this makes sense for you, please re-open the issue.

[desandro]

@barinali Hello! Thanks so much for your kind input. I may be able to resolve this. I've re-opened this issue. By switching the Bower registration from masonry to masonry-layout, I could resolve Masonry's mismatch. I already own isotope-layout on Bower, so I could resolve that mismatch already.

I've opened blmarket/masonry-layout#1 to ask for the masonry-layout Bower registration. Please a 👍 reaction to my original comment so the maintainer can see your interest.

[desandro]

Okay! I've been able to get masonry-layout. I've changed the package names to masonry-layout and isotope-layout. This fix will go out in the next release.

[barinali]

It's awesome! I'll try it with master branch when I have time. Thanks for building such a good library.

[patricksculley]

Any chance you can publish the release to npm?

[mariavilaro]

I'm runing into this problem just now also. Would be so nice if you were able to fix it soon.

[psanga014]

I am running into this issue as well, Would be nice if we can get the fix.

[desandro]

Masonry v4.2.1 and Isotope v3.0.5 has been released with this change added. Please update and follow up with any lingering issues. 🌈🐻

[mariavilaro]

Working! Thanks.

...now the issue is that it doesn't work with require('isotope-layout'), I need to use require('isotope-layout/dist/isotope.pkgd.min.js')

[desandro]

I'm closing this issue as resolved. Please open a new issue if you run into trouble loading Isotope or Masonry or layout modes with ES6.

[stikoo]

Hi @desandro, I'm still having issues with this on Webpack. I've tried a standard ES6 import...

import Masonry from 'masonry-layout'

and the require way...

var Masonry = require('masonry-layout')

Always the same results though...

"Can't resolve 'get-size/get-size'" and "Can't resolve 'outlayer/outlayer'"

I'm using a fresh npm install of Masonry v4.2.1 - Any recommendations?

[desandro]

@stikoo This is the issue tracker for Isotope. See desandro/masonry#839 for loading Masonry with ES6. Also, I believe you'll need install with npm or Yarn. Loading pkgd file may not work.