在ReactJS应用程序中设置jsx文件。堆栈：巴贝尔的WebPack，反应，反应热，JSX，萨斯

我有这样的问题，当我用命令npm run build运行构建：在ReactJS应用程序中设置jsx文件。堆栈：巴贝尔的WebPack，反应，反应热，JSX，萨斯

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，但这不起作用。

来源

2015-11-15 Honcharov Anton

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

尝试将装载机设置为！在单行中分隔值。据我记得装载器的格式与数组稍有不同，不仅仅是字符串数组，而是数组对象。我以前是这样的：

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

或你的情况，我想：

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

来源

2015-11-15 17:00:30

它仍然有同样的错误（（（ –

我最好的猜测是，你的问题，从特质进口茎app.jsx的第一行（的确，这就是你的错误信息告诉你的）。

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

来源

2015-11-15 23:05:14

崩溃nope（（（相同的结果） –

我解决了它。我需要添加.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-16 14:39:19

在ReactJS应用程序中设置jsx文件。堆栈：巴贝尔的WebPack，反应，反应热，JSX，萨斯

回答

相关问题