私は主なReactアプリケーションを持っていて、ユーザー要求やユーザーアクションの結果としてメインアプリケーションに動的にロードできるWebpackバンドルReactライブラリを作成します。Webpackをロードする方法SystemJSにバンドルを適用しますか?
私は、librairiesを動的に読み込むためにSystemJSを使用することがやり方だと思ったが、そのトピックについてのポインタは見つかりませんでした。私は、ライブラリをバンドルの依存関係を反応させるのならば、私はSystemJSでファイルを読み込むことができ
が、私はこのエラーを取得しています:ここで
は私の問題であるとして反応するので
invariant.js:44 Uncaught (in promise) Error: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's
render
method, or you have multiple copies of React loaded
これは理にかなっています私のバンドルに含まれており、また、メインアプリケーションの一部です。だから私は、リアクションをlibから除外して問題を解決すると思った。私は私のWebPACKの設定に「外部」を追加しました:
///////////////////////////////////////////////////////////
// Webpack config development
//
///////////////////////////////////////////////////////////
module.exports = {
devtool: 'source-map',
context: path.join(
__dirname, '../src/Extensions'),
entry: {
Extension: [
'./Extension/index.js'
]
},
output: {
path: path.resolve(__dirname, '../dist'),
filename: "[name].js",
libraryTarget: "umd",
library: "[name]"
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development'),
WEBPACK: true
}
}),
new webpack.ProvidePlugin({
'window.jQuery': 'jquery',
jQuery: 'jquery',
_: 'lodash',
$: 'jquery',
React: "React",
react: "React",
"window.react": "React",
"window.React": "React"
}),
new ProgressBarPlugin({
format: ' build [:bar] ' + chalk.green.bold(':percent') + ' (:elapsed seconds)',
clear: false
})
],
resolve: {
modules: [
path.resolve('./node_modules'),
],
extensions : ['.js', '.jsx', '.json']
},
resolveLoader: {
modules: ['node_modules']
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
options: {
presets: ['react', 'es2015', 'stage-0'],
plugins: ['transform-runtime']
}
}]
}
]
},
externals: {
"react": "React",
"react-dom": "ReactDOM"
}
}
しかしSystemJSとlibが、そうロードした後が出力されます、次のエラー:
ConfiguratorView.js:116 Uncaught (in promise) Error: (SystemJS) Unexpected token < SyntaxError: Unexpected token < at eval() Evaluating http://localhost:3000/React Error loading http://localhost:3000/Extension.js at eval()
私はSystemJSが反応をロードしようとしている理解localhost:3000/Reactと、これを読んだところからの依存関係は、SystemJS.config({...})で設定する必要がありますが、問題はどういう意味ですか?私はSystemJSの設定文書を読みましたが、私はそのような例は見ていません。
Reactライブラリを動的にロードしようとしているのは私だけですか?より良いアプローチがありますか?私は、不必要なライブラリをオンデマンドでロードでき、メインバンドルを膨らませないように、柔軟なメカニズムを用意したいと思っています。その