Open ghost opened 8 years ago
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.
I'll try and produce this later today or tomorrow.
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.
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.
I've got a workaround for this until this issue is resolved (it's not pretty, but it works):
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!
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!
It still seems to be a problem. I've tried a few things but didn't manage to make this work with webpack.
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!
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 ( |
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" } ] }];
} }