./app/main.js模块构建失败: SyntaxError:意外令牌(10:18)中的错误
./app/main.js模块构建失败: SyntaxError:意外令牌(10:18)中的错误
提问于 2017-01-12 12:22:12
当我使用“webpack”时，下面的错误.
./app/main.js模块构建失败: SyntaxError:意外令牌(10:18)中的错误
8 |
9 | function main(){
> 10 | ReactDOM.render(<Hello />, document.getElementById('app'));
| ^
11 | }
12 | main();
13 | component.jsx
<div><i> import React from 'react';
export default class Hello extends React.Component {
render() {
return (<h1>Hello World---component.jsx</h1>)
}
}</i></div>main.js
import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './component.jsx';
function main(){
ReactDOM.render(<Hello />, document.getElementById('app'));
}
main();package.json
{
"name": "enviromentproject",
"version": "1.0.0",
"description": "一个用来做环境搭建的项目测试",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
},
"author": "jkwu",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.21.0",
"babel-loader": "^6.2.10",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-preset-es2015": "^6.18.0",
"babel-runtime": "^6.20.0",
"css-loader": "^0.26.1",
"style-loader": "^0.13.1",
"vue-hot-reload-api": "^2.0.7",
"vue-html-loader": "^1.2.3",
"vue-style-loader": "^1.0.0",
"webpack": "^1.14.0"
},
"dependencies": {
"hexo-deployer-git": "^0.2.0",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"webpack-dev-server": "^1.16.2"
}
}回答 2
Stack Overflow用户
发布于 2017-01-12 13:01:05
首先，您的component.jsx不应该在html标记中
简单写入
import React from 'react';
export default class Hello extends React.Component {
render() {
return (<h1>Hello World---component.jsx</h1>)
}
}其次，更重要的是，确保在webpack配置中指定babel作为jsx的加载程序。
module : {
loaders : [
{
test : /\.jsx?/,
exclude : /node_modules/,
loader : 'babel'
}
]
}而且，它不会引起问题，但不需要在函数中调用ReactDOM.render()
class Hello extends React.Component {
render() {
return (<h1>Hello World---component.jsx</h1>)
}
}
ReactDOM.render(<Hello />, document.getElementById('app'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<div id="app"></div>Stack Overflow用户
发布于 2017-01-25 10:17:51
加入“babel-预设反应”
在您的webpack.config.js中安装babel-预设-react，并在babel-加载程序中添加“预设”选项。
(也可以将其添加到您的.babelrc或package.js：http://babeljs.io/docs/usage/babelrc/中)
下面是一个示例webpack.config.js：
{
test: /\.jsx?$/, // Match both .js and .jsx files
exclude: /node_modules/,
loader: "babel",
query:
{
presets:['react']
}
}然后: npm安装react-在main.js导入时从“react”保存{ render }；
使用此渲染
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41613135
复制相关文章
相似问题
腾讯云开发者
