React, WebPack et Babel pour Internet Explorer 10 et ci-dessous produit SCRIPT1002: Erreur de syntaxe

Question

J'ai lu plusieurs threads concernant des problèmes similaires et j'ai essayé quelques propositions, mais je n'ai eu aucun résultat.

J'ai suivi quelques tutoriels liés à React.js et WebPack 3. En conséquence, l'application fonctionne bien sur tous les navigateurs (en ce moment), sauf IE 10 et ci-dessous. Les points d'erreur à bundle.js (une fois que je suis en utilisant la configuration Nr.1):.
SCRIPT1002: Syntax error et la ligne - const url = __webpack_require__(83);

Avec la configuration Nr2, sur le serveur local -: SCRIPT1002: Syntax error - ligne avec eval() Et la même configuration, mais en cours d'exécution sur le serveur distant produit un peu différent d'erreur:

SCRIPT5009: 'Set' is undefine

configuration WebPack Nr1 .:

const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({ 
    template: './index.html', 
    filename: 'index.html', 
    inject: 'body' 
}) 
module.exports = { 
    entry: './index.js', 
    output: { 
    filename: 'bundle.js' 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.json$/, 
     exclude: /node_modules/, 
     loader: 'json-loader' 
     }, 
     { 
     test: /\.css$/, 
     loader: "style-loader!css-loader" 
     } 
    ], 
    rules: [ 
     { 
     test: /\.js$/, 
     exclude: /(node_modules)/,  
     use: { 
      loader: 'babel-loader', 
      options: { 
      presets: ['env', 'react'] 
      } 
     } 
     } 
    ] 
}, 
    devServer: { 
     historyApiFallback: true, 
     contentBase: './' 
    }, 
plugins: [HtmlWebpackPluginConfig] 
} 

configuration WebPack Nr2 .:

const path = require('path'); 
const webpack = require('webpack'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
const PreloadWebpackPlugin = require('preload-webpack-plugin'); 
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin'); 
const StyleExtHtmlWebpackPlugin = require('style-ext-html-webpack-plugin'); 
const CompressionPlugin = require('compression-webpack-plugin'); 
const autoprefixer = require('autoprefixer'); 

const staticSourcePath = path.join(__dirname, 'static'); 
const sourcePath = path.join(__dirname); 
const buildPath = path.join(__dirname, 'dist'); 

module.exports = { 
    stats: { 
     warnings: false 
    }, 
    devtool: 'cheap-eval-source-map', 
      devServer: {  
      historyApiFallback: true, 
      contentBase: './' 
     }, 
    entry: { 
     app: path.resolve(sourcePath, 'index.js') 
    }, 
    output: { 
     path: path.join(__dirname, 'dist'), 
     filename: '[name].[chunkhash].js', 
     publicPath: '/' 
    }, 
    resolve: { 
     extensions: ['.webpack-loader.js', '.web-loader.js', '.loader.js', '.js', '.jsx'], 
     modules: [ 
      sourcePath, 
      path.resolve(__dirname, 'node_modules') 
     ] 
    }, 
    plugins: [ 
     new webpack.DefinePlugin({ 
      'process.env.NODE_ENV': JSON.stringify('production') 
     }), 
     new webpack.optimize.ModuleConcatenationPlugin(), 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: 'vendor', 
      filename: 'vendor.[chunkhash].js', 
      minChunks: Infinity 
     }), 
     new webpack.LoaderOptionsPlugin({ 
      options: { 
       postcss: [ 
        autoprefixer({ 
         browsers: [ 
          'last 3 version', 
          'ie >= 10' 
         ] 
        }) 
       ], 
       context: staticSourcePath 
      } 
     }), 
     new webpack.HashedModuleIdsPlugin(), 
     new HtmlWebpackPlugin({ 
      template: path.join(__dirname, 'index.html'), 
      path: buildPath, 
      excludeChunks: ['base'], 
      filename: 'index.html', 
      minify: { 
       collapseWhitespace: true, 
       collapseInlineTagWhitespace: true, 
       removeComments: true, 
       removeRedundantAttributes: true 
      } 
     }), 
     new PreloadWebpackPlugin({ 
      rel: 'preload', 
      as: 'script', 
      include: 'all', 
      fileBlacklist: [/\.(css|map)$/, /base?.+/] 
     }), 
     new webpack.NoEmitOnErrorsPlugin(), 
     new CompressionPlugin({ 
      asset: '[path].gz[query]', 
      algorithm: 'gzip', 
      test: /\.js$|\.css$|\.html$|\.eot?.+$|\.ttf?.+$|\.woff?.+$|\.svg?.+$/, 
      threshold: 10240, 
      minRatio: 0.8 
     })  
    ], 
    module: { 
     rules: [ 
      { 
       test: /\.(js|jsx)$/, 
       exclude: /node_modules/, 
       use: { 
        loader: 'babel-loader', 
        options: { 
        presets: ['env', 'react', 'es2015'], 
        plugins: ["transform-es2015-arrow-functions"] 
        } 
       }, 
       include: sourcePath 
      }, 
      {     
       test: /\.css$/, 
       exclude: /node_modules/, 
       use: ExtractTextPlugin.extract({ 
        fallback: 'style-loader', 
        use: [ 
         { loader: 'css-loader', options: { minimize: true } }, 
         'postcss-loader', 
         'sass-loader' 
        ] 
       }) 
      }, 
      { 
       test: /\.(eot?.+|svg?.+|ttf?.+|otf?.+|woff?.+|woff2?.+)$/, 
       use: 'file-loader?name=assets/[name]-[hash].[ext]' 
      }, 
      { 
       test: /\.(png|gif|jpg|svg)$/, 
       use: [ 
        'url-loader?limit=20480&name=assets/[name]-[hash].[ext]' 
       ], 
       include: staticSourcePath 
      } 
     ] 
    } 
}; 

Ici en plus je l'ai ajouté le es2015 aux présélections: ['env', 'react', 'es2015'] et plugins: ["transform-es2015-arrow-functions"] mais il n'a pas de sens. Bien dans le cas où le chargeur de babel ne fonctionnera pas à toute la mauvaise configuration ou quelque chose d'autre, je pense que l'application entière ne commencera pas. Je crois que quelque chose doit être fait avec préréglages ou leur ordre ... Besoin d'un conseil de développeur expérimenté

MISE À JOUR J'ai changé devtool à inline-cheap-module-source-map et a obtenu le point d'erreur à overlay.js ->const ansiHTML = require('ansi-html');

Answer 1

dans votre package.json fichier

changer la version de webpack-dev-server à la version "2.7.1" (ou plus tôt).

"webpack-dev-server": "2.7.1" 

Effectuez ensuite une NPM installer et le tour est joué.

Cela a résolu le problème pour moi.

Toutes les versions après 2.7.1 me donne une erreur semblable à la vôtre.