How to fix You may need an appropriate loader to handle this file type in React

ERROR in ./src/styles.css
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.

# Check package.json for react-scripts
cat package.json | grep react-scripts

npm install --save-dev style-loader css-loader
# or for SCSS/SASS:
npm install --save-dev style-loader css-loader sass-loader sass

npm install --save-dev file-loader
# or for modern webpack (5+), use asset modules instead:
# no install needed, use in config instead

npm install --save-dev file-loader

npm install --save-dev ts-loader
# or typescript preset for babel-loader
npm install --save-dev @babel/preset-typescript

npm install --save-dev yaml-loader toml-loader

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  }
};

{
  test: /\.(png|jpg|jpeg|gif)$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[path][name].[ext]',
        outputPath: 'images/'
      }
    }
  ]
}

{
  test: /\.(png|jpg|jpeg|gif)$/,
  type: 'asset/resource'
}

{
  test: /\.(woff|woff2|eot|ttf|otf)$/,
  type: 'asset/resource'
  // or with file-loader:
  // use: ['file-loader']
}

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

npm install --save-dev @svgr/webpack

// In webpack config:
{
  test: /\.svg$/,
  use: ['@svgr/webpack']
}

// Then import as React component:
import { ReactComponent as Logo } from './logo.svg';

// CORRECT - loaders execute: css-loader → style-loader
{
  test: /\.css$/,
  use: ['style-loader', 'css-loader']
}

// WRONG - would try to apply style-loader before css-loader
{
  test: /\.css$/,
  use: ['css-loader', 'style-loader']  // Don't do this!
}

{
  test: /\.scss$/,
  use: [
    'style-loader',    // Step 3 (last)
    'css-loader',      // Step 2
    'sass-loader'      // Step 1 (first)
  ]
}

// CSS
import './styles.css';
import styles from './styles.module.css';

// Images
import logo from './logo.png';
import { ReactComponent as Icon } from './icon.svg';

// Fonts (via CSS)
@font-face {
  font-family: 'CustomFont';
  src: url('./fonts/custom-font.ttf');
}

// JSON
import config from './config.json';

// DON'T do this without proper loaders:
const css = require('./styles.css');  // Unless using css-loader
fetch('./data.json');  // Works but bypasses webpack bundling

import React from 'react';
import './App.css';  // Good
import logo from './logo.png';  // Good

export function App() {
  return (
    <div>
      <img src={logo} alt="Logo" />
    </div>
  );
}

# Stop the dev server if running (Ctrl+C)

# Clear build cache if it exists
rm -rf node_modules/.cache

# For projects using Create React App
npm start
# or
yarn start

# For custom webpack
npm run dev
# or if you have webpack-dev-server:
webpack serve

# For production build
npm run build