Question

请参阅下面的更新2，了解真正的问题。

我无法在某些浏览器中使用React JS。在Chrome中它完美运行。

在Firefox 47.0.1中，我收到此错误：

SyntaxError: missing } after property list

在IE 11中，我收到此错误：

SCRIPT1009: Expected '}'

我将Firefox升级到Firefox 52，它现在可以在Firefox中正常运行。

任何想法是什么问题？

另外，当它指向整个babel.js文件时，如何追踪这样的错误？通常在创建bundle.js时会报告错误，但是，在这种情况下，它报告一切正常。

建议的重复SyntaxError: missing } after property list与确定错误的内容并不是同一个问题，而在我的情况下则没有。

更新

根据Saral的回答，我在这里发布我的webpack.config.js文件：

var webpack = require('webpack');
var path = require('path');

var DIST_DIR = path.resolve(__dirname, 'dist');
var SRC_DIR = path.resolve(__dirname, 'src');

var config = {
  entry: SRC_DIR + '/app/index.js',
  output: {
    path: DIST_DIR + '/public/js',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        include: SRC_DIR,
        loader: 'babel-loader',
        query: {
            presets: ['es2015','react']
        }
      }
    ]
  }
};

module.exports = config;

更新2

好的，我想我已经找到了错误。我的所有代码似乎都是正确的，但由于某些原因，旧版浏览器在第一次出现单词async时会挂起。我假设Babel将async转换为旧浏览器可以理解的东西。但是，这似乎并没有发生。我该怎么做才能解决这个问题？

我的.babelrc文件如下所示：

{
  "presets" : ["es2015", "react"]
}

是否有必要在webpack.config.js和.babelrc文件中都有预设？如果没有，是否优先于另一个？

将来，如何让浏览器报告它不喜欢的JavaScript行？目前它指向一个巨大的“评估”部分。

Answer 1

过去面临类似的问题，原因是使用了ES6语法，并且在webpack中没有正确配置babel-polyfill。看起来就是这种情况。

<强>更新

在webpack中配置babel-polyfill

安装babel-polyfill npm install --save babel-polyfill

将配置中的输入键更新为以下内容：

entry: {
  bundle: [
    'babel-polyfill',
      SRC_DIR + '/app/index.js'
  ]
}

了解更多信息：https://babeljs.io/docs/usage/polyfill/

更新2 尝试将["latest", "stage-0"]添加到预设列表中。我已经使用了以下很长时间了

{
  "presets": ["latest", "stage-0", "react"]
}

否没有必要在您的webpack配置中添加预设。

更新3

要指向问题的确切来源，需要启用源地图。

检查https://webpack.js.org/configuration/devtool/

Answer 2

在您的webpack配置中添加devtool: 'source-map',这将帮助您在创建包后进行调试。它将生成 .map 文件，这在任何浏览器中都很容易调试。

source-map - 完整的SourceMap作为单独的文件发出。它为捆绑包添加了一个引用注释，因此开发工具知道在哪里找到它，它将显示在任何类型的浏览器中给出错误的确切代码。

 var config = {
      devtool: 'source-map',
      entry: SRC_DIR + '/app/index.js',
      output: {
        path: DIST_DIR + '/public/js',
        filename: 'bundle.js'
      },
      module: {
        loaders: [
          {
            test: /\.jsx?$/,
            include: SRC_DIR,
            loader: 'babel-loader',
            query: {
                presets: ['es2015','react']
            }
          }
        ]
      }
    };

您可以在此处找到更多信息 https://webpack.js.org/configuration/devtool/

如果您使用的是ES6语法，并且在渲染时遇到不同浏览器的问题，那么您需要安装 babel-polyfill 此工具将处理支持浏览器的不同ES6语法。

https://babeljs.io/docs/usage/polyfill/

如果这对您有用，请告诉我

React JS在某些浏览器中不起作用

2 个答案: