这是我收到的错误消息（出于安全原因，我删除了部分文件路径）：
ERROR in ./react-components/MyComponent.js
Module parse failed: /home/vagrant/src/***/react-
components/MyComponent.js Unexpected token (6:6)
You may need an appropriate loader to handle this file type.
| render() {
| return (
| <div>
| <p>FooBar: {this.props.fooBar}</p>
| <p>Baz: {this.props.baz}</p>
@ ./client/app/app.module.js 52:19-64
@ ./client/app/index.js
现在，我要做的只是让 React 组件存在于 Angular 1.X 项目中。这是 webpack 配置的样子：
webpack.make.js：
config.module = {
rules: [{
// JS LOADER
// Reference: https://github.com/babel/babel-loader
// Transpile .js files using babel-loader
// Compiles ES6 and ES7 into ES5 code
test: /\.js$/,
use: [{
loader : 'babel-loader',
options : {
shouldPrintComment(commentContents) {
// keep `/*@ngInject*/`
return /@ngInject/.test(commentContents);
},
plugins : TEST ?
[[ 'istanbul', { 'exclude' : [ '**/*.spec.js'] }]]
: [],
presets : ['es2015', 'react', 'stage-0']
}
}],
include: [
path.resolve(__dirname, 'client/')
]
},{
// ASSET LOADER
// Reference: https://github.com/webpack/file-loader
// Copy png, jpg, jpeg, gif, svg, woff, woff2, ttf, eot files to output
// Rename the file using the asset hash
// Pass along the updated reference to your code
// You can add here any file extension you want to get copied to your output
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)([\?]?.*)$/,
loader: 'file-loader'
}, {
// HTML LOADER
// Reference: https://github.com/webpack/raw-loader
// Allow loading html through js
test: /\.html$/,
loader: 'raw-loader'
}, {
// CSS LOADER
// Reference: https://github.com/webpack/css-loader
// Allow loading css through js
//
// Reference: https://github.com/postcss/postcss-loader
// Postprocess your css with PostCSS plugins
test: /\.css$/,
loader: !TEST
// Reference: https://github.com/webpack/extract-text-webpack-plugin
// Extract css files in production builds
//
// Reference: https://github.com/webpack/style-loader
// Use style-loader in development for hot-loading
? ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
{
// PostCSS
// Reference: https://github.com/postcss/autoprefixer-core
// Add vendor prefixes to your css
loader: 'postcss-loader',
options : {
plugins : [
autoprefixer({browsers: ['last 2 version']})
]
}
}
]
})
// Reference: https://github.com/webpack/null-loader
// Skip loading css in test mode
: 'null-loader'
}, {
// SASS LOADER
// Reference: https://github.com/jtangelder/sass-loader
test: /\.(scss|sass)$/,
loader : ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
{
// PostCSS
// Reference: https://github.com/postcss/autoprefixer-core
// Add vendor prefixes to your css
loader: 'postcss-loader',
options : {
plugins : [
autoprefixer({browsers: ['last 2 version']})
]
}
},
{
loader : 'sass-loader',
options: {
outputStyle: 'compressed',
precision: 10,
sourceComments: false
}
}
]
}),
include: [
path.resolve(__dirname, 'client/app/app.scss')
]
}, {
// Imports Loader
// This allows the CodeMirror json linter to find jsonlint, which it expects to be global
test: require.resolve('codemirror/addon/lint/json-lint'),
use: 'imports-loader?jsonlint=jsonlint-mod'
}
]
};
这是我的.babelrc：
{
"presets": ["es2015", "react", "stage-3", "stage-0"]
}
stage-3和都试过了stage-0，但我仍然得到同样的错误。我确保babel-preset-react通过 npm 安装。JS 文件中的 JSX 没有任何问题，因为它是一个简单的 React 组件，用作我正在使用的存储库中的示例代码。我已经到了不知道下一步该往哪里看的地步。