How to fix You may need an appropriate loader to handle this file type, currently no loaders are config?

Question

JavaScript

It gives me this error three times, as I understand it, because of css files.

Error :
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

ERROR in ./src/components/view/news/news.css 1:0
Module parse failed: Unexpected token (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
> .
| display:flex;
| flex-direction: column;
@ ./src/components/view/news/news.ts 1:0-20
@ ./src/components/view/appView.ts 1:0-31 5:24-28
@ ./src/components/app/ app.ts 2:0-38 6:24-31
@ ./src/index.ts 1:0-39 3:14-17

ERROR in ./src/components/view/sources/sources.css 1:0
Module parse failed: Unexpected token (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
> .sources {
| display:flex;
| flex-wrap: wrap;
@ ./src/components/view/sources/sources.ts 1:0-23
@ ./src/components/view/appView.ts 2:0-40 6:27-34
@ ./src/components/app/app.ts 2:0-38 6:24-31
@ ./src/index.ts 1:0-39 3:14-17

ERROR in ./src/global.css 1 :5
Module parse failed: Unexpected token (1:5)
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
> body {
| color: #fff;
| background: #17181c;
@ ./src/index.ts 2:0-22

Webpack.config.js :

const path = require('path');
const { merge } = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const baseConfig = {
    entry: path.resolve(__dirname, './src/index.js'),
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
        ],
    },
    resolve: {
        extensions: ['.js'],
    },
    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, '../dist'),
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, './src/index.html'),
            filename: 'index.html',
        }),
        new CleanWebpackPlugin(),
    ],
};

module.exports = ({ mode }) => {
    const isProductionMode = mode === 'prod';
    const envConfig = isProductionMode ? require('./webpack.prod.config') : require('./webpack.dev.config');

    return merge(baseConfig, envConfig);
};

module.exports = {
    entry: './src/index.ts',
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          use: 'ts-loader',
          exclude: /node_modules/,
        },
      ],
    },
    resolve: {
      extensions: ['.ts', '.js'],
    },
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist'),
    },
  };

tsconfig.json :
{
"compilerOptions": {
"outDir": "./dist/",
"module": "es6",
"target": "es5",
"jsx": "react",
"allowJs": true ,
"moduleResolution": "node"
}
}

If you need anything else, I'll drop it.

Answer 1

Your last one module.exports =overwrites your previous configs