Does it work on React 14 or 15?

[mrn3]

I am on React 15 and getting:

35% 70/163 build modulesModuleParseError: Module parse failed: /app/reports/node_modules/react-pivot/index.jsx Line 113: Unexpected token <

Has this been updated to work on React 0.14 or 15?

[Barbacoa08]

I'm getting the same error. I'm using:
es6
babel
webpack 1.13.2
react 15.3.1

[mrn3]

Could I help to get this working on newer versions of React? Do you accept pull requests?

[davidguttman]

@mrn3 a PR would be great, thanks!

[hoppy-kamper]

We use this library successfully with the following stack:

• react 15.4
• babel 6.5
• webpack 1.13

Make sure your webpack.config has a module loader test for react-pivot, e.g.

...
module: {
        loaders: [
            { test: /\.css$/, loader: "style-loader!css-loader" },
            { test: /\.png$/, loader: "url-loader?limit=100000" },
            { test: /\.jpg$/, loader: "file-loader" },
            {
                test: /\.jsx?$/,
                exclude: /(node_modules)/,
                loader: 'babel',
                query: {
                    presets: ['es2015', 'stage-0', 'react'],
                    plugins: ['transform-object-assign']
                }
            },
//needed for react-pivot
            {test: /\.jsx?$/, include: /react-pivot/, loader: 'babel' } 
        ]
    },
...

[mrn3]

great thanks!

[super-cache-money]

Yeah it's unfortunate and unconventional that the module can't be required without transpiling jsx.

By default, for example, babel-register ignores node_modules, so now a special exception has to be made.

[phiresky]

For webpack2, this load configuration worked for me:

{test: /\.jsx?$/, include: /react-pivot/, loader: 'babel-loader', query: {presets: ['es2015', 'react']} }

With the packages

yarn add babel-loader babel-core babel-preset-es2015 babel-preset-react

[ainsleys]

has anyone been able to get this to work in the default create-react-app configuration? I am not sure if it's possible to modify the loading configurations without ejecting, which I don't want to do yet..

[davidguttman]

If anyone can get this to work, a PR would be great. Thanks @ainsleys.

[thchia]

I don't mind having a stab at making this work. However the only way I can think of doing it is to add webpack.

The reason for this is that the high-level strategy is to convert the .jsx files to .js before publishing. After this, all the import statements that reference *.jsx will fail in the compiled output (since everything is now .js). I only know of webpack that can resolve extensions, meaning that the import statements are altered to omit the file extension (.jsx) so that they still work in the compiled version.

[davidguttman]

So the idea is take webpack as a dev dependency and to do all the transpilation before publish.

I think that could work. Curious if this will mess with the default styles option.

[codewreaker]

I had the same problem, tried all the solutions, nothing worked. I guess I will have to use another library for now. @davidguttman please let us know if you get a fix for this. Browserify is kinda old and will be hard to use it just for you library.

[alucke]

I'm also having problems setting up this module with react-create-app. As @davidguttman asks for a PR I think there will not be a solution very fast :(

I'm getting a

Uncaught Error: Invalid tag: /static/media/index.1c790c78.jsx
...

I like the demo of the module but unfortunately can't rewrite it myself to work with react-create-app (and create the asked PR).

So does anyone know a similar react module which works with react-create-app? @ainsleys How did you solve it? What are you using now?

[jbalatero]

I got this error: InvalidCharacterError: String contains an invalid character

[dwy189]

Is there any update on this issue?