3

There is a problem, and cannot find in any way the solution since for a long time directly I did not deal with the webpack setup.

Errors from users come from the portal where my widgets written on React are connected. For example, some of my users are getting this error:

{
  "message": "Loading chunk 0 failed.",
  "stack": "Error: Loading chunk 0 failed.\n    at HTMLScriptElement.n (http://<url>/widget/media/index.js:2:500)"
}

or

    {
      "message": "Loading chunk 1 failed.",
      "stack": "Error: Loading chunk 0 failed.\n    at HTMLScriptElement.n (http://<url>/widget/media/index.js:2:500)"
    }

production it on such chain is updated: in the beginning on the server the build:prod command which in package here such "build:prod" is launched: "npm run lint & & npm test & & webpack - config webpack.config.prod.js", then webpack.config.prod.js , in which here such code

const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const pkg = require('./package.json');

module.exports = {
    entry: {
        index: path.join(__dirname, 'src', 'index.js')
    },

    output: {
        path: path.join(__dirname, 'build'),
        filename: '[name].js',
        chunkFilename: '[name].js',
        publicPath: '/widget/media/'
    },

    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: 'babel-loader'
            },
            {
                test: /\.(png|jpg)$/,
                use: 'file-loader?name=img/[name].[ext]'
            },
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                                sourceMap: false,
                                modules: true,
                                minimize: true,
                                localIdentName: '[hash:base64:7]'
                            }
                        },
                        'postcss-loader'
                    ]
                })
            }
        ]
    },

    plugins: [
        new ExtractTextPlugin('styles.css'),
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.optimize.UglifyJsPlugin({
            compress: { warnings: false },
            comments: false
        }),
        new webpack.BannerPlugin(`${pkg.name}-${new Date()}. RELEASE.`),
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify('production')
            },
            PROJECT_ENV: JSON.stringify('production')
        })
    ]
};

In the index.js file which in the src folder which is specified as entry index at me such code

import 'babel-polyfill';
import datasetPolyfill from 'element-dataset';
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import Orders, { initAction } from './features/orders';
import Returns, { initAction as returnInit } from './features/returns';

datasetPolyfill();

const features = {
    orders: {
        root: Orders,
        init: initAction
    },
    returns: {
        root: Returns,
        init: returnInit
    }
};

const containers = Array.from(document.querySelectorAll('[data-feature]'));

containers.forEach(container => {
    const Feature = features[container.dataset.feature];

    if (Feature) {
        store.dispatch(Feature.init(JSON.parse(container.dataset.state)));

        render(
            <Provider store={store}>
                <Feature.root />
            </Provider>,
            container
        );
    }
});

In this code, I find all my features with the specialist an anchor. Further, in the import Orders file , { initAction } from './features/orders' at me here such code

import errorAction from 'rossko-orders/lib/actions/error';
import AsyncComponent from '../../components/async-wrap';

function importFunc() {
    return import(/* webpackChunkName: "orders" */ 'rossko-orders');
}

export initAction from 'rossko-orders/lib/actions/init';
export default AsyncComponent(importFunc, errorAction);

Also the same code in (returns instead of orders) import Returns, { initAction as returnInit } from './features/returns';

Judging by that what shaft of errors occurs it not at all users but only at some part. Moreover, on a test surrounding such errors were not generally.

UPD: At first I thought that it because of the fact that, some users have an old browser (for example IE). But as showed more deep analysis, the error arises also on the modern browsers. For example:

Headers: Cache-Control: no-cache; Connection: close; Pragma: no-cache; Content-Type: application/json; Accept: application/json, text/plain, */*; Accept-Encoding: gzip, deflate, br; Accept-Language: ru,en;q=0.8; Cookie: ym_uid=149837534368628556; ga=GA1.2.1338437862.1512111490; _gid=GA1.2.386643296.1513581524; Host: returns; Referer: http://< url >/personal/orders/; User-Agent: Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.137 YaBrowser/17.4.1.1026 Yowser/2.5 Safari/537.36; Origin: http://< url >; Content-Length: 162; Authorization-Domain: http://< url >; Authorization-Session: < session >.
{
  "message": "Loading chunk 0 failed.",
  "stack": "Error: Loading chunk 0 failed.\n    at HTMLScriptElement.n (http://< url >/widget/media/index.js?:2:500)"
}

I have no ideas how to solve this problem. Any help will be very valuable. Thx.

Ilya
  • 113
  • 2
  • 11

0 Answers0