Failed to compile --> svg?sprite

[lehnavid]

Hi Cyril,

thanks for the great package.
I followed the steps to import svgs and use them as components as described.
But i get the following error:

I expected that i can import my svg file from any location and use it as a react component.

Below you can find my setup. I used yarn for everything instead of npm.

For Example:

import SVGLogo from "components/atoms/Icon/svg/icon.svg?sprite";
const Logo = props => <SVGLogo {...props} />;

My package.json:

"next-compose-plugins": "^2.1.1",
"next-optimized-images": "^2.4.0",
"imagemin-svgo": "^7.0.0",
"svg-sprite-loader": "^4.1.3"

My next.config.js:

const path = require("path");
const withPlugins = require("next-compose-plugins");
const optimizedImages = require("next-optimized-images");

module.exports = withPlugins([
  optimizedImages,
  {
    webpack(config) {
      config.resolve.alias["components"] = path.join(
        __dirname,
        "src/components"
      );
      config.resolve.alias["containers"] = path.join(
        __dirname,
        "src/containers"
      );
      config.resolve.alias["helpers"] = path.join(__dirname, "src/helpers");
      config.resolve.alias["api"] = path.join(__dirname, "src/api");
      config.resolve.alias["store"] = path.join(__dirname, "src/store");
      config.resolve.alias["routes"] = path.join(__dirname, "src/routes");
      config.resolve.alias["config"] = path.join(__dirname, "src/config");
      config.resolve.alias["theme"] = path.join(__dirname, "src/theme");
      return config;
    }
  }
]);

The svg:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http:https://www.w3.org/2000/svg" xmlns:xlink="http:https://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 50.2 (55047) - http:https://www.bohemiancoding.com/sketch -->
    <title>checkmark_icon_yellow_16x16</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="checkmark_icon_yellow_16x16" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <path d="M4.42713499,14 C4.58635551,14 5.11377272,12.9303514 5.65183073,12.0857392 C6.18988874,11.241127 6.36004148,11.0812998 7.45024032,9.68415037 C8.54043915,8.2870009 9.91312561,6.86509848 10.5727949,6.15566296 C11.2324641,5.44622744 11.9442662,4.6606632 12.777217,3.90199133 C13.6101677,3.14331945 14.4401795,2.32140257 14.7217339,2.08679596 C15.0032882,1.85218935 15.7681535,1.25794974 15.9805153,1.0520364 C16.192877,0.846123065 14.6028586,1.31369365 14.4401795,1.37412704 C14.2775005,1.43456043 13.672807,1.66763038 13.0151744,2.08679596 C12.3575418,2.50596154 12.0047149,2.78625982 11.1562836,3.45057535 C10.3078524,4.11489087 9.38002723,4.97141877 8.21828419,6.15566296 C7.05654115,7.33990715 6.12186959,8.27217794 5.51055283,9.01063837 C4.89923608,9.7490988 4.61834264,10.2797941 4.42713499,10.2797941 C4.23592733,10.2797941 3.59268814,9.32926711 3.25545504,9.01063837 C2.91822194,8.69200964 2.4414883,8.35566069 1.80824018,8.27217794 C1.43656573,8.22317912 0.84577424,8.2623438 0.0358657135,8.38967198 L0.0358627677,8.38965324 C0.0132618708,8.39320639 -0.00217937452,8.41440844 0.00137378095,8.43700934 C0.00436327546,8.4560249 0.0200574201,8.47047572 0.0392545824,8.47188914 C0.880603107,8.87432406 1.22572926,9.14536677 1.42022458,9.31046185 C1.71196755,9.55810447 2.09175193,10.009021 2.40165647,10.448581 C2.71156101,10.888141 2.97486489,11.2928475 3.41587546,12.1752739 C3.85688603,13.0577003 4.26791446,14 4.42713499,14 Z" id="Path-179" fill="#000000"></path>
    </g>
</svg>

I also adjusted the _document.js and added:

const spriteContent = sprite.stringify();
...
return {
        ...initialProps,
        spriteContent,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        )
      };
...
<div dangerouslySetInnerHTML={{ __html: this.props.spriteContent }} />

[cyrilwanner]

Hi @lehnavid and sorry for the late response.

The problem is actually in your next.config.js file. You are defining the webpack config within the plugins array which overwrites the webpack config which next-optimized-images added. If you move this object out of the array and provide it as the second parameter to the withPlugins functions, it worked for me.

// next.config.js
module.exports = withPlugins([
  optimizedImages,
], {
  webpack(config) {
    config.resolve.alias["components"] = path.join(
      __dirname,
      "src/components"
    );
    config.resolve.alias["containers"] = path.join(
      __dirname,
      "src/containers"
    );
    config.resolve.alias["helpers"] = path.join(__dirname, "src/helpers");
    config.resolve.alias["api"] = path.join(__dirname, "src/api");
    config.resolve.alias["store"] = path.join(__dirname, "src/store");
    config.resolve.alias["routes"] = path.join(__dirname, "src/routes");
    config.resolve.alias["config"] = path.join(__dirname, "src/config");
    config.resolve.alias["theme"] = path.join(__dirname, "src/theme");
    return config;
  }
});

Does this also work in your project?