SVG error when using nx with next-images

Current Behavior

SVG can not show properly when using nx with next-images

Expected Behavior

SVG shown

Steps to Reproduce

See: https://github.com/zhangciwu/nx-next-svg-error-repo Digest:

import compass from './compass.svg';

export function Index() {
  return (
    <div className={styles.page}>
      <h2>Error of SVG: the below svg can not show properly</h2>
      <img src={compass}/>
    </div>
  );
}

next.config.js:

const withImages = require('next-images');
const withPlugins = require('next-compose-plugins');

module.exports = withPlugins(
  [
    [
      withImages,
      {
        inlineImageLimit: 2048
      }
    ]
    // other plugins
  ],
  {}
);

Failure Logs

No log The svg file got wrapped in js in dist:

Environment

Mac catalina, node 12

Workaround

This workaround works, just looks kind of ugly

[kirjai]

We use nx since 9.x

right, that explains it then. yeah, the documentation sounds like the one you found already (link). Probably shouldn’t be in the “Deploying to Vercel” section, you’re right. It started out as a deployment-only thing, but has grown in usefulness since. I’ll make a note to address this 👍

[kirjai]

right, i see. so i don’t think there’s any other workaround other than the one you linked to.

for reference (i know you’re already aware of this, but worth mentioning for anyone else stumbling upon this). the reason for the issue is that in the webpack config we use, we use svgr to allow users to import SVGs as react components. That interferes with whatever next-images is trying to do. you can still use svgr and next-images side by side, with some workarounds i mentioned in the previous comment. but your request to be able to use next-images exclusively is definitely valid, as we don’t want to lock users into such decisions

Now, there’s no official / supported way to disable svgr as of right now. so, what we’re considering doing is allowing users to disable it via a new flag in withNx.

As a side note, I noticed that in your repro repo, you’re not using withNx, which we actually advise against. If you have specific reasons you’re not using withNx, we’d like to know them, so we can address and fix them

We’ll start working on this soon