Syntaxfehler in IE11 mit Webpack, Babel und React

Question

Ich erhalte einen Syntaxfehler in meinem React + Redux-Projekt in Internet Explorer 11, aber ich habe keine Ahnung, warum es verursacht wird.

Ich benutze Webpack und Babel, um es zu kompilieren.

Ich versuchte mit Babel-Polyfill und Babel-es6-Polyfill, aber das half nicht.

Dies ist der Fehler Ich erhalte:

SCRIPT1002: Syntax error 
File: app.js, Line: 70, Column: 1 

Zeile 70 Spalte 1 ist, wo die eval beginnt von Webpack:

/***/ }), 
/* 21 */, 
/* 22 */ 
/***/ (function(module, exports, __webpack_require__) { 

"use strict"; 
eval("\n\nObject.define... <- Line 70 
^--- Column 1 

Dies ist mein webpack.config.js:

'use strict'; 
// Include modules and plugins 
const webpack = require('webpack'); 
const path = require('path'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 

// App and build directories 
const APP_DIR = path.resolve(__dirname, 'src/'); 
const BUILD_DIR = path.resolve(__dirname, 'public'); 

// Extract sass from the application, see index.jsx 
const extractSass = new ExtractTextPlugin({ 
    filename: 'css/[name].css' 
}); 

// The config file to load 
let env = (process.env.NODE_ENV || 'dev').toLowerCase(); 
let configFile = path.resolve(__dirname, 'config/config.' + env + '.json'); 

// Default config file if not found 
const defaultConfigFile = path.resolve(__dirname, 'config/config.dev.json'); 

/* 
* Config to be injected into the app 
* Note that JSON files are parsed upon requiring 
*/ 
let config; 

/* 
* Get the actual config 
*/ 
try { 
    config = require(configFile); 
    console.log('Loaded config file ' + configFile); 
} catch (e) { 
    config = require(defaultConfigFile); 
    console.log('Fallen back to default config file'); 
} 

// The actual webpack config 
const webpackConfig = { 
    entry: { 
     // The app entry point 
     app: APP_DIR + '/index.jsx', 

     // Vendor files will be used for bundling, they will not be compiled into the app itself 
     vendor: [ 
      'axios', 
      'prop-types', 
      'react', 
      'reactstrap', 
      'react-chartjs-2', 
      'react-dom', 
      'react-redux', 
      'react-router', 
      'react-router-dom', 
      'redux', 
      'sprintf-js', 
     ] 
    }, 

    output: { 
     path: BUILD_DIR, 
     filename: 'js/app.js' 
    }, 

    module: { 

     /* 
     * These are loaders for webpack, these will assist with compilation 
     */ 
     loaders: [ 
      { 
       /* 
       * Use Babel to compile JS and JSX files 
       * See .babelrc 
       */ 
       test: /\.jsx?/, 
       include: APP_DIR, 
       loader: 'babel-loader' 
      } 
     ], 
     rules: [ 
      { 
       /* 
       * Sass/Scss compilation rules 
       */ 
       test: /\.scss$/, 
       use: extractSass.extract({ 
        use: [ 
         { 
          loader: 'css-loader' 
         }, 
         { 
          loader: 'sass-loader' 
         } 
        ], 
        fallback: 'style-loader' 
       }) 
      }, 
      { 
       /* 
       * JS(X) compilation rules 
       * We need this, otherwise Webpack will crash during compile time 
       */ 
       test: /\.jsx?/, 
       loader: 'babel-loader' 
      } 
     ] 
    }, 
    plugins: [ 
     /* 
     * The CommonsChunkPlugin is responsible to create bundles out of commonly used modules 
      * E.g. React, React Dom, etc 
     */ 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: 'vendor', // See entry.vendor 
      filename: 'js/vendor.bundle.js' 
     }), 
     extractSass 
    ], 
    externals: { 
     /* 
     * The config external will be available to the app by using require('config') 
     */ 
     'config': JSON.stringify(config) 
    }, 
    devServer: { 
     contentBase: BUILD_DIR, 
     compress: true, 
     port: 7600, 
     inline: true, 
    }, 
}; 

if (env === 'production') { 
    webpackConfig.devtool = 'hidden-source-map'; 
} else { 
    webpackConfig.devtool = 'eval-source-map'; 
} 

module.exports = webpackConfig; 

Und meine Abhängigkeiten:

"dependencies": { 
    "axios": "^0.16.1", 
    "babel-core": "^6.24.0", 
    "babel-loader": "^6.4.1", 
    "babel-polyfill": "6.5.1", 
    "babel-preset-es2015": "^6.24.0", 
    "babel-preset-react": "^6.23.0", 
    "babel-preset-stage-1": "^6.24.1", 
    "chart.js": "^2.6.0", 
    "cross-env": "^3.2.4", 
    "css-loader": "^0.27.3", 
    "enumify": "^1.0.4", 
    "extract-text-webpack-plugin": "^2.1.0", 
    "history": "^4.6.3", 
    "ip": "^1.1.5", 
    "lodash": "^4.17.4", 
    "moment": "^2.18.1", 
    "node-sass": "^4.5.1", 
    "prop-types": "^15.5.10", 
    "react": "^15.4.2", 
    "react-addons-css-transition-group": "^15.5.2", 
    "react-addons-transition-group": "^15.5.2", 
    "react-chartjs-2": "^2.1.0", 
    "react-dom": "^15.4.2", 
    "react-js-pagination": "^2.1.0", 
    "react-redux": "^5.0.4", 
    "react-router": "^4.1.1", 
    "react-router-dom": "^4.1.1", 
    "reactstrap": "^4.5.0", 
    "redux": "^3.6.0", 
    "sass-loader": "^6.0.3", 
    "sprintf-js": "^1.1.0", 
    "style-loader": "^0.16.0", 
    "webpack": "^2.3.2" 
}, 
"devDependencies": { 
    "eslint-plugin-react": "^6.10.3", 
    "webpack-dev-server": "^2.5.1" 
} 

Und mein .babelrc:

{ 
    "presets" : [ 
     "es2015", 
     "react", 
     "stage-1" 
    ] 
} 

EDIT 1

BANANENMANNFRAU Antwort Nach fügte ich babel-preset-env und bearbeitet meine .babelrc zu sein, wie folgt:

{ 
    "presets" : [ 
     [ "env", { 
     "targets": { 
      "browsers": [ 
       "last 5 versions", 
       "ie >= 11" 
      ] 
     } 
     }], 
     "es2015", 
     "react", 
     "stage-1" 
    ] 
} 

Dieses didn 't help, es führte immer noch zu dem Fehler in IE11.

Answer 1

Installieren babel-preset-env mit npm install babel-preset-env --save-dev und verwenden Sie die folgende Konfiguration in Ihrem .babelrc:

{ 
    "presets" : [ 
    ["env", { 
     "targets": { 
     "browsers": ["last 2 versions", "ie >= 11"] 
     } 
    }], 
    "react", 
    ] 
} 

Sie können auch den folgenden Teil aus der config entfernen:

 loaders: [ 
      { 
       /* 
       * Use Babel to compile JS and JSX files 
       * See .babelrc 
       */ 
       test: /\.jsx?/, 
       include: APP_DIR, 
       loader: 'babel-loader' 
      } 
     ], 

Überprüfen Sie die docs here