Reactjs 使用babel loader响应意外令牌

我正在使用Webpack、Gulp和React在我的Jekyll静态站点中使用React应用程序。 我在React元素上遇到意外的令牌错误：

Module parse failed: Unexpected token (8:4)
You may need an appropriate loader to handle this file type.
| window.mount = function(id, type) {
|   render(
|     <App type={type} />,
|     document.getElementById(id)
|   )

相关的吞咽代码：

const webpack_stream = require('webpack-stream');
const webpack_config = require('./webpack.config.js');

// I have tried gulp-webpack and gulp ( no webpack ) with the babel-loader
gulp.task('app', function () {
  return webpack_stream(webpack_config).pipe(gulp.dest('src/_assets/js/'));
});

有人能看到我缺少的、有错误的或版本/预设有问题吗

我已经仔细阅读了其他类似的问题和答案，好像没有运气

编辑1:

const webpack_stream = require('webpack-stream');
const webpack_config = require('./webpack.config.js');

// I have tried gulp-webpack and gulp ( no webpack ) with the babel-loader
gulp.task('app', function () {
  return webpack_stream(webpack_config).pipe(gulp.dest('src/_assets/js/'));
});

如果我将webpack.config.js更改为使用babel polyfill and exclude而不是include，我可以克服第一个错误，但是我仍然在

元素上出错

**webpack.config**

module.exports = {
  entry: './webpack/rfi.js',
  output: {
    path: __dirname + '/src/_assets/js',
    filename: 'rfi.js'
  },
  module: {
    rules: [{
      exclude: /node_modules/,
      test: /\.(js|jsx)$/,
      use: {
        loader: "babel-loader",
        options: {
          presets: ["react", "env", "stage-3", "es2015"],
        }
      }
    }]
  }
};

**App.js**

class Rfi extends Component {
  render() {
    return (
        <Provider store={store}>
          <Form />
        </Provider>
    );
  }
}

**error**

Module parse failed: Unexpected token (36:8)
You may need an appropriate loader to handle this file type.
|
|     return (
|         <Provider store={store}>
|           <Form />
|         </Provider>

**webpack.config**
module.exports={
条目：'./webpack/rfi.js'，
输出：{
路径：uuu dirname+'/src/u assets/js'，
文件名：“rfi.js”
},
模块：{
规则：[{
排除：/node_模块/，
测试：/\（js|jsx）$/，
使用：{
加载器：“巴别塔加载器”，
选项：{
预设值：[“反应”、“环境”、“第三阶段”、“es2015”]，
}
}
}]
}
};
**App.js**
类Rfi扩展组件{
render（）{
返回(
);
}
}
**错误**
模块分析失败：意外令牌（36:8）
您可能需要适当的加载程序来处理此文件类型。
|
|返回(
|         
|           
|         

“是”提供程序从“react redux”导入

import{Provider}；

编辑2（根据评论请求）

由于某种原因，我的信息中再也找不到好的线索了。不过这是昨天的一条

---

其中一种方法是利用

babel polyfill

，您可以将其作为项目依赖项安装

npm安装-保存babel polyfill

，并在

webpack.config.js

中将其传递到入口点（您可以相应地修改）：

编辑1个答案：

您需要确保您的商店位于层次结构的顶部，如

（app.js）

（您可以相应地修改此项）：

从“react dom”导入{render}；
从“react redux”导入{Provider}；
渲染(
,
document.getElementById（“app”）//Ammend
);

---

您可以阅读更多关于babel Polyfill的信息

我也尝试过这个方法。通过我目前的设置，它确实与代码有了一点距离，但仍然会出现类似的错误。我将用这些结果更新问题。请提供到您的工作演示或回购的链接，这样您就可以了解详细信息，并在我进行此操作时以有效的方式帮助您ange，它确实走得更远了一点，但在语法上仍然有错误，只是一个div。我认为这里的根本问题是版本控制，我认为这是babel loader和它的预设的目的。这个应用程序在它自己的实例中工作得很好。我只有在尝试将它包含在静态站点上时才有问题。我觉得我缺少了一些东西，或者可能是预设需要更新。如果我必须完全返工应用程序，使其作为JS模块工作，请让我知道我需要使用哪个版本的React/JS标准。如果你提供到github repo的链接或我可以帮助你的东西，这是最近的问题吗？我突然在一些React repo上看到同样的问题。我怀疑有第三个问题-party dependency发布了一个有bug的新版本。你能粘贴完整的stacktrace吗？

entry: ["babel-polyfill", "./webpack/app.js"],

import { render } from "react-dom";

import { Provider } from "react-redux";

render(
    <Provider store={store}>
        <Form />
    </Provider>,
    document.getElementById("app") // Ammend this accordignly
);