Ошибка в подгрузке чанков, что не так?

281
27 декабря 2017, 22:33

Добрый день всем! Есть проблема, и никак не могу найти решения, т.к. давно уже напрямую дело с настройкой webpack'ом не имел.

Приходят ошибки от пользователей с портала, где подключены мои виджеты написаные на React. К примеру:

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

а иногда приходит и такая ошибка, скажем с другого поддомена третьего уровня, где так же располагаются виджеты

{
  "message": "Loading chunk 1 failed.",
  "stack": "Error: Loading chunk 1 failed.\n    at HTMLScriptElement.n (http://<мой урл>/widget/media/index.js:2:500)"
}

Обновляется на продакшене это по такой цепочке: вначале на сервере запускается команда build:prod которая в пэкейдже вот такая "build:prod": "npm run lint && npm test && webpack --config webpack.config.prod.js", затем сам webpack.config.prod.js, который в свою очередь содрежит в себе вот такой код

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')
        })
    ]
};

В самом файле index.js, который располагается в папке src, который указан как entry index у меня такой код

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
        );
    }
});

В этом коде, я нахожу все мои фичи со спец якорем. Далее, в файле import Orders, { initAction } from './features/orders' у меня вот такой код

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);

Тоже самое у меня и с import Returns, { initAction as returnInit } from './features/returns';

Судя по тому какой вал ошибок, происходит это не у всех пользователей, а только лишь у какой-то части. Более того, на тестовом окружении таких ошибок небыло вообще.

Сперва были подозрения, что происходит это только на старых браузерах, типа IE или на мобилках, но оказалось, что это не так и происходит на не старых браузерах.

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: < сессия >.
{
  "message": "Loading chunk 0 failed.",
  "stack": "Error: Loading chunk 0 failed.\n    at HTMLScriptElement.n (http://< url >/widget/media/index.js?:2:500)"
}

Я в тупике и не знаю в чем причина и как ее исправить. Поэтому любая помощь будет ценной и полезной.

READ ALSO
Сброс кеш при работе с javascript

Сброс кеш при работе с javascript

Доброго времениПри работе с сайтом через ftp иногда приходится чистить кэш что бы увидеть результат, чаще всего это требуется если добавил...

218
Обращение к элементу по id

Обращение к элементу по id

Обычно в литературе для доступа к элементу рекомендуют использовать documentgetElementById("id_")

320
Почему перебор элементов не работает по кругу

Почему перебор элементов не работает по кругу

Суть такаяПросто жму на кнопку "next", запускается цикл, цикл перебирает элементы

230