Facing problem with Angular 12 upgrade: You might require a suitable loader to manage this type of file, as there are currently no configured loaders to handle it

After upgrading from Angular 11 to 12, I encountered the following error for each SVG file:

Error: Module parse failed: Unexpected token (1:0) An appropriate loader may be needed to handle this file type, as no loaders are currently configured to process it.

Here is an example of an SVG file:

<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>

I would greatly appreciate any assistance in resolving this issue.

Answer №1

After encountering a similar issue, I conducted multiple searches and eventually discovered that the error was due to a significant change in Webpack 5 (introduced in Angular 12). Instead of using loaders like in previous versions, assets are now handled by Assets Modules, as explained in this documentation

To resolve my specific case, I substituted the import with new URL(path, import.meta.url), which successfully eliminated the error

Answer №2

I faced the same issue, but I managed to solve it using the following approach.

In my project, I had a file named icons.js where I used it with Angular 11 like this:

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
};

However, after upgrading to Angular 13, I encountered an error with the above usage. Following the suggestion provided by @ebhh2001, I made the following changes:

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
};

And now everything is working perfectly fine.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What are some ways to enhance this TypeScript code using Functional Programming with the FP-TS library?

i am struggling to write some typescript code using fp-ts Below are the tasks that i want the algorithm to carry out: Once a path is received from the command line, it should check if the given path exists search for all files in the directory and locat ...

Having difficulty connecting web API service data to ng2-smart-table in Angular 2

Although I can fetch the data from my service, I am struggling to bind it to an ng2-smart-table for display in a grid view format. Table Component Code: table.component.ts @Component({ selector: 'ngx-table', templateUrl: './table.compo ...

The process of file transformation using es6-transform-karma-typescript can sometimes result in karma encountering an obstacle

I'm currently in the process of setting up a unit testing framework using typescript, karma, and mocha. I am utilizing karma-typescript for transpiling and es6-transform-karma-typescript to convert es6 code to browser-compatible es5 code. However, my ...

When running the ng test command, the error "TypeError: The 'compilation' argument must be an instance of Compilation" is generated, but the ng build command functions correctly

When attempting to execute unit tests using 'ng test libraryprojectname', I encounter the following error. Interestingly, ng build functions properly without any issues. The project in question is a workspace that includes an Angular library. Any ...

Webpack compatibility issue hindering big.js node module functionality

I'm currently working on compiling (typescript files) and bundling my source code using webpack. Below is the content of my webpack.config.js file: const path = require('path') module.exports = { devtool: 'eval-source-map', en ...

Tips on transferring component changes from one page to another

I have a select-option control that appears on multiple pages, so I created a single page to contain the select-option and then included that page in other pages. The issue I am facing is that when I use this component on page 1 and update the selected val ...

Issues arise when attempting to connect with mysql2 in typescript jest tests on macOS, where the connection

Having issues creating a mysql2 connection to a local MySQL database in a jest test on macOS using TypeScript. The call to connect() is getting stuck. Environment: MacOS: High Sierra (10.13.6) MySQL: 8.0.18 TypeScript: 3.7.2 mysql2: 2.0.1 Node.js: v10.1 ...

The compilation fails when using TestUtils findRenderedComponentWithType with a Component<Props> definition

Content of the file package.json: { "scripts": { "test": "tsc --project . --noEmit" }, "dependencies": { "@types/react": "^16.7.6", "@types/react-dom": "^16.0.9", "react": "^16.6.3", "react-dom": "^16.6.3", "typescript": "^3. ...

New Authentication: The sign-in feature will redirect to /api/auth/error

Currently implementing Google sign-in functionality on my Next.js 13 app using Next-auth. I have utilized the signIn() function as described in the documentation here. However, upon calling the signIn() function, I am unexpectedly redirected to http://loca ...

Tips for fixing the issue of 'expect(onClick).toHaveBeenCalled();' error

Having trouble testing the click on 2 subcomponents within my React component. Does anyone have a solution? <Container> <Checkbox data-testid='Checkbox' checked={checked} disabled={disabled} onClick={handl ...

Accessing the various types within a monorepo from a sibling directory located below the root folder

Seeking assistance in resolving a referencing types issue within a TypeScript monorepo project. Unsure if it is feasible given the current setup. The project structure is as follows: . ├── tsconfig.json ├── lib/ │ └── workers/ │ ...

Issues with loading Angular 4 Bootstrap JS post compiling

Utilizing normal bootstrap 3 within an Angular 4 application has been working well when compiling for development using ng serve. However, upon building the application with ng build, I encounter an issue where my bootstrap.js fails to load. Below are th ...

Function in Typescript that accepts an extended interface as a parameter

I am facing an issue with my interface named "Example" which has a function type called "exampleFunction". The problem arises when this function takes a super class as an input parameter because TypeScript is reporting an error. It states that I cannot use ...

Fulfill several promises and execute an HTTP request in Angular 2

At this moment, I am in need of retrieving two elements from my storage, each providing me with a promise. The challenge lies in using these promises to create an HTTP request in Angular 2. Despite numerous attempts, I have been unsuccessful in finding the ...

TypeScript is throwing an error because it is unable to recognize the identifiers such as WeakMap

Currently, I am in the process of learning Angular and have set up my TypeScript and Webpack configurations as follows: Here is my tsconfig file: { "compilerOptions": { "target": "es5", "module": "es2015", "moduleResolution": "node", "sourceMap": ...

A React component written in Typescript that can handle onChange events for both TextAreas and Input fields

I'm a beginner in typescript and am working on creating an input component. When the component receives type="text", it renders an input. Similarly, when it receives type="textarea", it renders a textarea. However, I am facing an issue with typescript ...

Encountered an Angular 9 error at core.js:6228, where a TypeError occurs when trying to read the property 'name' of an undefined

I'm currently working on developing a decentralized application (Dapp) with Angular 9 for the frontend. However, I've encountered an error that says: ERROR TypeError: Cannot read property 'name' of undefined. Here's a snippet of ...

How can data be accessed in an Angular 2 service the right way?

Currently, I have established a local instance of the service and am directly accessing data from it. I'm wondering if this approach is incorrect for a simple use case like sharing data between components. While trying to understand some fundamental n ...

Tips for binding data to numerous dynamic controls

Implementing reactive forms in my Angular project allowed me to create a simple form for adding employee work hours and breaks. The challenge I encountered was the inability to bind data from break controls. In the .ts file export class AddAppointmentForm ...

Understanding React and TypeScript Higher Order Components: How to Resolve the Type '{}' is not assignable to Type P Error

While following along with the Learning React with TypeScript book, I encountered a problem where I hit a wall while coding. Despite surrendering and copying code directly from the book, the compiler is still unhappy As a temporary solution, I have resort ...