Error parsing input in convertFromString - next-images and nx svg processing issue

[danthedaniel]

Leaving a note here as this was very difficult to debug. If you're using nx and next-images together then an upgrade to nx 12 will break next-images because they (idiotically) decided to add in svgr by default. So if you were using next-images for SVGs nx is now going to try and process SVGs into react components, which will break your existing project.

I was combining next-images with react-inlinesvg and got this exact error. The solution isn't yet documented on nx.dev, but I figured it out by reading a bugfix PR's source code. You need to make use of withNx in next.config.js like so:

const withImages = require("next-images");
const withNx = require("@nrwl/next/plugins/with-nx");

module.exports = withImages(
  withNx({
    nx: {
      svgr: false,
    },
  })
);

I also needed to forcibly update @nrwl/cli to get builds to work. In the end, these are the relevant bits from package.json:

{
  "dependencies": {
    "next": "^10.2.3",
    "next-images": "^1.7.0",
    "nx": "12.3.6",
    "react-inlinesvg": "^2.3.0",
    "webpack": "4.46.0"
  },
  "devDependencies": {
    "@nrwl/cypress": "12.3.6",
    "@nrwl/eslint-plugin-nx": "12.3.6",
    "@nrwl/jest": "12.3.6",
    "@nrwl/nest": "12.3.6",
    "@nrwl/next": "12.3.6",
    "@nrwl/node": "12.3.6",
    "@nrwl/react": "12.3.6",
    "@nrwl/web": "12.3.6",
    "@nrwl/workspace": "12.3.6",
    "@nrwl/cli": "^12.3.6",
    "@nrwl/nx-cloud": "12.2.1"
  },
  "engines": {
    "node": ">=14.13.1 <15.0.0",
    "npm": ">=6.14.8 <7.0.0"
  }
}