CODEWITHSUNDEEP
reactjswebpack
Angelo Bastos
Angelo Bastos

Reputation: 37

Webpack image loader Error

I'm having trouble trying to import images to my project receiving this error when bulding: Module parse failed: C:\Users\Angelo\OptaService\OptaService\images\ImageTest.png Unexpected character '�' (1:0) You may need an appropriate loader to handle this file type.

This is my webpack configuration:

module: {
    rules: [
        {test: /\.(js)$/, use: 'babel-loader', exclude: /node_modules/},
        {test: /\.css$/, use: ['style-loader', 'css-loader']},

    ],
    loaders: [ {
        test: /\.js|.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
    }, {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loaders: [
            'file?hash=sha512&digest=hex&name=[hash].[ext]',
            'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
        ]
    } ]
},

I've already npm installed image-webpack-loader and file-loader. Also i'm importing the images in the component like this:

import image from './../../images/ImageTest.png';

...

<img className="img-fluid" src={image} alt="OptaService Logo"/>

Thanks in advance!

Upvotes: 2

Views: 1385

Answers (2)

Mo Hemati
Mo Hemati

Reputation: 281

That would be better to set up your Webpack config file to support different file types in production and development separately with maximum support for all files. To do so I recommend having 3 files for your Webpack config in the root of your project.

  1. webpack.common.js for common settings between production and development
  2. webpack.prod.js for production
  3. webpack.dev.js for development

webpack.common.js

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: {
    app: './src/App.js'
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[hash].css',
      chunkFilename: '[id].[hash].css'
    })
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          {
            loader: 'style-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'css-loader',
            options: {
              modules: true,
              localIdentName: '[local]--[hash:base64:5]',
              sourceMap: true
            }
          },
          {
            loader: 'postcss-loader'
          },
          {
            loader: 'sass-loader'
          }
        ]
      },
      {
        test: /\.(png|svg|jpg|gif|pdf)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]'
            }
          }
        ]
      }
    ]
  }
};

webpack.prod.js

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
  mode: 'production',
});

webpack.dev.js

const path = require("path");
const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'development',
  devtool: 'source-map',
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    port: 8181,
    open: 'google chrome',
    historyApiFallback: true
  }
});

with these 3 config files, you need 'dist' and 'src' directories at the root of your project.

Upvotes: 1

G4bri3l
G4bri3l

Reputation: 5146

This is the way I would set up your webpack config, you are mixing loaders and rules, you can check out the docs to investigate a little further how to setup your config properly.

module: {
  rules: [
    {
      test: /\.js|.jsx?$/,
      use: 'babel-loader',
      exclude: /node_modules/
    },
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    },
    {
      test: /\.(jpe?g|png|gif|svg)$/i,
      loaders: [
        'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
        'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false'
       ]
    }
  ]
},

Upvotes: 2

Related Questions