Compiling error

[kraizman]

Hi, I try to add your library to my project but got error in building

ERROR in ./~/react-xmasonry/src/components/XMasonry.jsx
Module parse failed: <path to project>/node_modules/react-xmasonry/src/components/XMasonry.jsx Unexpected token (18:24)
You may need an appropriate loader to handle this file type.
|     };*/
|
|     static defaultProps = {
|         center: true,
|         maxColumns: Infinity,
 @ ./~/react-xmasonry/src/index.jsx 1:0-49
 @ ./client/containers/CardsList/index.js
 @ ./client/containers/App/index.js
 @ ./client/containers/Root/index.js
 @ ./client/index.js
 @ multi (webpack)-dev-server/client?http://localhost:4000 webpack/hot/dev-server ./index.js

ERROR in ./~/react-xmasonry/src/components/XBlock.jsx
Module parse failed:<path to project>/node_modules/react-xmasonry/src/components/XBlock.jsx Unexpected token (12:24)
You may need an appropriate loader to handle this file type.
|     };*/
|
|     static defaultProps = {
|         width: 1,
|         measured: false
 @ ./~/react-xmasonry/src/index.jsx 2:0-45
 @ ./client/containers/CardsList/index.js
 @ ./client/containers/App/index.js
 @ ./client/containers/Root/index.js
 @ ./client/index.js
 @ multi (webpack)-dev-server/client?http://localhost:4000 webpack/hot/dev-server ./index.js

In my webapck config i resolve jsx like

  {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loaders: [
          'react-hot-loader',
          'babel-loader?presets[]=react,presets[]=es2015,presets[]=stage-0'
        ]
      },

Do you have any idea why i am getting this error and how to fix it?

[nikitaeverywhere]

Hello!

Thanks for letting me know!

An interesting coincidence, I have just pushed the major update of react-xmasonry to version 2.0.0. Please, check it out.

Regarding to your question:

What you do by using

exclude: /node_modules/,

option is telling WebPack to not to transpile any code inside node_modules directory, obviously. Let me explain what happens here.

The node_modules/react-xmasonry module has 2 entry points (check its package.json):

1. src/index.js for ES modules-enabled bundlers;
2. dist/index.js for anything else.

Because of you using WebPack, which picks package.module property up, it tries to load src/index.js, which is ES6 react code, and you need to use an appropriate loader for it, which you have disabled by exclude.

So you have 2 options here:

1. Delete exclude: /node_modules/, line from your WebPack config file.
2. Use import { XMasonry, XBlock } from "react-xmasonry/dist/index.js", which will import UMD already-transpiled module.

The preferred option is always the first one, because:

1. You will be able to generate full source maps of your project.
2. It enables WebPack to perform tree-shaking.
3. It saves ~300 bytes of code which UMD module definition takes.

Hope this helps, let me know!

[kraizman]

Thanks for quick response. I will definitely new version. Also, I discovered better webpack configuration so babel will not try to transpile all dependencies in node_modules directory. I divided resolve configurations to 2:

{
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: [
          'react-hot-loader',
          'babel-loader?presets[]=react,presets[]=es2015,presets[]=stage-0'
        ]
      },
      {
        test: /\.jsx$/,
        loaders: [
          'react-hot-loader',
          'babel-loader?presets[]=react,presets[]=es2015,presets[]=stage-0'
        ]
      },

Thanks for help and grate library. Looks very promissing.

[nikitaeverywhere]

Thank you!

Your solution definitely make sense in case of react-xmasonry. But in general, I think some ES6-module packages may also have files using ES6-7 features with .js extension, be careful here.