Ich habe eine React-Hauptanwendung und ich erstelle Webpack gebündelte React-Bibliotheken, die dynamisch in der Hauptanwendung auf Benutzeranforderung oder als Ergebnis einiger Benutzeraktionen geladen werden können.Wie lädt man ein Webpack React Bundle mit SystemJS?
Ich dachte, mit SystemJS dynamisch laden die Bibliotheken war der Weg zu gehen, aber ich kann keine Hinweise zu dem Thema finden.
Hier ist mein Problem:
Wenn ich die Bibliothek mit Reagieren Abhängigkeiten bündeln, ich die Datei mit SystemJS laden kann, aber ich diesen Fehler:
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
rendermethod, or you have multiple copies of React loaded
Dies macht Sinn, da als Reaktion in meinem Bundle enthalten und ist auch Teil der Haupt-App. Also dachte ich, dass das Ausschließen von React aus der lib das Problem lösen wird. Ich fügte hinzu, die „externe“ zu meinen webpack config:
///////////////////////////////////////////////////////////
// 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"
}
}
Aber nach so tun, das Laden der lib mit SystemJS ausgibt der folgende Fehler:
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()
Ich verstehe SystemJS zu laden versucht, das Reagieren Abhängigkeit bei localhost: 3000/Reagieren und von was ich gelesen habe, muss dies mit SystemJS.config ({...}) konfiguriert werden, aber die Frage ist wie ?? Ich habe die SystemJS-Konfigurationsdokumentation gelesen, aber ich habe kein ähnliches Beispiel gesehen.
Bin ich der Einzige, der versucht, eine React-Bibliothek dynamisch zu laden? Gibt es einen besseren Ansatz? Ich möchte einen flexiblen Mechanismus haben, so dass unnötige Bibliotheken bei Bedarf geladen werden können und das Hauptpaket nicht aufblähen.
Danke für jeden Zeiger auf diesem