Closed nosovk closed 3 years ago
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};`
);
};
I'm running into this problem and the workaround doesn't seem to be working.
@sdwvit thanks for the code.. its working but I see [Object, Object] before svgs rendered. Do you have this problem too?
@riez yes, the code for ssr is not ideal, since it's forcing ssr to render null. But it is easily patchable.
@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.
@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
Same issue svg file did not start with <svg> tag. Unable to convert to Svelte component
.
Any updates?
fix is merged, but not published. You may refer to master branch in yours package.json to get it to work now.
@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?
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
Problem that plugin receives not SVG file contents, but url encoded version. Adding logging of 'source' here gives next output