nx: Cannot load SVG in React application

@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: {}
};

Some of the solutions I found were adding a custom.d.ts file in the root of the project and including:

declare module '*.svg' {
	const content: string;
	export default content;
}

And/or using a custom webpack config with a loader for svg’s etc.

There a few solutions floating around that seem to be working for others, but nothing worked for me. I’ll be keeping an eye on this issue since I’d prefer to be able to import them directly.

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

@puku0x I figured out the issue with mine. They applied the change only to the react application with their build chain. Next.js needs these steps:

Add this to your project’s tsconfig.json

+ "files": [
+    "../../node_modules/@nrwl/react/typings/image.d.ts"
+  ],

Add this to your project’s jest.config.js in the transform object.

+ '^(?!.*\\\\.(js|jsx|ts|tsx|css|json)$)': '@nrwl/react/plugins/jest'

Add this to your project’s next.config.js

+ webpack: config => {
+    // Converts SVG files into React components.
+    config.module.rules.push({
+      test: /\.svg$/,
+      issuer: {
+        test: /\.[jt]sx?$/
+      },
+      use: ['@svgr/webpack?-svgo,+titleProp,+ref![path]', 'url-loader']
+    });
+
+    return config
+  }

Install @svgr/webpack and url-loader to your devDependencies.

Everything is working for me now!

@Krasnopir Does this work for you?

const getWebpackConfig = require('@nrwl/react/plugins/webpack');

function getCustomWebpackConfig(webpackConfig) {
  const config = getWebpackConfig(webpackConfig);

  // SVG fix
  const index = config.module.rules.findIndex(rule => rule.test.test('.svg'));
  config.module.rules.splice(index, 1, {
    test: /\.svg$/,
    //issuer: {
    //  test: /\.[jt]sx?$/
    //},
    use: [
      {
        loader: 'svg-sprite-loader',
        options: {
          symbolId: '[name]'
        }
      },
      'svgo-loader'
    ]
  });

  return config;
}

module.exports = getCustomWebpackConfig;

great. it work!!! much thanks!

I’ve opened a PR, but there is one thing I want to potentially tackle before it goes out.

Closing this issue. If there are further use cases that aren’t addressed please open a new issue. 😃

Sounds good. We’ll have this in the next release.

Hmmm @puku0x I wasn’t able to get it working using that webpack config…

@jaysoo Is there documentation around what needs updated or a way to update the apps with the required config? When I run nx serve nextjs-app it gives me this error message:

ModuleParseError: 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 24 24"><title>icn</title><path d="M18,13H13v5a1,1,0,0,1-2,0V13H6a1,1,0,0,1,0-2h5V6a1,1,0,0,1,2,0v5h5a1,1,0,0,1,0,2Z"/></svg>
    at handleParseError (/project/node_modules/webpack/lib/NormalModule.js:469:19)
    at /project/node_modules/webpack/lib/NormalModule.js:503:5
    at /project/node_modules/webpack/lib/NormalModule.js:358:12
    at /project/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/project/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at /project/node_modules/loader-runner/lib/LoaderRunner.js:205:4
    at /project/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:85:15
    at processTicksAndRejections (internal/process/task_queues.js:75:11)

@puku0x Hmm, the build already replaces process.env.NODE_ENV with production or development, but looks like ionic is looking for process.env which we don’t substitute. This can be fixed as well. 😃

@puku0x We need to update this for Next.js apps as well since it’s managed by a different loader. Should track it separately here #2350.

The issuer is supposed to to prevent SVG imports within CSS files from being processed. Are your imports from .jsx and .tsx files?

Just wanted to link the PR to this issue for easier tracking #1964

+1

In addition, as mentioned in Jest Docs, a file mock is needed to run tests.

// jest.config.js
module.exports = {
  testMatch: ['**/+(*.)+(spec|test).+(ts|js)?(x)'],
  transform: {
    '^.+\\.(ts|js|html)$': 'ts-jest',
  },
  resolver: '@nrwl/jest/plugins/resolver',
  moduleFileExtensions: ['ts', 'js', 'html'],
  coverageReporters: ['html'],
  passWithNoTests: true,
  moduleNameMapper: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '<rootDir>/src/app/__mocks__/fileMock.js',
  },
};

// apps/client/src/app/__mocks__/fileMock.js
module.exports = 'test-file-stub';

@puku0x Thanks! This worked for me without the polyfill.ts (but i’m not using ionic, so maybe thats it)

I tried a couple of different webpack.config.js variations, but no worked. Thanks for yours, works like a charm!