Creating a ReactJS Application Using Webpack. I recently became interested in using code splitting to reduce application size.
I tried to implement a custom HOC that wrapped System.import ():
... at a very high level looked like... class Async extends React ... { componentWillMount() { this.props.load.then(c => { this.component = c; this.setState({loaded:true}); } } render() { return this.component ? <this.component.default {...this.props} /> : <span />; } } import Async from 'async'; const Foo = (props) => ( <Async {...props} load={System.import('async/foo/body')} />); class Foo ... { ... render = () => <Foo myProp={'bar'} />; }
I'm currently trying to respond to the load ( https://github.com/thejameskyle/react-loadable ), a package that does pretty much the same thing, but with some additional bells n whistles.
Problem
Both methods work fine locally, but they don't work when deployed. Webpack configurations have been produced from the React-Starter-App since the beginning of March 2017. My gut tells me that the webpack configuration is the source of the problem, but I'm not sure how to debug this.
Dev Config (works)
module.exports = { entry: [ require.resolve('react-dev-utils/webpackHotDevClient'), require.resolve('./polyfills'), paths.appIndexJs ], output: { path: paths.appBuild, pathinfo: true, filename: 'static/js/bundle.js', publicPath: publicPath }, ... plugins: [ new ExtractTextPlugin({filename: 'style.css', allChunks: true}), new InterpolateHtmlPlugin(env.raw), new HtmlWebpackPlugin({ inject: true, template: paths.appHtml, }), new BundleAnalyzerPlugin(), new webpack.DefinePlugin(env.stringified), new webpack.HotModuleReplacementPlugin(), new CaseSensitivePathsPlugin(), new webpack.LoaderOptionsPlugin({ debug: true }), new WatchMissingNodeModulesPlugin(paths.appNodeModules) ] }
Seniority configuration (not working)
module.exports = { bail: true, devtool: 'source-map', entry: [ require.resolve('./polyfills'), paths.appIndexJs ], output: { path: paths.appBuildStaging, filename: 'static/js/[name].[chunkhash:8].js', chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js', publicPath: publicPath, }, resolve: { modules: ['node_modules', paths.appNodeModules].concat(paths.nodePaths).concat(paths.appSrc), extensions: ['.ts', '.tsx', '.scss', '.js', '.json', '.jsx'] }, ... plugins: [ new InterpolateHtmlPlugin(env.raw), new HtmlWebpackPlugin({ inject: true, template: paths.appHtml, minify: { removeComments: true, collapseWhitespace: true, removeRedundantAttributes: true, useShortDoctype: true, removeEmptyAttributes: true, removeStyleLinkTypeAttributes: true, keepClosingSlash: true, minifyJS: true, minifyCSS: true, minifyURLs: true, }, }), new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks: function (module) { // this assumes your vendor imports exist in the node_modules directory return module.context && module.context.indexOf('node_modules') !== -1; } }), //CommonChunksPlugin will now extract all the common modules from vendor and main bundles new webpack.optimize.CommonsChunkPlugin({ name: 'manifest' //But since there are no more common modules between them we end up with just the runtime code included in the manifest file }), new BundleAnalyzerPlugin(), new webpack.DefinePlugin(env.stringified), new webpack.optimize.UglifyJsPlugin({ compress: { screw_ie8: true, //. React doesn't support IE8 warnings: false, drop_console: false, }, mangle: { screw_ie8: true, }, output: { comments: false, screw_ie8: true, }, sourceMap: true, }), new ExtractTextPlugin({ filename: cssFilename, }), new ManifestPlugin({ fileName: 'asset-manifest.json', }), ] }
Error: depending on the reaction swallows all errors (palm + face), so I can not provide useful errors from this code. My custom component throws an error in the bootstrap 6a12c6cā¦:54 Uncaught (in promise) TypeError: Cannot read property 'call' of undefined
In network traffic for my custom HOC, the optional package does not load. In network traffic for reactive download, a packet is downloaded, but it is never processed.