Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Module parsing failure on 'ng build' for SVG files in "assets"

See original GitHub issue

🐞 Bug report

Command (mark with an `x`)

new
build
serve
test
e2e
generate
add
update
lint
extract-i18n
run
config
help
version
doc

Is this a regression?

Yes

Yes, the previous version in which this bug was not present was: ^11.0.0

Description

Build fails, the error message is misleading:

./node_modules/qms/core/assets/img/48x48/test.svg:1:0 - 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. 
See https://webpack.js.org/concepts#loaders
> <svg id="Image" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48">
|   <defs>
|     <linearGradient id="linear-gradient" x1="8.347" y1="12.268" x2="39.653" y2="43.573" gradientUnits="userSpaceOnUse">

🔥 Exception or Error

./node_modules/qms/core/assets/img/48x48/test.svg:1:0 - 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. 
See https://webpack.js.org/concepts#loaders
> <svg id="Image" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48">
|   <defs>
|     <linearGradient id="linear-gradient" x1="8.347" y1="12.268" x2="39.653" y2="43.573" gradientUnits="userSpaceOnUse">

🌍 Your Environment

Angular CLI: 12.0.1
Node: 14.17.0
Package Manager: npm 7.13.0
OS: win32 x64

Angular: 12.0.1
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.1
@angular-devkit/build-angular   12.0.1
@angular-devkit/core            12.0.1
@angular-devkit/schematics      12.0.1
@schematics/angular             12.0.1
ng-packagr                      12.0.0
rxjs                            6.6.7
typescript                      4.2.4

Issue Analytics

State:
Created 2 years ago
Comments:9 (1 by maintainers)

Top GitHub Comments

1reaction

ashvini-k123commented, May 26, 2021

@alan-agius4 : yes, require is there for each SVG.

If this is the root of the problem, then what is the solution? And also, why was this working in Angular 11?

0reactions

angular-automatic-lock-bot[bot]commented, Jun 26, 2021

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

Top Results From Across the Web

Module parsing failed while trying to use SVG as background

I use webpack to create the web app. Error: ERROR in ./src/components/Areas/ReportDisplay/button.svg 1:0 Module parse failed: Unexpected token ( ...

Assets loading with "require()" doesn't work anymore with v12

assets /img.svg:1:0 - Error: Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, ...

Angular CLI: Different ways to include assets - Łukasz Nojek

In this article I will discuss several methods of adding and referring to static files in an Angular CLI application – may they...

How To Use Custom SVG Icons in Angular Material

To use our custom unicorn icon with the <mat-icon> component tag, we'll need to import HttpClientModule . Open the app.module.ts file: nano src/ ......

Angular package format

Developers can rely on Angular CLI and ng-packagr (a build tool Angular CLI uses) to ... It declares the package to be in...