React项目在IE11中出现SCRIPT1014无效字符错误求助

AI 小北

2026-5-29

针对IE11中React项目SCRIPT1014错误的排查与解决

我在IE11中打开React项目时，出现“SCRIPT1014 Invalid Character”错误，但其他浏览器（包括Edge）均能正常运行。我已尝试使用core.js、babel-polyfills、babel-plugin-transform-class-properties等方案，但问题仍未解决。以下是我的webpack.config.js文件内容：

// webpack v4 
const path = require('path'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 

module.exports = { 
  entry: './src/index.js', 
  output: { 
    path: path.resolve(__dirname, '/dist'), 
    filename: 'index_bundle.js', 
    publicPath: '/', 
  }, 
  module: { 
    rules: [ 
      { 
        test: /\.js$/, 
        exclude: /node_modules/, 
        use: { 
          loader: 'babel-loader', 
        }, 
      }, 
      { 
        test: /\.styl$/, 
        exclude: /node_modules/, 
        use: ExtractTextPlugin.extract({ 
          fallback: 'style-loader', 
          use: ['css-loader', 'postcss-loader', 'stylus-loader'], 
        }), 
      }, 
      { 
        test: /\.(png|jp(e*)g|svg|woff|woff2|eot|ttf|otf)$/, 
        use: [{ 
          loader: 'url-loader', 
          options: { 
            limit: 8000, // Convert images < 8kb to base64 strings 
            name: 'images/[hash]-[name].[ext]', 
          }, 
        }], 
      }, 
    ], 
  }, 
  devServer: { 
    port: 8881, 
    host: '0.0.0.0', 
    historyApiFallback: true, 
  }, 
  watch: true, 
  plugins: [ 
    new HtmlWebpackPlugin({ 
      template: './src/index.html', 
    }), 
    new ExtractTextPlugin( { filename: 'app.bundle.css' }, ), 
  ], 
};

我还尝试了Stack Overflow上相关问题的解决方案，但均无效，恳请各位提供帮助，谢谢。

问题分析

IE11对ES6+语法的支持极差，SCRIPT1014 Invalid Character通常是因为代码里出现了IE11无法识别的语法（比如箭头函数、类属性、对象扩展运算符，或者Babel没转译到位的第三方依赖代码）。你提到已经用了polyfill，但大概率是转译范围没覆盖全或者Babel配置不全导致的。

具体解决步骤

1. 完善Babel配置文件

首先在项目根目录创建或修改.babelrc文件（也可以在package.json的babel字段配置），明确对IE11的支持：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "ie": "11"
        },
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-object-rest-spread"
  ]
}

@babel/preset-env会根据目标浏览器自动转译所需语法，useBuiltIns: "usage"会自动按需引入core-js的polyfill，不用手动在入口文件导入。
别忘了安装依赖：npm install @babel/core @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread core-js@3 --save-dev

2. 调整Webpack的转译范围

你的Webpack把node_modules全部排除在转译之外了，但有些第三方依赖可能也用了IE11不支持的语法（比如部分React组件库），可以针对性转译这些依赖：

module: {
  rules: [
    {
      test: /\.js$/,
      // 只排除不需要转译的依赖，把需要转译的包名加在括号里
      exclude: /node_modules\/(?!(axios|react-router-dom)\/).*/,
      use: {
        loader: 'babel-loader',
      },
    },
    // 其他规则保持不变
  ]
}

3. 确保HTML文件的兼容性声明

IE11可能会进入兼容模式导致解析异常，检查你的index.html是否有正确的声明：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your React App</title>
</head>
<!-- 其他内容 -->
</html>

X-UA-Compatible设置为IE=edge会强制IE使用最新的渲染模式。

4. 替换ExtractTextPlugin（Webpack v4适配）

ExtractTextPlugin在Webpack v4中对IE11的兼容性不佳，推荐换成mini-css-extract-plugin：

// 先安装依赖：npm install mini-css-extract-plugin --save-dev
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// 替换styl文件的处理规则
{
  test: /\.styl$/,
  exclude: /node_modules/,
  use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'stylus-loader'],
}

// 替换plugins中的ExtractTextPlugin
plugins: [
  new HtmlWebpackPlugin({ template: './src/index.html' }),
  new MiniCssExtractPlugin({ filename: 'app.bundle.css' })
]

5. 排查代码中的特殊字符

偶尔模板字符串里的特殊符号、全角字符也会触发这个错误，检查你的JS/JSX文件：

箭头函数() => {}是否被正常转译
类的公共字段（比如class Foo { bar = 1 }）是否有插件处理
对象扩展运算符{ ...obj }是否被转译

验证步骤

做完调整后执行npm run build，把dist目录的文件放到本地服务器，用IE11打开dist/index.html测试。如果还有错误，打开IE11开发者工具定位到错误行，看看具体是哪个语法导致的，再针对性处理。

内容的提问来源于stack exchange，提问作者Hitesh Chaudhari