Problem rendering tree

[ghost]

I get the following error when trying to render a simple tree:

ERROR in .//react-tree-menu/src/TreeMenu.jsx
Module parse failed: ..../node_modules/react-tree-menu/src/TreeMenu.jsx Line 57: Unexpected token <
You may need an appropriate loader to handle this file type.
|
| return (
|

| {this._getTreeNodes()}
|

);
@ .//react-tree-menu/index.js 1:10-39 3:15-44

Code:

import React, {Component} from 'react';
import TreeMenu, {TreeNode, Utils} from 'react-tree-menu';

export default class TreeSelector extends Component {

onTreeNodeClick() {}
onTreeNodeCollapseChange() {}
onTreeNodeCheckChange() {}

render() {
var data = [{
label : "Option 1"
},
{
label : "Option 2",
children : [
{
checkbox: true,
label: "Sub Option A",
children: [
{
label: "Third Level Nest Option 1",
checkbox : true
},
{
label: "Third Level Nest Option 2",
checkbox : true
}
]
},
{
checkbox: true,
label: "Sub Option B"
}
]
}];

  return <TreeMenu
    onTreeNodeClick={this.onTreeNodeClick}
    onTreeNodeCollapseChange={this.onTreeNodeCollapseChange}
    onTreeNodeCheckChange={this.onTreeNodeCheckChange}
    data={data} />;

}
}

[markerikson]

I'm running into the same problem. Using the boilerplate from https://github.com/davezuko/react-redux-starter-kit, and installed react-tree-menu into there.

It seems that the common Webpack setup is to use babel-loader, configured to exclude /node_modules/, so it doesn't transpile JSX files left in libraries. Or something to that effect.

Not sure if the react-tree-menu NPM package needs to include a pre-transpiled version to work right with Webpack, or what. Still getting used to the Webpack/NPM world, so I'm not sure I have a good answer for fixing things right now.

[MandarinConLaBarba]

I'll try and produce this later today or tomorrow.

[MandarinConLaBarba]

Yeah so it's probably what you said @markerikson ... I'm using the component in a webpack configuration like so:

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

Note that for jsx I'm not excluding node_modules...I need to look into other packages to see how this is handled.

[Markues]

I'm getting what I believe is a similar issue. Including my console logs as they are a little more detailed than the original poster's logs. (I shortened the file paths for readability)

Console logs:
Error: Cannot find module 'reactify' from '.../FrontEnd/node_modules/react-tree-menu'

-- and --

.../FrontEnd/node_modules/react-tree-menu/src/TreeMenu.jsx:57
< div className={props.classNamePrefix} >
^

SyntaxError: Unexpected token <
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:414:25)
at Module._extensions..js (module.js:442:10)
at Object.require.extensions.(anonymous function) as .jsx (.../FrontEnd/node_modules/babel-register/lib/node.js:135:7)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:311:12)
at Module.require (module.js:366:17)
at require (module.js:385:17)
at Object. (.../FrontEnd/node_modules/react-tree-menu/index.js:1:73)
at Module._compile (module.js:435:26)

[Markues]

I've got a workaround for this until this issue is resolved (it's not pretty, but it works):

1. In index.js, change all instances of "./src/TreeMenu,jsx" to "./src/TreeMenu" (as well as for TreeNode).
2. Remove the "browserify" section from package.json completely.
3. Use https://babeljs.io/repl/ to transform all JSX code in TreeNode.jsx and TreeMenu.jsx into regular JS statements. (You'll need to copy in the whole example : function( ) { ... } portion, then change example : function( ) { ... } to example = function( ) { ... } ).
4. Change all require statements in TreeNode.jsx and TreeMenu.jsx to require ".../TreeMenu" instead of ".../TreeMenu.jsx (same for TreeNode).
5. Rename TreeNode.jsx to TreeNode.js and TreeMenu.jsx to TreeMenu.js

Basically, this is just a manual transformation from JSX to JS. It doesn't take too long, as there isn't much JSX in those files.

Hope this helps!

[jeffreygnatek]

i had the same problem with using webpack/redux and .js style files, but using what @MandarinConLaBarba said about the .jsx loader worked for me. thanks for the awesome component, saved me a lot of time!

[mistercrunch]

It still seems to be a problem. I've tried a few things but didn't manage to make this work with webpack.

[MattWilliamsDev]

FWIW, I ran into this problem today and figured out that you just need to add another include path in your webpack loader for .jsx files.

Your module.loaders section should look like this:

...
, module: {
    loaders: [
        // Load ES6/JSX
        {
            test: /\.jsx?$/
            , include: [
                path.resolve( __dirname, 'src' )
                , path.resolve( __dirname, 'node_modules', 'react-tree-menu' )
            ]
            , loader: 'babel-loader'
            , query: {
                plugins: [ 'transform-runtime' ]
                , presets: [ 'es2015', 'stage-0', 'react' ]
            }
        }
    ]
}
...

Note: Instead of just one path that converts files found in src, make it an array with a second entry for the react-tree-menu folder. Probably not the most recommended way of doing things, but it works!