title: Can not import image in javascript . Module parse failed: Unexpected character '�' (1:0)
body: <p>this error is occuring in my react application.</p>
  <p>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 <a href="https://webpack.js.org/concepts#loaders" rel="nofollow noreferrer">https://webpack.js.org/concepts#loaders</a>
  (Source code omitted for this binary file)</p>
  <p>webpack.config:</p>
  <pre><code>var webpack = require('webpack');
  var path = require('path');
  const HtmlWebpackPlugin = require(&quot;html-webpack-plugin&quot;);
  
  
  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: &quot;./src/index.html&quot;
      })
    ]
  }
  </code></pre>
  <p>package.json:</p>
  <pre><code>{
    &quot;name&quot;: &quot;react-client&quot;,
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;private&quot;: true,
    &quot;dependencies&quot;: {
      &quot;react&quot;: &quot;^16.9.0&quot;,
      &quot;react-dnd&quot;: &quot;^14.0.3&quot;,
      &quot;react-dnd-html5-backend&quot;: &quot;^14.0.1&quot;,
      &quot;react-dom&quot;: &quot;^16.9.0&quot;,
      &quot;react-scripts&quot;: &quot;^4.0.3&quot;,
      &quot;socket.io-client&quot;: &quot;^2.2.0&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@babel/cli&quot;: &quot;^7.5.5&quot;,
      &quot;@babel/core&quot;: &quot;^7.5.5&quot;,
      &quot;@babel/preset-env&quot;: &quot;^7.5.5&quot;,
      &quot;@babel/preset-react&quot;: &quot;^7.0.0&quot;,
      &quot;babel-loader&quot;: &quot;^8.0.6&quot;,
      &quot;babel-register&quot;: &quot;^6.26.0&quot;,
      &quot;css-loader&quot;: &quot;^3.6.0&quot;,
      &quot;file-loader&quot;: &quot;^4.3.0&quot;,
      &quot;html-webpack-plugin&quot;: &quot;^3.2.0&quot;,
      &quot;less&quot;: &quot;^3.10.3&quot;,
      &quot;less-loader&quot;: &quot;^5.0.0&quot;,
      &quot;style-loader&quot;: &quot;^1.3.0&quot;,
      &quot;url-loader&quot;: &quot;^2.3.0&quot;,
      &quot;webpack&quot;: &quot;^4.39.3&quot;,
      &quot;webpack-cli&quot;: &quot;^3.3.7&quot;,
      &quot;webpack-dev-server&quot;: &quot;^3.8.0&quot;
    },
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;webpack-dev-server --mode=development --port=4000 --inline --hot&quot;,
      &quot;build&quot;: &quot;webpack --mode=production&quot;
    }
  }
  </code></pre>
  <p>my import looks like this <code>import background from &quot;../bluecardback.jpg&quot;;</code></p>