Server-side rendering doesn't output sprites on the first request after starting the server

[ghost]

The first time I open a server rendered page, require('svg-sprite-loader/runtime/sprite.build') doesn't contain the individual SVG sprites (the symbols array is empty) but only the container (.stringify() outputs <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position: absolute; width: 0; height: 0" id="__SVG_SPRITE_NODE__"></svg>)

If I reload the page, the SVG symbols are there (filled array with all symbols).

Is this normal behaviour or am I doing something wrong?

I'm using: Node.js 9.5.0 webpack 3.11.0 svg-sprite-loader 3.6.2

express 4.16.2 Vue.js 2.5.13 (shouldn't matter)

on Windows 10 64bit

Part of my webpack config:

{
    test: /\.svg$/,
    loader: 'svg-sprite-loader'
}

express server.js:

app.get('*', (req, res) => {
    const sprite = require('svg-sprite-loader/runtime/sprite.build');
    console.log('sprite', sprite);
    console.log('sprite.stringify():', sprite.stringify());
    ...
});

I require the SVG files in a .vue file either with

<script>
import svg from '../svg/facebook.svg';
</script>

or requiring all SVG files in a directory:

const requireContext = require.context('../svg/', true, /\.svg$/);
requireContext.keys().forEach(key => requireContext(key));

[kisenka]

Could you please create repo with minimal setup to demonstrate a problem (package.json, webpack config, SVG image and piece of your code). If you don't want to create a repository - you can create a gist with multiple files.

[kisenka]

@diff-dennis ping

[ghost]

I prepared a repository here:

https://github.com/diff-dennis/svg-loader-test

After npm i you can start the project with npm run dev. The project should be available at http://localhost:4040

[kisenka]

@diff-dennis could you please explain what you want to archive? You want to render sprite on server or on client or both? In last case you can't use single sprite code in both environments, you'll need to generate separate bundles for node and browser.

[ghost]

@kisenka If it works to only render the sprite on server side, it would be sufficient I think - but I need both client and server if I understand correctly, otherwise I can not use the same code, right?

I don't know what to change now. Everything works, except on the first request the SVG isn't injected correctly on server side.

[Farhad33]

@kisenka @diff-dennis I have the same issue. I want to be able to render SVG on both client and server but it only renders on client. And also I have target: 'node' on server. Please let me know what other changes I need to make to make it render on server as well. Thank you.

[mopacha]

@kisenka I have the same issue, on the server side, svg does not inject into html

[tragid]

@kisenka Any updates on this issue? If is it possible to render SVG on both client and server side?

[IainAndrew]

Any updates? I'm following this example in a Next.js project and the sprite has no symbols in the SSR page.

[jmakelele]

Any updates ? I have the same issue.