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

Read the full error message carefully. It will show the exact file path and line number causing the issue. Look for the file extension (.svg, .scss, .tsx, etc.) and note which import statement is failing.

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.
> <svg xmlns="http://www.w3.org/2000/svg">...
  at /project/src/components/Icon.svg:1:0

This tells you that a .svg file at the specified path is the problem.

Create a custom.d.ts or react-app-env.d.ts file at the root of your src directory with module declarations for asset types. This tells TypeScript how to handle non-code imports.

// src/custom.d.ts
declare module "*.svg" {
  const content: string;
  export default content;
}

declare module "*.png" {
  const content: string;
  export default content;
}

declare module "*.jpg" {
  const content: string;
  export default content;
}

declare module "*.module.css" {
  const classes: { [key: string]: string };
  export default classes;
}

Ensure this file is included in your tsconfig.json:

{
  "include": ["src/**/*", "src/custom.d.ts"]
}

Corrupted or mismatched package versions can cause loader configuration issues. Remove node_modules and the lock file, then reinstall.

rm -rf node_modules
rm package-lock.json  # or yarn.lock / pnpm-lock.yaml
npm install  # or yarn / pnpm install

If using Create React App, ensure you have a compatible version of react-scripts installed.

If you have a custom .babelrc or babel.config.js file, ensure it includes the React preset. This is critical for processing JSX syntax.

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-typescript"
  ]
}

If these presets are missing, install them:

npm install --save-dev @babel/preset-react @babel/preset-env

Create React App supports CSS out of the box but not SCSS/SASS. If you need to use .scss or .sass files, install the sass package:

npm install sass

Then rename your CSS files from .css to .scss and import them normally:

import "./styles.scss";

Create React App will automatically detect and use the sass loader.

If you ejected Create React App or are using a custom webpack config, ensure you have rules for all file types you are importing. Check your webpack.config.js:

module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-react", "@babel/preset-env"]
          }
        }
      },
      {
        test: /\.svg$/,
        type: "asset/resource"
      },
      {
        test: /\.(png|jpg|jpeg|gif)$/,
        type: "asset/resource"
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      }
    ]
  }
};

Ensure the test regex matches your file extensions, including both uppercase and lowercase variants if needed.

If you are using a monorepo (Lerna, Yarn workspaces, or pnpm workspaces), webpack may try to process files from linked packages. You may need to adjust the babel-loader include path or add symlinked packages to nohoist.

In your root package.json:

{
  "workspaces": {
    "packages": ["packages/*"],
    "nohoist": ["**/babel-loader", "**/react-scripts"]
  }
}

Or in a custom webpack config, explicitly include your workspace packages:

{
  test: /\.jsx?$/,
  include: [
    path.resolve(__dirname, "src"),
    path.resolve(__dirname, "../shared-components")
  ],
  use: "babel-loader"
}

Some webpack configurations use regex that only matches lowercase extensions. If you have files with uppercase extensions like .JSX or .TSX, either rename them to lowercase or update the webpack loader regex:

// BEFORE - only matches lowercase
{ test: /\.jsx?$/ }

// AFTER - matches both upper and lowercase
{ test: /\.[jJ][sS][xX]?$/ }

Renaming to lowercase is usually the better solution for consistency.