我正在使用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)
| )
我尝试了各种方法和babel预设。
webpack.config.js
module.exports = {
entry: {
app: './webpack/app.js'
},
output: {
path: __dirname + '/src/_assets/js',
filename: 'app.js'
},
module: {
rules: [{
// I've tried node_modules/my-app as well
include: __dirname + 'node_modules/my-app/src',
test: /\.(js|jsx)$/,
use: {
loader: "babel-loader",
options: {
// I've tried several variations of this:
presets: ["react", "env", "stage-0", "es2015", { targets: { node: true } }],
}
}
}]
}
};
相关gulp代码:
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/'));
});
任何人都可以看到我遗失的任何内容,有错误,或者版本/预设存在问题吗?
我查看了其他类似的问题和答案,例如this和this但没有运气。
修改1:
如果我更改webpack.config.js以使用babel-polyfill而排除而不是include我可以通过第一个错误,但我仍然在<Provider>
元素上出错。
**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>
是提供商已导入import { Provider } from 'react-redux';
编辑2 (每条评论请求)
出于某种原因,我的消息中没有得到好的跟踪。这是昨天的一个。
答案 0 :(得分:2)
其中一种方法是使用babel-polyfill
,您可以将其安装为项目依赖项npm install --save babel-polyfill
,并在webpack.config.js
内部将其传递给入口点(您可以修改)相应地):
entry: ["babel-polyfill", "./webpack/app.js"],
修改1回答:
您需要确保您的商店位于层次结构的顶部,例如(app.js)
(您可以相应地修改它):
import { render } from "react-dom";
import { Provider } from "react-redux";
render(
<Provider store={store}>
<Form />
</Provider>,
document.getElementById("app") // Ammend this accordignly
);
您可以阅读有关babel Polyfill Here
的更多信息