在ReactJS应用程序中设置jsx文件.堆栈:babel，webpack，react，react hot，jsx，Sa

使用命令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热加载程序，但这不起作用。

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

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

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

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

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

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

我解决了它。我需要添加具有此内容的.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 repo

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

相关内容

最新更新

热门标签：