Can't include a jsx file?

[Geczy]

ERROR in ./~/jsplumbtoolkit-react/dist/js/jsplumbtoolkit.jsx
Module parse failed: /Users/matt/Downloads/arc-redux-1/node_modules/jsplumbtoolkit-react/dist/js/jsplumbtoolkit.jsx Unexpected token (26:11)
You may need an appropriate loader to handle this file type.
| 
|   render() {
|     return <div ref="container" style={{width:"100%",height:"100%"}}></div>
|   }
| 
 @ ./src/components/organisms/CampaignBuilder/index.js 13:22-76
 @ ./src/components \.\/[^\/]+\/[^\/]+\/index\.js$
 @ ./src/components/index.js
 @ ./src/components/App.js
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src webpack/hot/only-dev-server

Looks like we're using a happyloader thing? How do I import a jsx module?

import JsPlumbToolkitMiniviewComponent from 'jsplumbtoolkit-react/dist/js/jsplumbtoolkit-miniview'

With the miniview looking like:

import React from 'react';
import { jsPlumbToolkit, Surface } from 'jsplumbtoolkit';

/**
 * jsPlumb Toolkit Miniview Component
 * 
 * @param {JsPlumbToolkitComponent} toolkitComponent
 */
class JsPlumbToolkitMiniviewComponent extends React.Component {

    constructor(props) {
        super(props)
    }

    render() {
        return <div ref="container"/>
    }

    componentDidMount() {

        if (!this.props.toolkitComponent) {
            throw new Error("No 'toolkitComponent' set on JsPlumbToolkitMiniviewComponent. This is required.")
        }   

        this.toolkitComponent = this.props.toolkitComponent;
        this.toolkit = this.toolkitComponent.toolkit;
        this.surface = this.toolkitComponent.surface;

        this.surface.createMiniview({
            container:this.refs.container
        });    
    }  
}

export default JsPlumbToolkitMiniviewComponent;

[diegohaz]

The problem isn't with .jsx, but with node_modules.

The loader is configured to exclude things from node_modules (https://github.com/diegohaz/arc/blob/master/webpack.config.js#L20-L26) because, usually, you don't want to transpile code from there.

You need to edit that rule or create a new rule for jsplumbtoolkit-react.

[Geczy]

Thanks, I've edited the rule

exclude: /node_modules(?!\/jsplumbtoolkit-react)/,