在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，薩斯

回答

相關問題