I'm working on a React\Redux project, bundled with webpack.
After upgrading webpack V1 to V3, IE (11) support is broken, some of the elements have the attached css rules and IE can't handle it.
On google chrome everything is OK.
package.json:
{
"name": "react-tutorials",
"version": "0.0.0",
"description": "Javelin UI",
"main": "webpack.config.js",
"dependencies": {
"babel-core": "^6.26.3",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"base64-js": "^1.3.0",
"body-parser": "1.15.0",
"classnames": "2.2.3",
"copy-to-clipboard": "^3.0.8",
"core-js": "^2.6.9",
"cryptr": "^4.0.2",
"dateformat": "^1.0.12",
"es6-promise": "^3.1.2",
"es6-shim": "0.35.0",
"file-saver": "^1.3.8",
"flux": "^2.1.1",
"griddle-react": "^0.8.2",
"history": "^1.17.0",
"lodash": "^4.17.11",
"material-ui": "^0.17.4",
"minify": "^4.1.1",
"moment": "^2.24.0",
"react": "^15.6.2",
"react-bootstrap": "^0.32.0",
"react-collapsible": "^1.5.0",
"react-datepicker": "^0.57.0",
"react-dom": "^15.6.2",
"react-easy-transition": "^1.2.6",
"react-fontawesome": "^1.6.1",
"react-keydown": "1.4.9",
"react-list": "^0.8.8",
"react-redux": "^4.4.10",
"react-router": "^3.2.0",
"react-router-redux": "^4.0.4",
"react-s-alert": "^1.4.1",
"react-tagsinput": "^3.19.0",
"react-tap-event-plugin": "^2.0.1",
"react-timeago": "^3.1.0",
"react-toggle-button": "^2.1.0",
"react-toolbox": "^2.0.0-beta.13",
"react-tooltip": "^3.10.0",
"redux": "^3.7.2",
"redux-create-reducer": "1.1.0",
"reselect": "2.3.0",
"seamless-immutable": "^6.0.0",
"socket.io-client": "^2.2.0",
"string-replace-webpack-plugin": "0.0.4",
"subnet-info": "0.0.2",
"universal-cookie": "^2.1.2",
"webpack-replace": "^1.0.0",
"whatwg-fetch": "^0.11.0"
},
"devDependencies": {
"babel-loader": "^6.4.1",
"babel-plugin-add-module-exports": "^0.1.2",
"babel-plugin-react-html-attrs": "^2.1.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-preset-stage-1": "6.5.0",
"css-loader": "^0.28.11",
"less": "^3.9.0",
"less-loader": "^5.0.0",
"node-sass": "^4.12.0",
"postcss-loader": "^0.8.1",
"sass-loader": "^3.1.2",
"string-replace-loader": "^1.3.0",
"style-loader": "^0.13.2",
"uglifyjs-webpack-plugin": "^1.3.0",
"url-loader": "^0.6.2",
"webpack": "^3.11.0",
"webpack-dev-server": "^1.16.5"
},
"scripts": {
"dev": "node_modules/.bin/webpack-dev-server --lazy --progress",
"hot": "node_modules/.bin/webpack-dev-server --hot --progress",
"mockServer": "cd mockserver && nodemon server.js",
"build": "set NODE_ENV=production&& webpack --progress --colors --define process.env.NODE_ENV='\"production\"'",
"test": "NODE_ENV=test node_modules/.bin/karma start",
"cov": "open coverage/report-html/index.html"
},
"author": "",
"license": "ISC"
}
webpack.config.js:
var debug = process.env.NODE_ENV !== 'production';
var webpack = require('webpack');
var path = require('path');
const srcPath = path.join(__dirname, "src");
const jsPath = path.join(srcPath, "js");
const cssPath = path.join(srcPath, "css");
const testPath = path.join(__dirname, 'spec');
const distPath = path.join(__dirname, 'dist');
autoprefixer = require('autoprefixer');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const appEnv = process.env.NODE_ENV || 'development';
//getting the commit sha and sending it UI
var childProcess = require('child_process');
const VERSION = childProcess.execSync('git rev-parse HEAD').toString().replace(/(\r\n|\n|\r)/gm,"");
const plugins = [
new webpack.DefinePlugin({ $_ENVIRONMENT: JSON.stringify(appEnv) })
];
const devPlugins = [];
const prodPlugins = [
new UglifyJsPlugin({uglifyOptions: { mangle: false, sourceMap: false }})
];
module.exports = {
context: srcPath,
devtool: debug ? "inline-sourcemap" : false,
entry: "./js/client.js",
module: {
rules: [
{
test: /\.jsx?$/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['react', 'es2015', 'stage-0', 'stage-1'],
plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
}
}
],
},
{
test: /\.css$/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
modules: true, // default is false
sourceMap: true,
importLoaders: 1,
import: true,
localIdentName: "[name]--[local]--[hash:base64:8]"
}
},
'sass-loader',
"postcss-loader"
]
},
{
test: /\.scss$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader?root=' + encodeURIComponent(cssPath) + '&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5],'
},
{
loader: 'sass-loader'
},
{
loader: 'postcss-loader'
}
]
},
// Allow `require`ing image/font files (also when included in CSS)
// Inline assets under 5kb as Base64 data URI, otherwise uses `file-loader`
{
test: /\.(eot|woff2?|ttf|otf)(\?.*)?$/i,
use: 'url-loader?limit=5120&name=[path][name].[hash].[ext]'
},
{
test: /\.(jpe?g)(\?.*)?$/i,
use: 'url-loader?limit=5120&name=[path][name].[hash].[ext]'
},
{
test: /\.(svg|gif|png)$/i,
use: 'url-loader',
}
]
},
output: {
path: distPath,
publicPath: '/',
filename: "client.min.js"
},
resolve: {
modules: ['node_modules',jsPath, cssPath, testPath],
extensions: ['*', '.js', '.jsx', '.json', '.scss'],
},
plugins: plugins.concat(debug ? devPlugins : prodPlugins),
devServer: {
contentBase: srcPath,
colors: true,
noInfo: false,
inline: true,
historyApiFallback: true
}
};
