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

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

This post is also available in: English-US (英語)

React.js,webpackを使っていて、CSSファイルをインポートしようと際に出たエラーです。
「You may need an appropriate loader to handle this file type」というエラー内容の通り、適切なloaderを使ってくださいという事みたいです。

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

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

適切なloaderをインストール

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

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

npm install --save style-loader css-loader

設定ファイル(以下の例では webpack.config.js)を編集する

そして、 設定ファイル(以下の例では webpack.config.js)を編集して、loadersを定義します。

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マーケティングによりビジネスパートナーとして継続的にサポート。詳しいより。ブログの更新情報TwitterLinkedIn、またRSSfeedlyにてお知らせしていますのでフォローよろしくお願い致します。