Cannot load SVG in React application

• I am running the latest version
• I checked the documentation and found no answer
• I checked to make sure that this issue has not already been filed
• I’m reporting the issue to the correct repository (not related to Angular, AngularCLI or any dependency)

Expected Behavior

Utilize an SVG file using the <svg> tag in a React application.

Current Behavior

The application fails to compile with nx serve.

Failure Information (for bugs)

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.

Steps to Reproduce

I personally discovered this when trying to use the Ionic React components in an Nx workspace, so will provide these steps to reproduce.

1. Generate a new Nx workspace with a default React application
2. yarn install @ionic/react
3. Wrap the contents of the default app.tsx JSX with <IonApp></IonApp>
4. nx serve

If you can provide steps to reproduce from scratch, that would be enormously appreciated (i.e. where the first step is npx create-nx-workspace@latest repro-workspace)

Context

Please provide any relevant information about your setup:

• Nx 8.6.0
• @ionic/react 4.10.0-rc.3

Failure Logs

ERROR in /Users/devinshoemaker/code/ionic/test-nx-ionic/node_modules/ionicons/dist/ionicons/svg/md-quote.svg 1:0
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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M96.4 416h77.1l50.9-96.6V96h-160v223.4h77.1L96.4 416zm224 0h77.1l50-96.6V96H288.4v223.4h82l-50 96.6z"/></svg>

ERROR in /Users/devinshoemaker/code/ionic/test-nx-ionic/node_modules/ionicons/dist/ionicons/svg/ios-school.svg 1:0
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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M96.9 270.3V363c0 2.9 1.5 5.5 4 7l132 75.9c5.3 3.1 12-.8 12-7v-93.8c0-2.9-1.5-5.5-4-7l-132-74.9c-5.4-2.9-12 1-12 7.1zM280.9 445.9L413 370c2.5-1.4 4-4.1 4-7v-93.7c0-6.2-6.6-10-12-7l-132 75.9c-2.5 1.4-4 4.1-4 7V439c-.1 6.1 6.6 10 11.9 6.9z"/><path d="M249 65.1L37 188.9c-5.4 3.1-5.4 10.8 0 13.9l212 117.8c4.9 2.8 11 2.8 15.9 0L453 212.9c5.3-3.1 7 .8 7 7v153.4c0 6.8 3.9 10 11 10 4.4 0 10-3.2 10-10V201.5c0-2.9-1.5-5.5-4-7L264.9 65.1c-4.9-2.8-11-2.8-15.9 0z"/></svg>

ERROR in /Users/devinshoemaker/code/ionic/test-nx-ionic/node_modules/ionicons/dist/ionicons/svg/md-arrow-round-down.svg 1:0
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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M99.4 284.9l134 138.1c5.8 6 13.7 9 22.4 9h.4c8.7 0 16.6-3 22.4-9l134-138.1c12.5-12 12.5-31.3 0-43.2-12.5-11.9-32.7-11.9-45.2 0l-79.4 83v-214c0-16.9-14.3-30.6-32-30.6-18 0-32 13.7-32 30.6v214l-79.4-83c-12.5-11.9-32.7-11.9-45.2 0s-12.5 31.2 0 43.2z"/></svg>

Other

I have found one other person that reported a similar issue, though it’s not Ionic specific. The solution proposed here involved overriding the default webpack config that Nx uses for it’s React applications, however that config did not work for me, and I am not adept enough with webpack yet to get this working. I have been inspecting the create-creact-app webpack.config.js (which is what Ionic uses in it’s generated projects) and will continue to try and get an override working, but this does seem like something that should be available out of the box. create-react-app applications are quite popular, so I imagine many people will eventually run into this issue when using React with Nx.

https://stackoverflow.com/questions/56848952/cannot-load-svg-in-nrwl-react-workspace

[puku0x]

@devinshoemaker I had the same problem during integrating Nx and @ionic/react and I solved it by using a custom webpack config.

• Install Ionic

$ npm i @ionic/react @ionic/react-router react-router-dom ionicons
$ npm i -D typescript@3.5

• Install additional loaders

$ npm i -D @svgr/webpack url-loader

• webpack.config.js

// @nrwl/react + SVG
const babelWebpackConfig = require('@nrwl/react/plugins/babel');

module.exports = config => {
  config.module.rules.push(
    {
      test: /\.svg$/,
      use: [
        '@svgr/webpack',
        'url-loader'
      ]
    }
  );
  return babelWebpackConfig(config);
};

• workspace.json

{
  "version": 1,
  "projects": {
    "client": {
      "root": "apps/client",
      "sourceRoot": "apps/client/src",
      "projectType": "application",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@nrwl/web:build",
          "options": {
            ...
            "webpackConfig": "./webpack.config.js"
          },

• polyfill.ts (not required in recent @ionic/react)

(window as any).process = {
  env: {}
};

[jaysoo]

No worries, we’ll make sure testing works well.