JSX不解析React.js

-2

所以这个常见的错误弹出在我的反应的应用程序，JSX不通过webpack解析。我已经研究了十几个可能的答案，但无济于事，我试图避免使用.babelrc文件，导致我的mac一直隐藏它，我宁愿使用查询键anyhows。JSX不解析React.js

render: function() { 
     return {  
       <div>Hello World</div> 
       ^
     } 
    } 
Module build failed: SyntaxError:

webpack.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin'); 

var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({ 
    template: './app/index.html', 
    filename: 'index.html', 
    inject: 'body' 
}); 

module.exports = { 

    entry: ['./app/index.js'], 

    output: { 
     path: __dirname + '/dist', 
     filename: 'index_bundle.js' 
    }, 

    devServer: { 
     inline: true, 
     port: 3333 
    }, 

    module: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       exclude: /node_modules/, 
       loader: 'babel', 
       query: { 
        presets: ['react']   
       } 
      } 
    ] 
}, 

    plugins: [HtmlWebpackPluginConfig] 

}

的package.json

{ 
    "name": "github_battle", 
    "version": "1.0.0", 
    "description": "", 
    "main": "webpack.config.js", 
    "scripts": { 
    "production": "webpack -p", 
    "start": "webpack-dev-server" 
    }, 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
    "react": "^15.0.1", 
    "react-dom": "^15.0.1" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.7.7", 
    "babel-loader": "^6.2.4", 
    "babel-preset-react": "^6.5.0", 
    "html-webpack-plugin": "^2.16.0", 
    "webpack": "^1.13.0", 
    "webpack-dev-server": "^1.14.1" 
    } 
}

来源

2016-04-27 Spencer Hire

的问题是与{应该是（

render: function() { 
    return (
     <div>Hello World</div> 
    ); 
    }

现在，它不应该抛出任何错误

来源

2016-04-27 07:47:50

不，这是错误的。 –

我的不好，我运行你提供的代码，它用babel编译得很好。问题出在代码中。看到我更新的答案。 –

感谢那:-)，在这里我正在调试我的webpack.config的垃圾，很好的发现。 –

您正在返回一个您尝试将JSX注入的对象。这是行不通的。您始终可以将JSX包装在括号内，但这不是必需的。

var App = React.createClass({ 
    render: function() { 
     return <div>Hello</div>; 
    } 
});

来源

2016-04-27 08:02:48

JSX不解析React.js

回答

相关问题