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

私は何を間違えましたか？先に進まない2日目です。SCSS、jsx、react-hot-loader を使おうとしていますが、うまくいきません。

4

3 に答える 3

0

ローダーを ! としてセットアップしてみてください。値を 1 行に区切って表示します。私が覚えている限りでは、配列としてのローダーの形式は、文字列の配列だけでなく、オブジェクトの配列もわずかに異なります。私はこのようなものを使用しました：

{
   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 に答える