No loader is configured for ".svg" files

[Jackardios]

What version of Remix are you using?

0.0.0-nightly-6e23fcf-20230505

Are all your remix dependencies & dev-dependencies using the same version?

• Yes

Steps to Reproduce

1. Import any svg file in route
2. Get the error No loader is configured for ".svg" files

Expected Behavior

svg should import without error

Actual Behavior

when importing svg there is an error: "No loader is configured for ".svg" files"

[pcattori]

@Jackardios was this working for you on stable versions of Remix? (i.e. 1.15 or 1.16?)

Could you share where your SVG file is located (public/? within app/?) and how you import and use it?

[Jackardios]

@pcattori it works in 1.16.0, the problem only occurs in 0.0.0-nightly-6e23fcf-20230505

Svg file is located within app/
The file where the error occurs looks like this (@/* is alias for app/*):

import * as React from "react";

import logoImage from "@/modules/common/assets/images/logo.svg";
import { Image } from "@/modules/design-system/components/Image";

export interface LogoProps
  extends Omit<React.ComponentPropsWithoutRef<"img">, "src"> {}

export const Logo: React.FC<LogoProps> = ({
  width = 158,
  height = 34,
  ...otherProps
}) => {
  return (
    <Image
      src={logoImage}
      width={width}
      height={height}
      {...otherProps}
    />
  );
};

[pcattori]

Does the error happen when running remix build or also with dev server? (and do you have unstable_dev enabled?)

[lauritzsh]

I'm also experiencing this on 0.0.0-nightly-c7ad951-20230508. Worked fine on stable. Only experiencing this when running with unstable_dev. My .svg is also located inside app/.

[pcattori]

Cannot reproduce. The following works for me on:

• 0.0.0-nightly-c7ad951-20230508 ✅
• 0.0.0-nightly-9de3c4b-20230515 ✅

import type { V2_MetaFunction } from "@remix-run/node";
import svg from "~/SVG_Logo.svg";

export const meta: V2_MetaFunction = () => {
  return [{ title: "New Remix App" }];
};

export default function Index() {
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
      <h1>Welcome to Remix</h1>
      <img src={svg} height={64} width={64} />
    </div>
  );
}

---

If anyone can post a full reproduction, I can look into it.

Note that using svgs as component is not supported out-of-the-box in Remix.

[dmarkow]

@pcattori As mentioned on discord, getting the exact same issue but with PNG files. Tried making a repro loading the same PNG file from the same relative path, and of course it's not breaking there, even copying over my exact same package.json and remix.config.js files. I'll need to try some other options for reproducing it.

It does seem to only happen running remix dev. remix build completes without any problems. So it may be somehow related to the dev server/HMR code.

[pcattori]

@dmarkow does the issue only happen with unstable_dev or also the old dev server?

[pcattori]

Ah ok I was able to reproduce! Issue happens when a route with a loader has loader changes and has .svg, .png, or any other non-standard JS imports. This is caused by the loader change compilation used for HDR not using the loaders we've defined for Remix.

import svg from "~/SVG_Logo.svg";

// uncommenting this loader while `remix dev` (unstable_dev: true) is running causes the issue
//export let loader = () => {
//  return { hello: "there" };
//};

export default function Index() {
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
      <h1>Welcome to Remix</h1>
      <img src={svg} />
    </div>
  );
}

---

^So this will fix things when unstable_dev is enabled. If anyone is experiencing this issue with the old dev server, feel free to reopen.

[github-actions]

🤖 Hello there,

We just published version v0.0.0-nightly-360e77e-20230516 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions]

🤖 Hello there,

We just published version 1.16.1-pre.0 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions]

🤖 Hello there,

We just published version 1.16.1 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!