So I'm creating a react component which will be deployed with UMD format and can be consumed from unpkg. It is built using webpack.
Webpack config creating the UMD module with external modules:
module.exports = {
plugins: [
new StyleLintPlugin(),
new CleanWebpackPlugin(['../dist']),
new ExtractTextPlugin("index.css")
],
resolve:{
extensions: ["",".scss", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
},
module: {
preLoaders: [
{
test: /\.tsx$/,
loader: 'tslint-loader'
}
],
loaders: [
{ test: /\.scss$/, loader: ExtractTextPlugin.extract("css-loader!postcss-loader!sass-loader")},
{ test: /\.css$/, loader: ExtractTextPlugin.extract("css-loader!postcss-loader")},
{ test: /\.tsx?$/, loader: "awesome-typescript-loader",exclude: /node_modules/,query:{declaration:false} },
{
test: /\.(png|ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
loader: 'file-loader',
}
]
},
devtool: 'source-map',
output: {
filename: '[name].js',
path: path.resolve(__dirname,"..", 'dist'),
library: 'productupload',
libraryTarget: 'umd',
umdNamedDefine: true,
//publicPath: '/'
}
externals: {
'react': 'commonjs react',
'react-dom':'commonjs react-dom',
'mongodb':'commonjs mongodb',
'express':'commonjs express'
}
};
This then creates the package you can see here
And I try to get the react component with the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Upload Component</title>
<meta name="description" content="It will upload generic product data to server.">
<meta name="author" content="Alexander Morton">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<script src="https://unpkg.com/@mortonprod/product-upload@1.0.1/dist/inputBuilder.min.js"></script>
</head>
<body>
<div id="root"></div>
<section>
</section>
<footer>
Product Upload component create by Alexander Morton
</footer>
<script>window.__IDS__ = ${ids}</script>
<script src= ${options.unpkgUI}></script>
<script type="text/babel">
ReactDOM.render(
<InputBuilder/>,
document.getElementById('root')
);
</script>
</body>
</html>
This should include react, react-dom and my component and then render it to the screen.
The error I get is:
inputBuilder.min.js:1 Uncaught ReferenceError: require is not defined at Object.r.extends.Object.setPrototypeOf.__proto (inputBuilder.min.js:1) at e (inputBuilder.min.js:1) at Object. (inputBuilder.min.js:1) at e (inputBuilder.min.js:1) at i.extends.Object.setPrototypeOf.__proto (inputBuilder.min.js:1) at inputBuilder.min.js:1 at inputBuilder.min.js:1
Require should not be defined in the browser right? Why does webpack use it then?
