ReactJS file-loader not working

Question

I can't get the file loader module to work. When running this code I get this error:

"You may need an appropriate loader to handle this file type."

I've been googling a lot on this but can't find a solution. Any ideas?

webpack.config.js:

const path = require("path");
const webpack = require("webpack");

const HtmlWebpackPlugin = require("html-webpack-plugin");

const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
    template: "./client/index.html",
    filename: "index.html",
    inject: "body"
})

module.exports = {
    entry: "./client/index.js",
    output: {
        path: path.resolve("dist"),
        filename: "index_bundle.js"
    },
    module: {
        loaders: [
            { test: /\.js$/, loader: "babel-loader", exclude: /node_modules/ },
            {
                test: /\.(ico|png|gif|jpg|svg)$/i,
                loader: "file-loader"
            }
        ]
    },
    plugins: [
        HtmlWebpackPluginConfig
    ]
}

package.json:

{
  "name": "hello-world-react",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "webpack-dev-server --hot",
    "build": "webpack -p"
  },
  "dependencies": {
    "html-webpack-plugin": "^2.28.0",
    "path": "^0.12.7",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "webpack": "^2.5.0",
    "webpack-dev-server": "^2.4.5"
  },
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "file-loader": "^0.11.1"
  }
}

App.jsx:

import React from "react";

export default class App extends React.Component {
    render() {
        return (
            <div style={{ textAlign: "center" }}>
                <h1>Hello World</h1>
                <img src={require("./client/dog1.jpg")}/>
            </div>
        )
    }
}

Dan O · Accepted Answer · 2017-05-06 14:44:58Z

1

You have a .jsx source file but you're telling Webpack to only use babel-loader for files ending in.js. Fix the test in your Webpack config:

{ test: /\.jsx?$/, loader: "babel-loader", exclude: /node_modules/ },

answered May 6, 2017 at 14:44

Dan O

6,0802 gold badges35 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dan O Over a year ago

PS: third hit on google for 'jsx webpack': twilio.com/blog/2015/08/…

bit010 Over a year ago

I could swear I had support for both *.js and *.jsx before! Anyway, thank you very much for your help! :)

Collectives™ on Stack Overflow

ReactJS file-loader not working

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related