在ReactJS应用程序中设置jsx文件。堆栈：babel，webpack，react，react-hot，jsx，Sass

Question

I have this problem when I run the build with command npm run build : 使用命令npm run build时出现此问题：

ERROR in ./src/app.jsx
Module parse failed: /Users/antongoncharov/apps/react-js-app/src/app.jsx Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import React, React from 'react';
| import ReactDom from 'react-dom';
| require('./app.scss');
 @ multi main

The webpack.config.js webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: [
    'webpack-dev-server/client?http://0.0.0.0:3000',
    'webpack/hot/only-dev-server',
    './src/app'
  ],
  output: {
    path: path.resolve('./dist'),
    filename: "[name].js"
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /(node_modules|bower_components)/,
      loaders: ['react-hot','jsx?insertPragma=React.DOM&harmony','react', 'babel'],
      include: path.join('./src/app.jsx', 'src')
    }, {
      test: /\.scss$/,
      loader: ["style", "css", "sass"]
    }]
  },
  resolve: {
    modulesDirectories: ['node_modules'],
    extensions: ['', '.js','.jsx']
  }
};

And the app.jsx 还有app.jsx

import React, React from 'react';
import ReactDom from 'react-dom';
require('./app.scss');

export default class HelloWorld extends React.Component {
  render() {
    return <p>Hello, blablabla!</p>;
  }
}

ReactDom.render(<HelloWorld />,document.getElementById('main'));

What did I do wrong? 我做错了什么？ This is my second day without moving on. 这是我第二天没有继续前进。 I'm trying to use SCSS, jsx, react-hot-loader, but this is not working. 我正在尝试使用SCSS，jsx，react-hot-loader，但这不起作用。

Answer 1

Try to setup loaders as ! 尝试将加载程序设置为！ separated values in a single row. 在单行中分隔值。 As far as I remember the format for loaders as array is slightly different, not just array of strings but array of objects. 据我所知，加载器的格式与数组略有不同，不仅是字符串数组，而且是对象数组。 I used something like this: 我用了这样的东西：

{
   test: /\.jsx$/,
   exclude: /node_modules/,
   loader: 'react-hot!babel-loader'
}

or in your case, I guess: 或者您的情况，我想：

loader: 'react-hot!jsx?insertPragma=React.DOM&harmony!babel'

Answer 2

My best guess is that your problem stems from the idiosyncratic import in the first line of app.jsx (indeed, this is what your error message is telling you). 我最好的猜测是，您的问题源于app.jsx第一行中的特殊导入（实际上，这是您的错误消息告诉您的内容）。

Instead of import React, React from 'react'; 不是import React, React from 'react';而是import React, React from 'react'; , just do import React from 'react'; ，只需import React from 'react'; . 。

Answer 3

I solved it. 我解决了 I was need to add the .babelrc file with this content 我需要添加具有此内容的.babelrc文件

{
  "presets": ["es2015", "stage-0", "react"]
}

And after this need to separate the logic at the app.jsx file 之后，需要在app.jsx文件中分离逻辑

import HelloWorld from './component.jsx';
import React from 'react';
import ReactDom from 'react-dom';
require('./app.scss');

ReactDom.render(<HelloWorld />, document.getElementById('main'));

The component.jsx component.jsx

import React from 'react';

export default class HelloWorld extends React.Component {
  render() {
    return ( <p>Hello World!</p>);
  }
}

The main index.html is 主要的index.html是

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>react-js-app</title>
</head>
<body>
  <div id="main"></div>
  <script src="/static/app.js"></script>
</body>
</html>

For checking the differences you may visit my github repo 为了检查差异，您可以访问我的github仓库

https://github.com/eyale/react-js-app https://github.com/eyale/react-js-app

在ReactJS应用程序中设置jsx文件。堆栈：babel，webpack，react，react-hot，jsx，Sass

问题描述

3 个解决方案

解决方案1
0 2015-11-15 17:00:30

解决方案2
0 2015-11-15 23:05:14

解决方案3
0 2015-11-16 14:39:19

在ReactJS应用程序中设置jsx文件。 堆栈：babel，webpack，react，react-hot，jsx，Sass

问题描述

3 个解决方案

解决方案1 0 2015-11-15 17:00:30

解决方案2 0 2015-11-15 23:05:14

解决方案3 0 2015-11-16 14:39:19

在ReactJS应用程序中设置jsx文件。堆栈：babel，webpack，react，react-hot，jsx，Sass

解决方案1
0 2015-11-15 17:00:30

解决方案2
0 2015-11-15 23:05:14

解决方案3
0 2015-11-16 14:39:19