Build file cannot be imported

I have a component:

import React from 'react';
import _ from 'lodash';


class NotWorking extends React.Component {
    render() {
        console.info('notworking');
        return <div>why do they make this so hard?</div>;
    }
}

module.exports = {
    NotWorking
};

Build it with:

var path = require('path');

module.exports = {
    entry: path.resolve(__dirname, 'src/NotWorking.jsx'),
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'notworking.js'
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loaders: ['babel?cacheDirectory,presets[]=react,presets[]=es2015']
            }
        ]
    }
};

The idea is to have this as an npm module; so I want to include the build in another project (hopefully via node_modules then, for now I just require it as follows):

import React from 'react';
import ReactDOM from 'react-dom';
import NotWorking from './../build/notworking.js';


class MustWork extends React.Component {

    render() {
        console.info('mustwork');
        return <div>
            must work
            <NotWorking />
        </div>;
    }
}

ReactDOM.render(<MustWork />, document.getElementById('kitchen_sink'));

I build it with an exact same webpack config as above, except the filename changes.

I get this error when using it:

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of MustWork.

Which means the notworking file is not building correctly?
The imported module is just an empty object { }
SO link

Author: Fantashit

1 thought on “Build file cannot be imported

Comments are closed.