问题
My react+redux app is not working on Internet explorer 11. It is working fine on edge, Firefox and chrome.
I have already tried so many answers available on internet like this but didn't get any success, below attached error is I am getting in console
when I opened this error it shows like this
this file is generating when I am serving my app and can't change anything manually
package.json
{
"jest": {
"roots": [
"<rootDir>/"
],
"moduleFileExtensions": [
"js",
"jsx",
"json"
],
"testURL": "http://localhost",
"moduleDirectories": [
"node_modules",
"utils"
],
"testPathIgnorePatterns": [
"/node_modules/"
],
"coverageReporters": [
"text"
],
"collectCoverageFrom": [
"**/*.{js,jsx}",
"!**/node_modules/**",
"!**/flow-typed/**",
"!**/vendor/**",
"!./*"
],
"setupFilesAfterEnv": [
"./utils/jestUtils/setupTests.js"
],
"testEnvironment": "./utils/jestUtils/freezeDateEnvironment.js",
"moduleNameMapper": {
"\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/utils/__mocks__/fileMock.js",
"\\.(css|less)$": "<rootDir>/utils/__mocks__/fileMock.js"
}
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@synapsestudios/react-drop-n-crop": "^0.2.0",
"attr-accept": "^1.1.0",
"axios": "^0.19.0",
"babel-polyfill": "^6.26.0",
"classnames": "^2.2.6",
"clone-deep": "^3.0.1",
"d3": "^4.9.1",
"deep-equal": "^1.0.1",
"draft-js": "0.10.5",
"draft-js-buttons": "2.0.1",
"draft-js-export-html": "1.2.0",
"file-saver": "^1.3.8",
"formsy-react": "^0.19.5",
"history": "^4.6.3",
"libphonenumber-js": "1.7.16",
"locate-path": "^2.0.0",
"mime": "^2.0.3",
"moment": "^2.18.1",
"nanoid": "^1.0.1",
"node": "^12.10.0",
"node-gyp": "^5.0.3",
"path-to-regexp": "^2.2.1",
"prettier": "^1.6.1",
"prop-types": "^15.5.10",
"qs": "6.7.0",
"query-string": "5.1.1",
"react": "16.7.0",
"react-app-polyfill": "^1.0.5",
"react-autofill": "^1.1.4",
"react-cropper": "^1.0.0",
"react-datepicker": "^1.4.1",
"react-dom": "16.7.0",
"react-dropzone": "^4.1.3",
"react-geosuggest": "2.12.0",
"react-html-parser": "^2.0.2",
"react-infinite-scroller": "^1.1.1",
"react-input-range": "^1.1.4",
"react-intl": "^2.4.0",
"react-intl-redux": "^0.7.0",
"react-media": "^1.8.0",
"react-modal": "^2.3.3",
"react-phone-number-input": "2.3.2",
"react-quill": "^1.0.0",
"react-redux": "^5.0.5",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.2",
"react-scripts": "1.0.10",
"react-select": "^1.0.0-rc.5",
"react-select-plus": "^1.1.0",
"react-tooltip": "^3.3.0",
"react-transition-group": "2.5.3",
"recompact": "^3.3.0",
"redux": "4.0.1",
"redux-form": "7.3.0",
"redux-thunk": "^2.2.0",
"reselect": "^3.0.1",
"resolve-url-loader": "^2.0.2",
"select2": "^4.0.3",
"snake-case": "^2.1.0",
"svg-inline-loader": "^0.7.1",
"svg-url-loader": "^2.0.2",
"validator": "^8.0.0"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"ie 11",
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@babel/core": "7.4.4",
"@babel/node": "7.4.5",
"@babel/plugin-proposal-class-properties": "7.4.4",
"@babel/plugin-proposal-object-rest-spread": "7.4.4",
"@babel/plugin-proposal-optional-chaining": "7.2.0",
"@babel/plugin-transform-arrow-functions": "7.2.0",
"@babel/plugin-transform-classes": "7.4.4",
"@babel/plugin-transform-runtime": "7.4.4",
"@babel/preset-env": "7.4.4",
"@babel/preset-flow": "7.0.0",
"@babel/preset-react": "7.0.0",
"autoprefixer": "^9.5.1",
"axios-mock-adapter": "^1.10.0",
"babel-eslint": "10.0.1",
"babel-loader": "8.0.6",
"babel-plugin-react-intl": "3.0.1",
"babel-plugin-react-intl-auto": "1.7.0",
"colors": "1.3.3",
"cross-env": "^5.1.4",
"css-loader": "3.0.0",
"cssnano": "4.1.10",
"del-cli": "^1.1.0",
"enzyme": "3.8.0",
"enzyme-adapter-react-16": "1.7.1",
"eslint": "5.16.0",
"eslint-config-airbnb": "^15.1.0",
"eslint-import-resolver-webpack": "^0.10.1",
"eslint-loader": "^2.1.1",
"eslint-plugin-babel": "^5.1.0",
"eslint-plugin-flowtype": "3.8.2",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jest": "22.1.2",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-react": "^7.1.0",
"file-loader": "3.0.1",
"flow-babel-webpack-plugin": "1.1.1",
"flow-bin": "0.102.0",
"flow-typed": "2.5.2",
"glob": "^7.1.2",
"jest": "24.8.0",
"mini-css-extract-plugin": "^0.6.0",
"node-sass": "^4.12.0",
"postcss-easy-import": "^3.0.0",
"postcss-loader": "^3.0.0",
"react-docgen": "^2.20.1",
"react-hot-loader": "^4.3.12",
"react-test-renderer": "^15.6.2",
"redux-devtools": "3.5.0",
"redux-devtools-dock-monitor": "1.1.3",
"redux-devtools-log-monitor": "1.4.0",
"redux-mock-store": "^1.4.0",
"sass-loader": "^6.0.6",
"uglifyjs-webpack-plugin": "^1.1.2",
"url-loader": "^2.1.0",
"webpack": "4.31.0",
"webpack-cli": "^3.3.2",
"webpack-dev-server": "3.3.1"
}
}
.babelrc
{
"presets": [
["@babel/preset-env", { "targets": { "ie": "11", "esmodules": true }}],
"@babel/preset-react",
"@babel/preset-flow"
],
"plugins": [
"@babel/plugin-transform-runtime",
"@babel/plugin-proposal-object-rest-spread",
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-optional-chaining",
"react-hot-loader/babel",
"@babel/plugin-transform-classes",
"@babel/plugin-transform-arrow-functions"
],
"env": {
"lang":{
"plugins": ["@babel/plugin-syntax-object-rest-spread", ["react-intl", {
"messagesDir": "../assets/build-translations/messages/"
}]]
}
}
}
webpackconfig.js
const { DefinePlugin, NamedModulesPlugin } = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const FlowBabelWebpackPlugin = require('flow-babel-webpack-plugin');
const path = require('path');
require('babel-polyfill');
const webpackAlias = require('./webpack.config.alias');
const pagenames = require('./utils/pageNames');
const DEV_SERVER_PUBLIC_PATH = 'http://192.168.1.14:44444/webpack/static/';
const environment = process.env && process.env.NODE_ENV || 'production';
const PROD = environment === 'production';
const environmentValues = new DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(environment)
});
const UglifyJSPluginInit = new UglifyJSPlugin({
uglifyOptions: {
beautify: false,
ecma: 6,
compress: true,
comments: false,
parallel: true,
sourceMap: true,
warnings: false,
}
});
const flowPlugin = environment === 'lang' ? [] : [new FlowBabelWebpackPlugin()];
const commonPlugins = [environmentValues, ...flowPlugin, new MiniCssExtractPlugin({
filename: '[name].css',
})];
const productionPlugins = [UglifyJSPluginInit];
const pluginsArr = PROD
? [...commonPlugins, ...productionPlugins]
: [...commonPlugins, new NamedModulesPlugin()];
const devtool = PROD ? false : 'cheap-source-map';
const imagePublicPath = PROD ? '/static/' : DEV_SERVER_PUBLIC_PATH;
const modeAlias = PROD ? 'production' : 'development';
const outputPath = path.resolve(__dirname, '../assets');
const entry = {
app: './utils/app.js',
'password-reset': './utils/scss/password-reset.scss',
[pagenames.pageNames1]: './fileurl.js',
[pagenames.pageNames2]: './fileurl.js',
[pagenames.pageNames3]: './fileurl.js',
[pagenames.pageNames4]: './fileurl.js',
};
const config = {
...webpackAlias,
mode: modeAlias,
optimization: {
splitChunks: {
cacheGroups: {
commons: {
minChunks: 13,
name: 'commons',
chunks: 'all',
},
},
}
},
context: __dirname,
entry,
devtool,
output: {
path: outputPath,
publicPath: '/webpack/static/',
filename: '[name].js',
},
devServer: {
contentBase: outputPath,
port: 44444,
host: '192.168.1.14',
publicPath: DEV_SERVER_PUBLIC_PATH,
stats: {
errors: true,
warnings: true,
assets: false,
chunks: true,
chunkGroups: true,
chunkModules: true,
chunkOrigins: true,
builtAt: false,
cached: false,
timings: false,
outputPath: false,
modules: true,
entrypoints: true,
},
headers: {
"Access-Control-Allow-Origin": "\*",
}
},
module: {
rules: [
{
test: /\.svg$/,
loader: 'svg-url-loader'
},
{
test: /\.js$/,
exclude: path.resolve(__dirname, "node_modules"),
include: __dirname,
use: [
{
loader: 'babel-loader',
},
{
loader: 'eslint-loader',
options: {
failOnWarning: false,
failOnError: true
}
}
]
},
{
test: /\.(png|jpg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 10000, // Convert images < 10kb to base64 strings
publicPath: imagePublicPath // Since the fallback is file-loader, We end up serving from /static/{file} or during development - wherever the server is located
}
}
]
},
{
test: /\.scss|css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: !PROD,
reloadAll: true,
},
},
{
loader: 'css-loader',
options: {
sourceMap: true,
}
},
{ loader: 'postcss-loader' },
{
loader: 'resolve-url-loader'
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
},
]
}
]
},
plugins: pluginsArr
};
console.log('process.env.NODE_ENV', environment);
module.exports = config;
Any help would be appreciated, Thanks in advance.
回答1:
I can see on your .babelrc presets, under @babel/preset-env you are defining "esmodules": true.
Based on the @babel/preset-env documentation, if you set esmodules to true, browsers targets will be ignored.
Please note: when specifying the esmodules target, browsers targets will be ignored.
Can you try changing this option to see if you have any luck?
Also, I suggest you try a production build to see if you get the same error/behavior.
回答2:
Try to delete the package-lock.json and the node_modules folder, then using the following package.json content (change the name to your application name. In this file, I changed some package version.) and execute the npm install commands to install the related package. I have created a sample using this file, it works well on my side.
{
"name": "<your application name>",
"version": "0.1.0",
"private": true,
"dependencies": {
"@synapsestudios/react-drop-n-crop": "^0.2.0",
"attr-accept": "^1.1.0",
"axios": "^0.19.0",
"babel-polyfill": "^6.26.0",
"classnames": "^2.2.6",
"clone-deep": "^3.0.1",
"d3": "^4.9.1",
"deep-equal": "^1.0.1",
"draft-js": "0.10.5",
"draft-js-buttons": "2.0.1",
"draft-js-export-html": "1.2.0",
"file-saver": "^1.3.8",
"formsy-react": "^0.19.5",
"history": "^4.6.3",
"libphonenumber-js": "1.7.16",
"locate-path": "^2.0.0",
"mime": "^2.0.3",
"moment": "^2.18.1",
"nanoid": "^1.0.1",
"node": "^12.10.0",
"node-gyp": "^5.0.3",
"path-to-regexp": "^2.2.1",
"prettier": "^1.6.1",
"prop-types": "^15.5.10",
"qs": "6.7.0",
"query-string": "5.1.1",
"raf": "^3.4.1",
"react": "^16.8.6",
"react-app-polyfill": "^1.0.1",
"react-autofill": "^1.1.4",
"react-cropper": "^1.0.0",
"react-datepicker": "^1.4.1",
"react-dom": "^16.8.6",
"react-dropzone": "^4.1.3",
"react-geosuggest": "2.12.0",
"react-html-parser": "^2.0.2",
"react-infinite-scroller": "^1.1.1",
"react-input-range": "^1.3.0",
"react-intl": "^2.4.0",
"react-intl-redux": "^0.7.0",
"react-media": "^1.8.0",
"react-modal": "^2.3.3",
"react-phone-number-input": "2.3.2",
"react-quill": "^1.0.0",
"react-redux": "^7.1.0",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.2",
"react-scripts": "3.0.1",
"react-select": "^1.0.0-rc.5",
"react-select-plus": "^1.1.0",
"react-tooltip": "^3.3.0",
"react-transition-group": "2.5.3",
"recompact": "^3.3.0",
"redux": "^4.0.4",
"redux-form": "^8.2.5",
"redux-thunk": "^2.2.0",
"reselect": "^3.0.1",
"resolve-url-loader": "^2.0.2",
"select2": "^4.0.3",
"snake-case": "^2.1.0",
"svg-inline-loader": "^0.7.1",
"svg-url-loader": "^2.0.2",
"validator": "^8.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"ie 11",
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@babel/core": "7.4.4",
"@babel/node": "7.4.5",
"@babel/plugin-proposal-class-properties": "7.4.4",
"@babel/plugin-proposal-object-rest-spread": "7.4.4",
"@babel/plugin-proposal-optional-chaining": "7.2.0",
"@babel/plugin-transform-arrow-functions": "7.2.0",
"@babel/plugin-transform-classes": "7.4.4",
"@babel/plugin-transform-runtime": "7.4.4",
"@babel/preset-env": "7.4.4",
"@babel/preset-flow": "7.0.0",
"@babel/preset-react": "7.0.0",
"autoprefixer": "^9.5.1",
"axios-mock-adapter": "^1.10.0",
"babel-eslint": "10.0.1",
"babel-loader": "8.0.6",
"babel-plugin-react-intl": "3.0.1",
"babel-plugin-react-intl-auto": "1.7.0",
"colors": "1.3.3",
"cross-env": "^5.1.4",
"css-loader": "3.0.0",
"cssnano": "4.1.10",
"del-cli": "^1.1.0",
"enzyme": "3.8.0",
"enzyme-adapter-react-16": "1.7.1",
"eslint": "5.16.0",
"eslint-config-airbnb": "^15.1.0",
"eslint-import-resolver-webpack": "^0.10.1",
"eslint-loader": "^2.1.1",
"eslint-plugin-babel": "^5.1.0",
"eslint-plugin-flowtype": "3.8.2",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jest": "22.1.2",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-react": "^7.1.0",
"file-loader": "3.0.1",
"flow-babel-webpack-plugin": "1.1.1",
"flow-bin": "0.102.0",
"flow-typed": "2.5.2",
"glob": "^7.1.2",
"jest": "24.8.0",
"mini-css-extract-plugin": "^0.6.0",
"node-sass": "^4.12.0",
"postcss-easy-import": "^3.0.0",
"postcss-loader": "^3.0.0",
"react-docgen": "^2.20.1",
"react-hot-loader": "^4.3.12",
"react-test-renderer": "^15.6.2",
"redux-devtools": "^3.5.0",
"redux-devtools-dock-monitor": "1.1.3",
"redux-devtools-log-monitor": "1.4.0",
"redux-mock-store": "^1.4.0",
"sass-loader": "^6.0.6",
"uglifyjs-webpack-plugin": "^1.1.2",
"url-loader": "^2.1.0",
"webpack": "4.31.0",
"webpack-cli": "^3.3.2",
"webpack-dev-server": "3.3.1"
}
}
回答3:
If the arrow function is ending up in the browser, then it doesn’t look like you are transpiling your code before serving it to the browser. I see your installing webpack and Babel, but their are no scripts in your package.json to run either. As you have not shared a webpack config, you give us little to go on without seeing how the rest of your project is setup
I would suggest moving your code into create-react-app and try running it from that.
回答4:
Unless you're supplying a .babelrc or babel.config.js (documentation) that you didn't include with your question, then your @babel/preset-env dependency may not be getting applied during transpilation.
The default behavior for @babel/preset-env is to transpile down to EMCAScript 2015+, which would then work for IE11.
Sidenote, if no targets are specified, @babel/preset-env will transform all ECMAScript 2015+ code by default.
I would suggest adding one of those. For example:
.babelrc
{
"presets": ["@babel/preset-env"]
}
babel.config.js
module.exports = function (api) {
api.cache(true);
return {
presets: ["@babel/preset-env"],
};
}
回答5:
Till now Internet Explorer 11 does not ECMAScript 6 (ES6) version of JavaScript.You have to write the function in old ways (curly brackets).Some thing like below:
var name = ""
function func1(filter){
if (filter instanceof RegExp === true)
return filter.text(name)
else{
return filter === name
}
}
function testParameter(name, filters){
name = this.name
return filters.some(func1);
}
Array.some() function is of ES5 which is supported in Internet Explorer.
Reference:
https://interoperability.blob.core.windows.net/web/MS-ES5EX/%5BMS-ES5EX%5D-180828.pdf
来源：https://stackoverflow.com/questions/59550650/my-react-app-is-not-rendering-in-internet-explorer-because-of-arrow-function