SVGs are not rendered server-side

[wescopeland]

Details

SVG files are rendering on the client-side hydration, but not the server-side render. This results in a brief flicker of content popping onto the page, whereas it should just always be there starting from the first paint.

razzle.config.js

module.exports = {
  plugins: [
    'svg-react-component',
    {
      name: 'typescript',
      options: {
        forkTsChecker: {
          tsconfig: './tsconfig.json',
          tslint: './tslint.json',
          watch: './src',
          typeCheck: true
        }
      }
    }
  ]
};

React Component

import React from 'react';

import smGhostsDark from 'client/assets/svg/empty-ghosts-sm--dark.svg';

export const EmptyState = () => {
  return <img src={smGhostsDark} />;
};

[finmavis]

I don't quite understand, the purpose of this plugin to add extra feature inlining the SVG, What I understand with your code is that it is the default handling import SVG from Razzle.

To use this plugin you can update your code like below:

// From this (This is the default handling SVG from Razzle)
import smGhostsDark from 'client/assets/svg/empty-ghosts-sm--dark.svg';

export const EmptyState = () => {
  return <img src={smGhostsDark} />;
};

// To this
import { ReactComponent as SmGhostsDark } from 'client/assets/svg/empty-ghosts-sm--dark.svg';

function App () {
  return (
    <div>
      <SmGhostsDark />
    </div>
  )
}

I hope this helps!

[wescopeland]

You're right, I was misusing the plugin. Thanks so much for your detailed response :-)