CODEWITHSUNDEEP
angulartypescripttypescript-genericswebpack-5angular12
Ashvini
Ashvini

Reputation: 81

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

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.

Upvotes: 8

Views: 8896

Answers (2)

Samet &#199;ELİKBI&#199;AK
Samet &#199;ELİKBI&#199;AK

Reputation: 1073

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.

Upvotes: 3

noga
noga

Reputation: 214

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

Upvotes: 7

Related Questions