0

当我使用命令运行构建时，我遇到了这个问题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

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']
  }
};

和 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'));

我做错了什么？这是我没有继续前进的第二天。我正在尝试使用 SCSS、jsx、react-hot-loader，但这不起作用。

4

3 回答 3

0

尝试将加载程序设置为！在一行中分隔值。据我所知，加载器的格式作为数组略有不同，不仅仅是字符串数组，还有对象数组。我用过这样的东西：

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

或者在你的情况下，我猜：

loader: 'react-hot!jsx?insertPragma=React.DOM&harmony!babel'
于 2015-11-15T17:00:30.753 回答
0

我解决了。我需要添加.babelrc包含此内容的文件

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

在此之后需要在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'));

这component.jsx

import React from 'react';

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

主要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>

要检查差异，您可以访问我的 github 存储库

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

于 2015-11-16T14:39:19.093 回答
0

我最好的猜测是，您的问题源于 app.jsx 第一行中的特殊导入（实际上，这就是您的错误消息告诉您的内容）。

而不是import React, React from 'react';，只是做import React from 'react';。

于 2015-11-15T23:05:14.870 回答