Angular 12 upgrade issue : You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file

Question

I have upgraded from Agular 11 to 12 getting below error for each SVG file.

Error: 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 file for example

  <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48">
        <linearGradient id="linear-gradient-searchquery" x1="-5.5" y1="41.5" x2="35" y2="1" gradientTransform="matrix(1, 0, 0, -1, 0, 48)" gradientUnits="userSpaceOnUse">
          <stop offset="0" stop-color="#fff"/>
          <stop offset="0.232" stop-color="#fafafa"/>
          <stop offset="0.496" stop-color="#ededed"/>
          <stop offset="0.775" stop-color="#d6d6d6"/>
          <stop offset="1" stop-color="#bebebe"/>
        </linearGradient>
        <linearGradient id="paper_gradient-searchquery" data-name="paper gradient" x1="19.25" y1="44.25" x2="32.25" y2="31.25" gradientTransform="matrix(1, 0, 0, -1, 0, 48)" gradientUnits="userSpaceOnUse">
          <stop offset="0" stop-color="#fff"/>
          <stop offset="0.221" stop-color="#f8f8f8"/>
          <stop offset="0.541" stop-color="#e5e5e5"/>
          <stop offset="0.92" stop-color="#c6c6c6"/>
          <stop offset="1" stop-color="#bebebe"/>
        </linearGradient>
        <linearGradient id="Dark_Blue_Grad_2" data-name="Dark Blue Grad 2" x1="20.172" y1="39.828" x2="23.172" y2="42.828" gradientUnits="userSpaceOnUse">
          <stop offset="0" stop-color="#74b3c7"/>
          <stop offset="0.177" stop-color="#6badc2"/>
          <stop offset="0.464" stop-color="#539db4"/>
          <stop offset="0.822" stop-color="#2d839d"/>
          <stop offset="1" stop-color="#177490"/>
        </linearGradient>
      <polygon points="22.5 0.5 0.5 0.5 0.5 46.5 35.5 46.5 35.5 13.5 22.5 0.5" stroke="#464646" stroke-miterlimit="10" fill="url(#linear-gradient-searchquery)"/>
      <polygon points="22.5 0.5 22.5 13.5 35.5 13.5 22.5 0.5" stroke="#464646" stroke-linejoin="round" fill="url(#paper_gradient-searchquery)"/>
      <rect x="5.5" y="37.5" width="25" height="4" fill="none" stroke="#464646" stroke-miterlimit="10"/>
      <rect x="5.5" y="30.5" width="25" height="4" fill="none" stroke="#464646" stroke-miterlimit="10"/>
      <rect x="5.5" y="23.5" width="25" height="4" fill="none" stroke="#464646" stroke-miterlimit="10"/>
      <rect x="5.5" y="16.5" width="25" height="4" fill="none" stroke="#464646" stroke-miterlimit="10"/>
      <path id="_Compound_Path_" data-name="&lt;Compound Path&gt;" d="M25.672,34.328l-9.586,9.586a2,2,0,0,0,0,2.829l.171.171a2,2,0,0,0,2.829,0l9.586-9.586" transform="translate(0)" stroke="#464646" stroke-miterlimit="10" fill="url(#Dark_Blue_Grad_2)"/>
      <circle cx="35.5" cy="27.5" r="12" fill="#f0f0f0" stroke="#464646" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>

Please help to solve.

Herrick

I have these same issues on PNG's and SVG's and maybe more. Also noticed that it's loading/parsing SCSS files that I do not even have an import statement to. Really weird changes they made. If I find an answer i'll let you know – Shellans

You are probably using 'require(path/to/svg)' it seems like require statements are no longer supported like this? You can setup a custom webpack configuration and then support these again by using a file copy thing. – Shellans

Answer 1

I had the same issue and after a couple of searches I just realize that this error is caused by a breaking change of Webpack 5 (bumped in Angular 12). In previous versions assets were loaded with loaders, now Assets Modules replace all those loaders doc

In my case: I changed the import for a new URL(path, import.meta.url) and solved the error

Sammysamoan

In my case, I had to change require('../assets/xxx.svg').default to new URL('../assets/xxx.svg', import.meta.url). – Trudge

clutch! This is the answer I've been looking for. – Lindsay

Will the referenced asset be copied to build root with hash as with require/import? – Mosemoseley

Yep, that's the reason I load the assets with the import: to add the asset with a hash and avoid adding as a simple asset. – Sammysamoan

@Sammysamoan i tried the same approach but ending up with CORS issue in local dev environment. Any idea about it ? – Lineage

Answer 2

I had same issue too then I fix my problem as below.

I have icons.js file and I was use it as below with Angular 11.

import Calendar from "../assets/icons/calendar.svg";
import Menu from "../assets/icons/menu.svg";
import User from "../assets/icons/user.svg";

export default {
    Calendar,
    Menu,
    User
};

After Angular 13 upgrade above usage gave me an error as in the question then I was change my usage as below base on @ebhh2001 suggestion.

const Calendar = new URL( "../assets/icons/calendar.svg", import.meta.url);
const Menu = new URL( "../assets/icons/menu.svg", import.meta.url);
const User = new URL( "../assets/icons/user.svg", import.meta.url);

export default {
    Calendar,
    Menu,
    User
};

Now it works fine.

Mullen

i tried the same approach but ending up with CORS issue in local dev environment. Any idea about it ? – Lineage

@Lineage I did not get any CORS issue with this usage, I have no idea about it now, if you can add your code example and CORS error with new question then we can check it out. – Offspring

I tried my best to reproduce the issue in Stackblitz but facing some set-up issues with Angular 13 on Stackblitz. If you have time please look into this stackblitz.com/edit/angular-13-template-kxdnra – Lineage