Problems with latest svelte release

[nosovk]

On a latest sapper\rollup got strange error: [!] (plugin svg) Error: svg file did not start with <svg> tag. Unable to convert to Svelte component

For example I created svg from one element

<svg width="16px" height="16px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
    <g><circle  cx="7" cy="7" r="7"></circle> </g>
</svg>

Problem that plugin receives not SVG file contents, but url encoded version. Adding logging of 'source' here gives next output

 export default "data:image/svg+xml,%3Csvg%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%20%20%20%3Cg%3E%3Ccircle%20%20cx%3D%227%22%20cy%3D%227%22%20r%3D%227%22%3E%3C%2Fcircle%3E%20%3C%2Fg%3E%3C%2Fsvg%3E"

[sdwvit]

workaround using @nosovk approach: .+ support for SSR in sapper:

rollup.config.js

import svelteSVG from "rollup-plugin-svelte-svg";
import { extname } from "path";
import { createFilter } from "@rollup/pluginutils";
const svgPlugin = svelteSVG({ dev });
const origSvgPluginTransform = svgPlugin.transform;
const filter = createFilter();
svgPlugin.transform = (source, id) => {
  if (!filter(id) || extname(id) !== ".svg") {
    return null;
  }
  source = decodeURIComponent(source).replace('</svg>"', "</svg>");
  const transformed = origSvgPluginTransform(source, id).code;
  const className = transformed.match("export default (.*);")[1];
  return transformed.replace(
    `export default ${className};`,
    `${className}.$$$render = () => '';\n 
    export default ${className};`
  );
};

[MTyson]

I'm running into this problem and the workaround doesn't seem to be working.

[riez]

@sdwvit thanks for the code.. its working but I see [Object, Object] before svgs rendered. Do you have this problem too?

[sdwvit]

@riez yes, the code for ssr is not ideal, since it's forcing ssr to render null. But it is easily patchable.

[riez]

@sdwvit I see .. how do you done that? Currently I change the object to an empty string. But I don't know if this is a good way to achieve that. If u have any reference that i can read would be nice. I have knowledge limitation on this part.

[sdwvit]

@riez You can replace this line

`${className}.$$$render = () => ({ html: null, head: null, css: null });\n 

with

`${className}.$$$render = () => "";\n 

to get SSR render an empty string, but it is not ideal as well. I tried replacing "" with

[tyryshkinm]

Same issue svg file did not start with <svg> tag. Unable to convert to Svelte component. Any updates?

[nosovk]

fix is merged, but not published. You may refer to master branch in yours package.json to get it to work now.

[mattiaz9]

@nosovk I'm getting this error by referring the master branch: SyntaxError: Cannot use import statement outside a module

When should we expect the new release to be published?