Webpack problem #979
Comments
|
See the Webpack instructions for Isotope Install Isotope and imports-loader with npm. npm install isotope-layout
npm install imports-loaderIn your config file, // npm v0.x
module.exports = {
module: {
loaders: [
{
test: /isotope-layout/,
loader: 'imports?define=>false&this=>window'
}
]
}
};// npm >= v3
module.exports = {
module: {
loaders: [
{
test: /isotope\-|fizzy\-ui\-utils|desandro\-|masonry|outlayer|get\-size|doc\-ready|eventie|eventemitter/,
loader: 'imports?define=>false&this=>window'
}
]
}
};You can then require('isotope-layout'). // main.js
var Isotope = require('isotope-layout');
var iso = new Isotope( '.grid', {
// options...
});Run webpack. webpack main.js bundle.jsThis hack is required because of an issue with how Webpack loads dependencies. +1 webpack/webpack#883 to help get this issue addressed. |
|
That's pretty much what I have tried, this is my webpack config. |
|
Same issue here. The problem seems to be coming from the latest version of NPM. I don't get the issue with NPM v2.11.3 (the version that comes with Node v0.12.7), but I do with NPM v3.3.6. |
|
I confirm isotope is broken with npm3 |
|
With npm v3, try listing all isotope dependencies, this code has been added to my comment above module.exports = {
module: {
loaders: [
{
test: /isotope\-|fizzy\-ui\-utils|desandro\-|masonry|outlayer|get\-size|doc\-ready|eventie|eventemitter/,
loader: 'imports?define=>false&this=>window'
}
]
}
}; |
|
I can confirm that @desandro method does work, however... This should be fixed in the core library to work with webpack |
|
Hi, Thank you for the quickfix. I got the same problem but for 'isotope-packery'. var IsotopePackery = require('isotope-packery');ERROR in ./~/packery/js/packery.js
Module not found: Error: Cannot resolve module 'classie/classie' in /Users/lbineau/Sites/design-implemenation/node_modules/packery/js
@ ./~/packery/js/packery.js 17:4-25:15
ERROR in ./~/packery/js/item.js
Module not found: Error: Cannot resolve module 'get-style-property/get-style-property' in /Users/lbineau/Sites/design-implemenation/node_modules/packery/js
@ ./~/packery/js/item.js 11:4-16:15I tried to modify the following but the error remains: loaders: [
{
test: /isotope\-|fizzy\-ui\-utils|desandro\-|masonry|outlayer|get\-size|doc\-ready|eventie|eventemitter|classie|get\-style\-property/,
loader: 'imports?define=>false&this=>window'
}
] |
|
@lbineau Try adding loaders: [
{
test: /isotope\-|fizzy\-ui\-utils|desandro\-|masonry|outlayer|get\-size|doc\-ready|eventie|eventemitter|classie|get\-style\-property|packery/,
loader: 'imports?define=>false&this=>window'
}
] |
|
I've missed this one it's working now, thank you for the fast reply ! |
|
The solution does not work for me using NPM 3.8.1. I have tried every loader suggestion. I use babel-loader, if that makes a difference. The errors order changes when I added the loader. The errors are still the same. The first error changes from ERROR in ../ to ERROR in ../ |
|
I figured the problem out. If you are using babel loader, make sure to include the "transform-runtime" plugin to the "query" property of the loader. loaders: [{
test: /\.js$/,
exclude: /(node_module)/,
loader: "babel",
query: {
plugins: ["transform-runtime", "transform-decorators-legacy"],
presets: ["es2015", "stage-1"]
}
}] |
|
Isotope v3 has been released with simplified Webpack integration
module.exports = {
resolve: {
alias: {
'masonry': 'masonry-layout',
'isotope': 'isotope-layout'
}
}
}; |
|
@desandro How would one go about integrating 'isotope-packery' alongside this new simplified Webpack integration? I've got the following in my package.json: and then: how do I avoid this error:
? |
|
More feedback on the specific error:
|
|
@nathanchase Looks like you need to require var Isotope = require('isotope-layout');
require('isotope-packery');
new Isotope('.grid', {
layoutMode: 'packery'
}); |
|
I've got and still get If I add a |
|
Maybe this will help. Here's my relevant part of my webpack.config.js: Flickity works fine. Isotope works fine when in masonry or default mode. It's only when I try to use |
|
Hmm, try removing |
|
Yeah, tried removing it. Same result. |
|
Here's something: In isotope-layout's package.json, it has a:
which resolves, because there is a path under isotope-layout to js/isotope.js BUT in isotope-packery's package,json, it has:
There's just: node_modules Could that be the issue? |
|
Here's webpack's build output... it seems to be getting everything for packery, but somehow still isn't available: |
|
So, I blew out my node_modules folder, let it regrab everything, and now it's fine. Argh! Frustrating! For reference, my webpack.config.js: |
|
I'm closing this issue as Webpack use with Isotope has been simplified in v3, see comment above #979 (comment) If you run into issues with Isotope and Webpack, please open a new issue. |
This is similar to the other issue desandro/masonry#679, I tried your solution but still didn't work.
The text was updated successfully, but these errors were encountered: