React.jsエラー:You may need an appropriate loader to handle this file type

記事公開日:
最終更新日:

Sponsored Links

React.jsを使っていて、CSSファイルをインポートしようと際に出たエラーです。
このエラーは、React.jsを使い始めた際に jsx ファイルで発生するケースが多いようですが、適切な loader をインストールして、 webpackを使っている場合には webpack.config.js にて定義することで解決できます。

Unexpected token (1:0)
You may need an appropriate loader to handle this file type.

以下は、cssファイルを使いたい場合の例です。
jsx ファイル関連でエラーが出る場合には、babel-loader などを npm コマンドを使ってインストールする必要があります。

style-loader css-loader を npm コマンドでインストールします。

npm install --save style-loader css-loader

そして、 webpack.config.js にて定義します。

var path = require('path');
var webpack = require('webpack');
module.exports = {
    entry: './www/src/sample/app.jsx',
    output: {
        path: './www/sample/dist',
        filename: 'bundle.js'
    },
    module: {
        loaders: [
           {
             test: /\.(js|jsx)$/,
             loader: 'babel',
             exclude: /node_modules/,
             query: {
               presets: ["es2015", "react"],
             }
           },
           {
             test: /\.css$/,
             loaders: ['style', 'css?modules'],
           }
        ]
    }
}

About
Amelt.net,LLCの創業者で、費用対効果の高い統合webマーケティングによりビジネスパートナーとして継続的にサポート。詳しいより。ブログの更新情報facebookページGoogle+そしてTwitter、またRSSfeedlyLINE@にてお知らせしていますのでフォローよろしくお願い致します。


Sponsored Links