I want to package my react component as a umd
lib.
below is webpack my setting:
module.exports = {
devtool: 'eval',
entry: [
'./lib/index'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'lib.js',
library: 'lib',
libraryTarget: 'umd'
},
resolve: {
extensions: ['', '.js']
},
module: {
loaders: [
{
test: /.js$/,
loaders: ['babel'],
exclude: /node_modules/
}
]
},
externals: {
"react": "React"
}
}
And then after I require the package in my other component in this way
example.js
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {lib} from "../dist/lib";
And above component's webpack setting is :
module.exports = {
devtool: 'eval',
entry: [
'./examples/example'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
resolve: {
extensions: ['', '.js']
},
module: {
loaders: [
{
test: /.js$/,
loaders: ['babel'],
exclude: /node_modules/
}
]
}
}
After I compile the example.js
file, it shows the error:
Line 3: Did you mean "react"?
1 | (function webpackUniversalModuleDefinition(root, factory) {
2 | if(typeof exports === 'object' && typeof module === 'object')
> 3 | module.exports = factory(require("React"));
| ^
4 | else if(typeof define === 'function' && define.amd)
5 | define(["React"], factory);
6 | else if(typeof exports === 'object')
I think the error is from the externals setting, cause after I remove externals: {react: "React"}
, it works.
I search some related answers but can't fix it.
Does anyone have any idea of this? thanks.
See Question&Answers more detail:
os