Error in ./components/XBlock.jsx

[dmayo2]

Good Day. I noticed that many others in the past solve issues by importing the dist/index.js, but as you've pointed out, it bloats the package size as well as potentially not having a complete map?

Full error:

 `
 ModuleParseError: Module parse failed: Unexpected token (13:24) You may need an appropriate loader to handle this file type.

 // };    

 static defaultProps = {    

     width: 1,    
     measured: false    

`

When I import the full path import { XMasonry, XBlock } from 'react-xmasonry/dist/index.js' the error disappears.

v 2.5.5

[nikitaeverywhere]

Hello! Thanks for letting me know.

The compiler message is correct, as class properties static defaultProps = { are not finalized within ECMAScript specification and yet not implemented, while used in this module with Webpack/Babel.

Are you using Webpack? Check whether your config has required presets: "presets": ["es2015", "react"].

[alenthomas]

I faced similar issue, i'm using it with create-react-app so for setting presets we have to do an eject the work-around that i found is this

import { XMasonry, XBlock } from "../../node_modules/react-xmasonry/dist/index";

it worked for me, @dmayo2 try importing it directly from the react-xmasonry/dist/index from the node_modules

[nikitaeverywhere]

Alen, you can use import { ... } from "react-xmasonry/dist/index";. Please let me know which bundler do you use for your JavaScript, I’ll see what we can do with this. On Mon, Oct 29, 2018 at 8:22 AM Alen Thomas notifications@github.com wrote:

import { XMasonry, XBlock } from "../../node_modules/react-xmasonry/dist/index";

this worked for me, try importing it directly from the react-xmasonry/dist/index from the node_modules

— You are receiving this because you commented.

Reply to this email directly, view it on GitHub https://github.com/ZitRos/react-xmasonry/issues/13#issuecomment-433800077, or mute the thread https://github.com/notifications/unsubscribe-auth/AEwhSMaYph_zrP5enPojESNBfg_AR_aaks5upp6RgaJpZM4WutPH .

[alenthomas]

sorry it was my mistake i didn't read the issue properly the first time 🤦🏻 I'm new to the whole javascript es6/7 thinggys.. 😅

import {...} from 'react-xmasonry/dist/index';

works just fine 👍 in the readme.md it shows

import {...} from 'react-xmasonry';

i tried this & it was causing me the same issue as mentioned in the first comment

I have given a PR for the readme fix here

[nikitaeverywhere]

@alenthomas no, this is not a problem with wrong readme; If you use Webpack with preset-env plugin for example, you would be able to import from a module. Please let me know which instrument you use for bunding your JavaScript application and we'll figure out what we can do.

P.S. The problem is that class X { prop = 1; } is invalid syntax, and it is used in the module when importing it using module syntax (import ... from ...). You have to use JavaScript bundling tools like WebPack in order for this module to work, or, you can import from already transpiled minified file dist/index.

[alenthomas]

the thing is to configure webpack plugins I have to do an operation called eject in my create-react-app project which gives me more control over the plugins and webpack/babel confs, but I haven't done that yet

[nikitaeverywhere]

So you've tried to import react-xmasonry using create-react-app, have you? I'll check this soon why it doesn't work with the default configuration.

[aogaili]

I think this library uses modern syntax when building, and most projects are configured to not transpire node_modules (for performance reasons) and so it throws error at the browser.

[nikitaeverywhere]

@aliogaili, in package.json, there are both versions:

{
  "main": "dist/index.js",
  "module": "src/index.jsx",
}

Bus as I see three people are in this thread, there must be something not right...

[aogaili]

Yeah something is off, I had to import from index as well..

[nikitaeverywhere]

All right, I made the module export precompiled bundle only, now it should not give any errors with this:

import { XMasonry, XBlock } from "react-xmasonry";

(Removed "module": "src/index.jsx" from package.json). Published as 3.0.0 as it is a breaking change. Let me know if any more problems encountered! Thanks!