这是我收到的错误消息(出于安全原因我删除了文件路径的一部分):
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
,但是我仍然遇到相同的错误。我确保通过NPM安装babel-preset-react
。JS文件中的JSX没有错,因为这是一个简单的React组件,它用作我正在使用的存储库中的示例代码。我已经达到了一个不确定接下来要看哪里的地步。
我忘了在 includes
对象中添加 path.resolve(__dirname, 'react-components')
,其中js文件属于。