So I am working on a website that is using react. I have been testing it in different browsers, and right now the only browser not working is the terrible Internet Explorer. When the page loads on internet explorer it is just a blank/white screen. I have tried multiple suggestions like integrating browserlist, @babel/preset-env with no luck. I completely upgraded from babel 6 to babel 7 to see if that was the issue and nothing changed.
Here are my Dependencies and Dev Dependencies:
[
"dependencies": {
"@babel/plugin-transform-modules-commonjs": "^7.10.4",
"@babel/polyfill": "^7.10.4",
"@babel/preset-es2015": "^7.0.0-beta.53",
"@stripe/react-stripe-js": "^1.1.2",
"@stripe/stripe-js": "^1.8.0",
"@tinymce/tinymce-react": "^3.6.0",
"axios": "^0.19.2",
"babel-preset-react": "^6.24.1",
"bootstrap": "^4.4.1",
"browser-image-compression": "^1.0.11",
"browserslist": "^4.13.0",
"core-js": "3.6.5",
"crypto-js": "^4.0.0",
"emotion": "^10.0.27",
"eslint-plugin-promise": "^4.2.1",
"file-system": "^2.2.2",
"firebase": "^7.14.5",
"firebase-functions": "^3.6.2",
"fuse.js": "^6.4.0",
"google-map-react": "^1.1.7",
"google-maps-react": "^2.0.6",
"img-loader": "^3.0.1",
"jest": "^25.2.4",
"jquery": "^3.5.1",
"mdbreact": "^4.26.0",
"moment": "^2.24.0",
"net": "^1.0.2",
"photoeditorsdk": "^5.0.0",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-app-polyfill": "^1.0.6",
"react-bootstrap": "^1.0.1",
"react-cookie-consent": "^5.0.0",
"react-dom": "^16.13.1",
"react-drag-sortable": "^1.0.6",
"react-dropzone": "^10.2.2",
"react-facebook": "^8.1.4",
"react-helmet": "^6.0.0",
"react-icons": "^3.9.0",
"react-json-tree": "^0.11.2",
"react-lazyload": "^3.0.0",
"react-phone-input-2": "^2.13.7",
"react-places-autocomplete": "^7.2.1",
"react-redux": "^7.2.0",
"react-router-dom": "^5.1.2",
"react-router-guards": "^1.0.2",
"react-social-icons": "^4.1.0",
"react-stripe-checkout": "^2.6.3",
"reactstrap": "^8.5.1",
"redux": "^4.0.5",
"rxjs": "^6.5.4",
"stripe": "^8.76.0",
"styled-components": "^4.4.1",
"styled-jsx": "^3.2.5",
"unirest": "^0.6.0",
"url-polyfill": "^1.1.10",
"uuidv4": "^6.0.7",
"webworkify-webpack": "^2.1.5"
},
"devDependencies": {
"@babel/cli": "^7.8.4",
"@babel/core": "^7.9.6",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/plugin-proposal-decorators": "^7.10.5",
"@babel/plugin-transform-runtime": "^7.10.5",
"@babel/preset-env": "^7.10.4",
"@babel/preset-react": "^7.9.4",
"babel-core": "^6.26.3",
"babel-eslint": "^10.1.0",
"babel-jest": "^25.2.4",
"babel-loader": "^8.1.0",
"babel-minify-webpack-plugin": "^0.3.1",
"babel-plugin-syntax-async-functions": "^6.13.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
"babel-preset-es2015": "^6.24.1",
"clean-webpack-plugin": "^3.0.0",
"compression-webpack-plugin": "^4.0.0",
"copy-webpack-plugin": "^5.1.1",
"css-loader": "^3.5.3",
"dotenv-webpack": "^1.7.0",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.10.1",
"eslint-loader": "^4.0.2",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-react": "^7.19.0",
"file-loader": "^6.0.0",
"html-loader": "^1.1.0",
"html-webpack-plugin": "^4.3.0",
"inspectpack": "^4.5.2",
"json-loader": "^0.5.7",
"mini-css-extract-plugin": "^0.9.0",
"node-sass": "^4.14.1",
"prettier": "^2.0.4",
"react-hot-loader": "^4.12.20",
"sass": "^1.26.10",
"sass-lint": "^1.13.1",
"sass-loader": "^8.0.2",
"style-loader": "^1.2.1",
"terser-webpack-plugin": "^3.0.2",
"uglifyjs-webpack-plugin": "^2.2.0",
"url-loader": "^0.6.2",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3",
"worker-loader": "^2.0.0"
}
]
Here is some of my webpack.config.js:
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.(jpe?g|png|gif|svg|webp)$/i,
loaders: [
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]'
}
},
{
loader: 'img-loader',
}
]
},
{
test: /\.jsx?$/,
enforce: "pre",
loader: "eslint-loader",
exclude: /node_modules/,
options: {
emitWarning: true,
configFile: "./.eslintrc.json"
}
},
{
test: /\.s[ac]ss$/i,
use: [
'style-loader',
'css-loader',
'sass-loader',
],
},
{
test: /\.(jsx|js)?$/,
loader: "babel-loader",
exclude: /node_modules/,
}
]
},
EDIT: I forgot to add my babel.config.js
module.exports = {
"presets": [[
"@babel/preset-env",
{
"corejs": { "version": 3 },
"useBuiltIns": "usage",
"targets": {
"edge": "17",
"firefox": "60",
"chrome": "67",
"safari": "11.1",
"ie": "11",
"browsers": [
"Chrome >= 59",
"FireFox >= 44",
"Safari >= 7",
"Explorer 11",
"ie 11",
"last 4 Edge versions"
]
}
}
], "@babel/preset-react"],
"plugins": [["@babel/plugin-proposal-class-properties"], ["syntax-async-functions"], ["emotion"], ["@babel/plugin-proposal-decorators", { "decoratorsBeforeExport": true }], ["@babel/transform-runtime"]]
}
Here is the error I am getting in Internet Explorer 11:SCRIPT5017
I spent a few more hours looking at the error in Internet Explorer, finally realized that the error was coming from regex for the UUIDv4 package. The issue was unrelated to Babel as it seems I had everything setup correctly. This [Post] (uuidv4.js regular expression issue - IE11) helped me solve the problem.
