Can not import image in javascript . Module parse failed: Unexpected character '�' (1:0)

Question

this error is occuring in my react application.

the full message says ./bluecardback.jpg 1:0 Module parse failed: Unexpected character '�' (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders (Source code omitted for this binary file)

webpack.config:

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


module.exports = {
  entry: [
    path.join(__dirname, './src/index.js')
  ],
  module: {
    rules: [{
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: [{ loader: 'babel-loader', options: { presets: ['@babel/preset-env', '@babel/react'] } }],
    },
    { 
      test: /\.(less|css|scss)$/, 
      use: ['style-loader', 'css-loader', 'less-loader',] 
    }
    ]
  },
  output: {
    path: path.join(__dirname, '/public'),
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: path.join(__dirname, '/public'),
    // historyApiFallback: true
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html"
    })
  ]
}

package.json:

{
  "name": "react-client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.9.0",
    "react-dnd": "^14.0.3",
    "react-dnd-html5-backend": "^14.0.1",
    "react-dom": "^16.9.0",
    "react-scripts": "^4.0.3",
    "socket.io-client": "^2.2.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.5.5",
    "@babel/core": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6",
    "babel-register": "^6.26.0",
    "css-loader": "^3.6.0",
    "file-loader": "^4.3.0",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.10.3",
    "less-loader": "^5.0.0",
    "style-loader": "^1.3.0",
    "url-loader": "^2.3.0",
    "webpack": "^4.39.3",
    "webpack-cli": "^3.3.7",
    "webpack-dev-server": "^3.8.0"
  },
  "scripts": {
    "start": "webpack-dev-server --mode=development --port=4000 --inline --hot",
    "build": "webpack --mode=production"
  }
}

my import looks like this import background from "../bluecardback.jpg";

import is for importing components, which is code. You cannot import a .jpg file. You're importing "background" from a jpg file; how is it possible to even define a background function in a JPG file? — HoldOffHunger
– HoldOffHunger, Commented Aug 29, 2021 at 17:23
i use the import like this in my component as attribute <div style={{backgroundImage :url(${background}),}}></div> — user16644136
– user16644136, Commented Aug 29, 2021 at 17:26

Shan · Accepted Answer · 2022-01-17 15:00:48Z

5

Your config is missing a loader for jpg file.

Try adding this

{
  test: /\.(png|jpe?g|gif)$/i,
  loader: 'file-loader'
}

to your module.rules array in webpack.config.

answered Jan 17, 2022 at 15:00

Shan

1,5684 silver badges12 bronze badges

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

2 Comments

anti-duhring Over a year ago

This solution works, but you have to install the file-loader package first. Run npm install --save-dev file-loaderand then add the code

Midiman Over a year ago

Thank for this solution! Amazing webpack just doesn't put this in place, such a basic thing. There are many 'examples' on the interweb showing how to do file imports, but strangely they leave out this crucial step! Why can't they just go on Joe Rogan and waffle on about Himalayan salt crystals and how insulin is what's making your butt so fat.

PhilCowan · Accepted Answer · 2021-08-29 17:25:42Z

0

Try this const background = require('../bluecardback.jpg').default;

or where you are using the jpg like

<img src={require('../bluecardback.jpg').default} />

edited Aug 29, 2021 at 17:25

answered Aug 29, 2021 at 17:19

PhilCowan

5335 silver badges13 bronze badges

1 Comment

user16644136 Over a year ago

unfortuntely the issue persists with this solution

Collectives™ on Stack Overflow

Can not import image in javascript . Module parse failed: Unexpected character '�' (1:0)

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related