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
