cssinternet-explorerwebpackreact-toolbox
Internet explorer 11 & webpack V3 - doesn't bundle css variables
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
}
};
Solution
Solved it by updating and adding some node packages.
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",
"postcss-import": "^12.0.1",
"postcss-preset-env": "^6.6.0",
"react": "^15.6.2",
"react-app-polyfill": "^1.0.1",
"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",
"sugarss": "^2.0.0",
"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",
"cssnano": "^4.1.10",
"less": "^3.9.0",
"less-loader": "^5.0.0",
"node-sass": "^4.12.0",
"postcss-loader": "^3.0.0",
"sass-loader": "^3.1.2",
"string-replace-loader": "^1.3.0",
"style-loader": "^0.23.1",
"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: /\.jsx?$/,
use: [
{
loader: 'string-replace-loader',
options: {
search: 'COMMIT_SHA_ANCHOR',
replace: VERSION
}
}
],
},
{
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
}
};
Also added:
.babelrc
{
"presets": [
["env", {
"modules": 'commonjs',
"targets": {
"browsers": [
"> 1%",
"Firefox >= 52", // last ESR
"IE 11"
]
},
"useBuiltIns": true
}]
]
}
postcss.config.js
module.exports = {
plugins: {
'postcss-preset-env': {},
'cssnano': {}
}
}
Please make IE illegal...
- Why would you use 'extern "C++"'?
- Strange Behavior Compiler Ignoring NULL Check Unless I Print Something in the if Statement
- Fast inverse square root using fixed point instead of floating point
- What is the const qualifier attached to in C: the memory area or the pointer?
- What is the scope of `fesetround()`?
- Is this declaration UB?
- GCC options for strictest C code?
- How to do an explicit fall-through in C
- How do compilers treat CONST qualifier when the pointer points to a memory location obtained with malloc()?
- C: cmocka headers - how to unittest?
- Why in C when I print a double with a one decimal it round it to the next number
- Android C to Java SWIG unable to compile: incompatible types: byte cannot be converted to SWIGTYPE_p_uint8_t
- GNU Make in Ubuntu giving fatal error: rpc/types.h: No such file or directory
- How can I exclude non-numeric keys? CS50 Caesar Pset2
- How change every struct in an array of pointers?
- Optimized 2x2 matrix multiplication: Slow assembly versus fast SIMD
- Simple frame by frame video decoder library
- GCC no longer implements <varargs.h>
- Contents of IO buffer unknown == unsafe?
- Avoiding strcpy overflow destination warning
- Sort program not working, not sure why
- Fast & accurate atan/arctan approximation algorithm
- What's the difference between strtok_r and strtok_s in C?
- How memory address for pointer to arrays is same as an element in 2D array?
- Which is the best way to suppress "unused variable" warning
- How to use ellipsis in c's case statement?
- Fast ceiling of an integer division in C / C++
- Is there an invalid pthread_t id?
- How to Implement Universal Setter/Getter Functions for Interrupt-Driven Variables in Embedded C?
- How does SIMD (avx) processing work? for example, if I want 10 32 bit floats how do i fit in a 256 bit avx vector?