File-Loader not reading Image files-CodePudding

I am getting an issue where the file-loader does not read any image files. I tried adding png to file-loader in webpack.base.config to no avail. It doesn't read any format either. Also tried updated file-loader version, didn't fix it.

EDIT: Added webpack code below. I am using webpack version 5.51.1

EDIT: FIXED

Error:

TypeError: Cannot read property 'fileLoader' of undefined
rsm_app-node-1 at Object.module.exports (/app/node_modules/file-loader/index.js:13:28)

Webpack.base.config:

module.exports = (opts) => {
// ...
    module: {
      rules: [
        { test: /\.jsx?$/,
          exclude: /(node_modules)/,
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env',
              {
                "targets": {
                  "esmodules": true
                }
              }]
            ],
            plugins: [
              '@babel/plugin-proposal-class-properties',
              '@babel/plugin-transform-runtime'
            ]
          }
        },
        {
          test: /\.scss$/,
          use: [
            {
              // Adds CSS to the DOM by injecting a `<style>` tag
              loader: 'style-loader'
            },
            {
              // Interprets `@import` and `url()` like `import/require()` and will resolve them
              loader: 'css-loader'
            },
            {
              loader: 'sass-loader'
            },
            {
              // Loader for webpack to process CSS with PostCSS
              loader: 'postcss-loader',
              options: {
                plugins: function () {
                  return [
                    require('autoprefixer')
                  ];
                }
              }
            },
            {
              // Loads a SASS/SCSS file and compiles it to CSS
              loader: 'sass-loader'
            }
          ]
        },
        {
          test: /\.css$/, 
          use: [
            'style-loader',
            'css-loader'
          ]
        },
        {test: /\.(png|jpg|gif)$/, loader: 'url-loader', options: {limit: 8192}},  // inline base64 URLs <=8k
        {test: /\.(ttf|eot|svg|png)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader'},
      ], // add all common loaders here
    },

    resolve: {
      extensions: ['','.ts', '.js', '.jsx'],
      modules: [
        path.resolve(PROJECT_ROOT, 'rsm-app-react'),
        "node_modules",
      ],
    },
  };
};

Component:

import logo from '../data/logo.png';

return (
    <div className="ml-3 h-screen md:overflow-hidden overflow-auto md:hover:overflow-auto pb-10">
      {activeMenu && (
        <>
          <div className="flex justify-between items-center">
            <Link to="/" onClick={handleCloseSideBar} className="items-center gap-3 ml-3 mt-4 flex text-xl font-extrabold tracking-tight dark:text-white text-slate-900">
              { logo } <span >Test</span>
            </Link>

CodePudding user response：

if you webpack version less then 5，you should try yarn add -D file-loader and webpack rules, and then input that code import Img from 'xxx.jpg' at entry file

  module: {
    rules: [
      {
        test: /\.(png|svg|jpe?g|gif)$/i,
        use: {
        loader: 'file-loader',
      }
  }
]

}

CodePudding user response：

Assuming you're using Webpack 5, I recommend you use Asset Modules instead.

// Webpack.base.config

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        type: "asset", // replaces url-loader, default limit is 8kb
      },
      {
        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        type: "asset/resource", // replaces file-loader
      },
    ],
  },
};

Your JSX should then import the images and use them in <img> tags

import logo from "../data/logo.png";

// ...

<img src={logo} alt="Logo" />