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
It works with adding:
libraryTarget: 'umd'