Error using the "files" images scheme and importing SVGs

Issues
1

I have error when using “files” images scheme and importing .svg files.

  "images": {
    "scheme": "files"
  },

Error:

info  - Collecting page data
[    ] info  - Generating static pages (4/5)

Error occurred prerendering page "/". Read more: <https://nextjs.org/docs/messages/prerender-error>
TypeError: e.endsWith is not a function
    at z (C:\my-repo\.yarn\__virtual__\@plasmicapp-react-web-virtual-904504d294\0\cache\@plasmicapp-react-web-npm-0.2.87-1e52a2725b-cba79805fd.zip\node_modules\@plasmicapp\react-
web\dist\react-web.cjs.production.min.js:1:9819)
    at Object.render (C:\my-repo\.yarn\__virtual__\@plasmicapp-react-web-virtual-904504d294\0\cache\@plasmicapp-react-web-npm-0.2.87-1e52a2725b-cba79805fd.zip\node_modules\@plasm
icapp\react-web\dist\react-web.cjs.production.min.js:1:7356)
    at a.b.render (C:\my-repo\.yarn\__virtual__\react-dom-virtual-3a31e1b2df\0\cache\react-dom-npm-17.0.2-f551215af1-1c1eaa3bca.zip\node_modules\react-dom\cjs\[react-dom-server.no](http://react-dom-server.no)
de.production.min.js:43:194)
    at a.b.read (C:\my-repo\.yarn\__virtual__\react-dom-virtual-3a31e1b2df\0\cache\react-dom-npm-17.0.2-f551215af1-1c1eaa3bca.zip\node_modules\react-dom\cjs\react-dom-server.node
.production.min.js:41:83)
    at Object.exports.renderToString (C:\my-repo\.yarn\__virtual__\react-dom-virtual-3a31e1b2df\0\cache\react-dom-npm-17.0.2-f551215af1-1c1eaa3bca.zip\node_modules\react-dom\cjs\
react-dom-server.node.production.min.js:52:138)
    at Object.renderPage (C:\my-repo\.yarn\__virtual__\next-virtual-8154ba2a65\0\cache\next-npm-12.0.0-9043ea06b2-ad8a60c46f.zip\node_modules\next\dist\server\render.js:607:45)
    at Object.defaultGetInitialProps (C:\my-repo\.yarn\__virtual__\next-virtual-8154ba2a65\0\cache\next-npm-12.0.0-9043ea06b2-ad8a60c46f.zip\node_modules\next\dist\server\render.
js:288:51)
    at Function.getInitialProps (C:\my-repo\packages\website\.next\server\chunks\54.js:497:20)
    at Object.loadGetInitialProps (C:\my-repo\.yarn\__virtual__\next-virtual-8154ba2a65\0\cache\next-npm-12.0.0-9043ea06b2-ad8a60c46f.zip\node_modules\next\dist\shared\lib\utils.
js:69:29)
    at renderDocument (C:\my-repo\.yarn\__virtual__\next-virtual-8154ba2a65\0\cache\next-npm-12.0.0-9043ea06b2-ad8a60c46f.zip\node_modules\next\dist\server\render.js:620:48)

I’ve found that lines:

  1. Check for .svg extension - https://github.com/plasmicapp/plasmic/blob/3353474f8ed86eb1152ac8fd3ed5e2f58d10f30c/packages/react-web/src/render/PlasmicImg/index.tsx#L366-L368
  2. Call place - https://github.com/plasmicapp/plasmic/blob/3353474f8ed86eb1152ac8fd3ed5e2f58d10f30c/packages/react-web/src/render/PlasmicImg/index.tsx#L156
    srcStr in that place equals:
{
  src: '/_next/static/media/logo.56dsf762.svg',
  height: 160,
  width: 740
}

I think it’s because webpack gives you not just only string but object.

2

Temporarily solved this by editing “components/plasmic/project/PlasmicHomepage.tsx” and adding “.src” after image variables (logoUzfdef6f.src):

                <<p.PlasmicImg
  alt={"logo" as const}
  className={classNames(sty.img___2Gx)}
  displayHeight={"45px" as const}
  displayMaxHeight={"none" as const}
  displayMaxWidth={"none" as const}
  displayMinHeight={"0" as const}
  displayMinWidth={"0" as const}
  displayWidth={"200px" as const}
  src={{
    src: logoUzfdef6f.src,
    fullWidth: 300,
    fullHeight: 67,
    aspectRatio: 4.46685,
  }}
/>

This problem occurs for all images: svg, jpeg, png.

3

ty! we’re looking into this

4

oh! yeah nextjs has special webpack loaders when importing images. That’s why we usually recommend using either image.scheme: "public-files" , or since you’re using PlasmicImg, image.scheme: "cdn"