2016-04-27 3 views
-2

Так что эта распространенная ошибка появляется в моем приложении-клиенте, JSX не анализирует веб-пакет. Я исследовал дюжину возможных ответов, но безрезультатно, я пытаюсь избежать использования файла .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" 
    } 
} 

ответ

1

Вопрос в том, с {, который должен быть (

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

Теперь она не должна бросать любая ошибка.

+0

Нет, это неправильно. –

+0

Неплохо, я запускаю код, который вы предоставили, и он компилируется с помощью babel. Проблема в коде. См. Мой обновленный ответ. –

+0

Спасибо за это :-), здесь я отлаживал дерьмо из моего webpack.config, хорошее определение. –

0

Вы возвращаете объект, в который вы пытаетесь ввести ваш JSX. Это не сработает. Вы всегда можете обернуть свой JSX в скобках, но это не обязательно.

var App = React.createClass({ 
    render: function() { 
     return <div>Hello</div>; 
    } 
}); 
Смежные вопросы