Добрый день всем!
Есть проблема, и никак не могу найти решения, т.к. давно уже напрямую дело с настройкой 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';
Судя по тому какой вал ошибок, происходит это не у всех пользователей, а только лишь у какой-то части. Более того, на тестовом окружении таких ошибок небыло вообще.
