reactjs es6ファイルのcssスクリプトをインポートする際に予期しないトークンILLEGALエラーが発生しました

Question

PHPを使用してnode.jsにデータを投稿し、reactjsコンポーネントのサーバー側を表示しています。

変数componentがundefinedを返すと、デバッグコンソールにエラーUnexpected token ILLEGALが表示されます。

React = require('react'), 
ReactDOM = require('react-dom/server'), 
require('babel-core/register'); 
app.post('/something', function (req, res) { 
    try { 
     var view = './src/ItemPage'; 
     var component = require(view); <<<====== Error 
     var props = req.body || null; 
     res.status(200).send(
      ReactDOM.renderToString(
       React.createElement(component, props) 
      ) 
     ); 
    } catch (err) { 
     res.status(500).send(err.message); 
    } 
}); 

問題がbundle.jsでCSSを含めるために、グロメットのUIライブラリからCSSのスクリプトをインポートによるものです。そのスタイルのインポート行を削除すると、スクリプトは正常に実行されています。なぜ、次のクラスはノードで未定義を返すのですか？構文エラーはありますか？それはwebpackでうまくコンパイルされています。

ItemPageクラス：

import React from 'react'; 
import Tabs from 'grommet/components/Tabs'; 
import Tab from 'grommet/components/Tab'; 
import 'grommet/grommet.min.css'; <<=== Error !!!! 

export default class ItemPage extends React.Component { 

    render(){ return <Tabs> 
     <Tab title="First Title"> 
      <h3>First Tab</h3> 
      <p>Contents of the first tab !</p> 
     </Tab> 
     <Tab title="Second Title"> 
      <h3>Second Tab</h3> 
      <p>Contents of the second tab</p> 
     </Tab> 
     <Tab title="Third Title"> 
      <h3>Third Tab!</h3> 
      <p>Contents of the third tab</p> 
     </Tab> 
     </Tabs> 
    } 
} 


module.exports = ItemPage; 

Answer 1

あなたはWebPACKのでcss-laoderを使用する必要があり、あなたの他のモジュールと、あなたのスタイルシートをモジュール化することができるようにしたい場合。

npm install style-loader css-loader --save-dev 

をして、それを設定します：

それをインストールし

{ 
// ... 
    module: { 
     loaders: [ 
      { test: /\.css$/, loader: "style-loader!css-loader" } 
     ] 
    } 
} 

CSSを必要とすることが可能になりますこと。

さらに詳しい情報はとhereです。