[ERROR] No loader is configured for ".svg" files

[frank acorn]

Hi there! I am currently rewriting my application (Nextjs. 15, Pages Router) to App Router. With this rewrite, a lot of directory structure changed and probably other things. However, I did not really touch the trigger tasks in terms of functionality.

When I try to start the trigger dev with npx [email protected] dev the build fails:

✘ [ERROR] No loader is configured for ".svg" files: assets/images/icons/warning.svg

    components/ui/Icon/Icon.tsx:62:20:
      62 │ import warning from '../../../assets/images/icons/warning.svg'

// ...

X Error: Failed to build
node:internal/process/promises:391
    triggerUncaughtException(err, true /* fromPromise */);
    ^

Error: Failed to build
    at bundleWorker 

// ...

This is true, I have some local .svg files which I am loading with svgr/webpack into the application. This should hover not bother trigger.dev, since I don't use the components that load these svgs inside the trigger tasks. This worked before, so I think that due to some indirect dependency, some of the utils I am importing in the tasks may import the components/ui/Icon/Icon.tsx file which causes trigger to try to build it.

**My question would be: **
Can I get trigger to ignore these imports? And maybe just return an empty string or something.
My guess would be to use a custom loader with esbuildPlugin or add all icons with additionalFiles.

[ionic veldt]

Hi @frank acorn. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

You are correct that Trigger.dev’s build process uses esbuild, and by default, it does not have a loader configured for .svg files. This results in the error you’re seeing when a file (even indirectly) imports an SVG.

How to resolve this:

1. Exclude problematic files from the build

If the SVG imports are only used in files that are not required by your Trigger.dev tasks, the best solution is to ensure that your task files (and their imports) do not reference files that import SVGs. However, as you mentioned, sometimes indirect imports can cause this issue.

2. Use a custom esbuild plugin to handle SVGs

You can use the esbuildPlugin build extension to add a custom esbuild plugin that tells esbuild how to handle .svg files. For example, you can configure it to return an empty string for any .svg import. Here’s how you can do it in your trigger.config.ts:

import { defineConfig } from "@trigger.dev/sdk/v3";
import { esbuildPlugin } from "@trigger.dev/build/extensions";

export default defineConfig({
  project: "<project ref>",
  build: {
    extensions: [
      esbuildPlugin({
        name: "ignore-svg",
        setup(build) {
          build.onLoad({ filter: /\.svg$/ }, async (args) => {
            return {
              contents: "export default ''",
              loader: "js",
            };
          });
        },
      }),
    ],
  },
});

This plugin will replace any .svg import with an empty string, which should resolve your build error. You do not need to add the SVG files with additionalFiles unless you actually need them at runtime in your Trigger.dev tasks, which does not seem to be the case here.

References:

• esbuildPlugin documentation
• Custom build extensions and plugins

If you continue to have issues, double-check your import paths and ensure that only the necessary code is included in your Trigger.dev tasks. If you need more advanced handling, you can further customize the esbuild plugin as needed.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@frank acorn Kapa.ai is still learning and improving, please let me know how I did by reacting below.

[frank acorn]

Thanks Mr. @ionic veldt 🫡 Solved the issue. Not sure if that's the best way, but solved 😛

[ionic veldt]

Let me check the knowledge base for you again. One moment! :books:

---

I'm glad to hear the issue is solved! Using a custom esbuild plugin via the esbuildPlugin extension to handle .svg files is a supported and flexible approach in Trigger.dev. This method is documented as a way to add custom loaders or plugins to the build process, allowing you to handle file types like SVGs that aren't supported out of the box. If your solution works and doesn't impact your task logic, it's a valid and recommended way to resolve such build issues in Trigger.dev projects esbuildPlugin documentation.

If you run into further build customization needs, you can always extend or adjust your build extensions as described in the docs. And if you ever need to revisit or optimize, the custom build extensions guide provides more details on advanced scenarios.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@frank acorn Kapa.ai is still learning and improving, please let me know how I did by reacting below.

[tiny sapphire]

@frank acorn you should try figure out why a component is being imported in to your background tasks. Somewhere there's an import chain that ends up with that file which you probably don't want.

Not a huge deal given you fixed the svg import, but it means your bundle will be larger than it needs to be

We use ESBuild which follows the imports from your tasks all the way

[frank acorn]

Thanks, yeah I thought about that too. Will try to find that import chain