Не могу заиспортить картинку png react webpack

Файл лоадеров

import type webpack from 'webpack';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import path from 'path';
import { type BuildOptions } from './types/config';

export function buildLoaders({ isDev }: BuildOptions): webpack.RuleSetRule[] {
    const svgLoader = {
        test: /\.svg$/,
        use: ['@svgr/webpack'],
    };

    const babelLoader = {
        test: /\.(js|jsx|tsx)$/,
        exclude: /node_modules/,
        use: {
            loader: 'babel-loader',
            options: {
                presets: ['@babel/preset-env'],
                plugins: [
                    [
                        'i18next-extract',
                        {
                            locales: ['ru', 'en'],
                            keyAsDefaultValue: true,
                        },
                    ],
                ],
            },
        },
    };

    const cssLoader = {
        test: /\.s[ac]ss$/i,
        use: [
            isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
            {
                loader: 'css-loader',
                options: {
                    modules: {
                        auto: (resPath: string) => Boolean(resPath.includes('.module.')),
                        localIdentName: isDev
                            ? '[path][name]__[local]--[hash:base64:5]'
                            : '[hash:base64:8]',
                    },
                },
            },
            'sass-loader',
        ],
    };

    const tsLoader = {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
    };

    const fileLoader = {
        test: /\.(png|svg|jpg|gif)$/,
        use: [{
            loader: 'file-loader',
            options: {
                name: (f: any) => {
                    const dirNameInsideAssets = path.relative(path.join(__dirname, 'src'), path.dirname(f));
                    return `${dirNameInsideAssets}/[name].[ext]`;
                },
            },
        }],
    };

    return [
        fileLoader,
        svgLoader,
        babelLoader,
        tsLoader,
        cssLoader,
    ];
}

Файл, где хочу картинку использовать

import React, { useState } from 'react';
import { Card } from 'shared/ui/Card/Card';
import { classNames } from 'shared/lib/classNames/classNames';
import { useTranslation } from 'react-i18next';
import { CustomInput } from 'shared/ui/CustomInput/CustomInput';
import { Logo } from 'shared/ui/Logo/Logo';
import { CustomButton } from 'shared/ui/Button/CustomButton';
import cls from './AuthorizationPage.module.scss';
import './dark.png';

const AuthorizationPage = () => {
    const { t } = useTranslation();
    const [login, setLogin] = useState('');
    const [password, setPassword] = useState('');

    return (
        <div className={classNames(cls.Authorization, {}, [])}>
            <div className={classNames(cls.AuthorizationContent, {}, [])}>
                <Card className={classNames(cls.authorizationCard, {}, [])}>
                    <Logo className={classNames(cls.logo, {}, [])} />
                    <CustomInput
                        formControlClassName={classNames(cls.customInput, {}, [])}
                        label="LOGIN"
                        required
                        value={login}
                        onChange={(event) => setLogin(event.target.value)}
                    />
                    <CustomInput
                        formControlClassName={classNames(cls.customInput, {}, [])}
                        label="PASS"
                        required
                        type="password"
                        value={password}
                        onChange={(event) => setPassword(event.target.value)}
                    />
                    <CustomButton
                        className={classNames(cls.signInButton, {}, [])}
                    >
                        Sign In
                    </CustomButton>
                </Card>
                <img src="dark.png" alt="" />
            </div>
        </div>
    );
};
export default AuthorizationPage;

Файл с картинкой для начала положил рядом с файлом, где хочу использовать бьет ошибку

ERROR in ./src/pages/AuthorizationPage/ui/AuthorizationPage.tsx 10:0-20
Module not found: Error: Can't resolve 'file-loader' in 'C:\Users\user\Desktop\work\JS\traidy_movements_ui_react'

Ответы (0 шт):