есть асинхронный компонент, который подгружает другие компоненты:
На клиенте всё работает хорошо, но когда использую Ssr, то ругаеться на
var parentJsonpFunction = window["webpackJsonp"];
Вопрос: как правильно настроить webpack, чтобы на клиенте код разбивался, а на сервере был один большой файл?
import React, {Component} from "react";
import {connect} from "react-redux";
import {bindActionCreators} from "redux";
import {loadComponent} from "./actions/AjaxDataActions";
function asyncComponent(getComponent) {
class AsyncComponent extends Component {
constructor(props) {
super(props);
this.state = {Component: AsyncComponent.Component};
}
componentWillMount() {
if ( !this.state.Component ) {
this.props.loadComponent(true);
getComponent().then(Component => {
AsyncComponent.Component = Component;
this.props.loadComponent(false);
this.setState({Component})
})
}
}
render() {
const {Component} = this.state;
if (Component)
return <Component {...this.props} />;
return null;
}
}
return connect(state => ({
params: state.ajaxData
}), matchDispatchToProps)(AsyncComponent);
}
function matchDispatchToProps(dispatch) {
return bindActionCreators({loadComponent: loadComponent}, dispatch)
}
export default asyncComponent;
использую вот так:
import asyncComponent from './application/AsyncComponent';
const Index = asyncComponent(() =>
import('./application/pages/Index').then(module => module.default)
);
ну и сам конфиг webpack:
const uniqid = require("uniqid");
let mix = require("laravel-mix");
mix
.react("resources/assets/js/app-server.js", "public/js")
.sass("resources/assets/sass/app.scss", "public/css")
.version();
mix.webpackConfig({
output: {
filename: "js/app.js",
chunkFilename: "js/[name]." + uniqid() + ".bundle.js",
pathinfo: true
}
});