Unable to Import XMasonry to Meteor Project

[aogaili]

After addingimport { XMasonry, XBlock } from "react-xmasonry"; to a component, I get the following error:

Uncaught Error: Cannot find module 'React'
    at makeMissingError (modules-runtime.js?hash=8587d18…:231)
    at require (modules-runtime.js?hash=8587d18…:241)
    at n (modules.js?hash=2355269…:220189)
    at index.js (modules.js?hash=2355269…:220189)
    at fileEvaluate (modules-runtime.js?hash=8587d18…:343)
    at require (modules-runtime.js?hash=8587d18…:238)
    at PinBoard2.js (PinBoard2.js:1)
    at fileEvaluate (modules-runtime.js?hash=8587d18…:343)
    at require (modules-runtime.js?hash=8587d18…:238)
    at routes.js (routes.js:1)

Any insight on why this might be happening?

[nikitaeverywhere]

Hello! What's the version of XMasonry you're using? What's the bundler you are using to bundle JavaScript? In the last package version, I've added React to the package's peer dependencies, the error message you've posted looks strange to me...

[nikitaeverywhere]

This should fix the issue anyway: meteor npm install --save react (by the error description it seems that you most likely use Meteor?).

Also, XMasonry is made for React, so you won't be able to use it without this framework.

[aogaili]

Yeah I'm using Meteor with React, and I was able to import many other react components from NPM but react-xmasonry is throwing that error for some reason.

[nikitaeverywhere]

Hm. Could you please post any of the components you've succeeded with? I will be happy to compare the code and fix the problem if it is on XMasonry side.

[nikitaeverywhere]

Also, try import { XMasonry, XBlock } from "react-xmasonry/dist/index.js" — will this work properly? Thanks!

[aogaili]

Thanks for the quick response @ZitRos.

This component was working import Masonry from 'react-masonry-infinite';

And import { XMasonry, XBlock } from "react-xmasonry/dist/index.js" didn't do the trick :(.

[nikitaeverywhere]

You're always welcome! I see that almost the only difference is that in my package.json, there is "module" property which points to ES6 classes instead of bundled distributive. I am wondering if this can be the issue. If you are very motivated to use XMasonry in your project, could you please try to go to your node_modules/react-xmasonry/package.json and manually remove the line with "module" property from there? Will this solve the problem?

[aogaili]

That didn't solve it either :( for now I just copied the source code to the project and imported manually so I can give the library a spin.

I'm not sure if this is something specific to my project, or Meteor or the way the library is packaged, I just wanted to let you know..

[nikitaeverywhere]

OK! Once I come back to my laptop (4-5 days ☀️) I will try XMasonry with Meteor and let you know. Thanks!

[nikitaeverywhere]

I've just launched your example. Everything seems to work as expected:

Am I missing something?

Ah, now I see — I've changed the import statement in main.js.

[nikitaeverywhere]

I think I've found a problem. Try the newest XMasonry version 4.2.1.

The issue seems to be with case-sensitive file system and wrong XMasonry react import: XMasonry UMD module was requiring "React" while it should require "react". Please confirm if the issue is solved and close it.

Thank you very much for helping to make XMasonry better!

[aogaili]

That did the trick! thanks @ZitRos

I've evaluated many masonry implementations out there and I think this one outperform them all, great work buddy.