__vite_ssr_import_0__.template is not a function when using vite-plugin-ssr and solid

[dephiros]

Repro:

• Check out https://github.com/brillout/vite-plugin-ssr/tree/master/examples/solid
• Install vite-plugin-ssr according to instruction and try adding an icon to the index page

import IconAccountBox from '~icons/mdi/account-box'

• npm run dev

7:41:10 AM [vite] Error when evaluating SSR module ~icons/mdi/account-box:
TypeError: __vite_ssr_import_0__.template is not a function
    at ~icons/mdi/account-box:4:23
    at async instantiateModule 

@jfgodoy , do you know what could cause this?

[jfgodoy]

hi @dephiros,
the current implementation doesn't support ssr.
The good news is that I think I figured out how to achieve it.
I will send a PR soon

[dephiros]

hi @dephiros, the current implementation doesn't support ssr. The good news is that I think I figured out how to achieve it. I will send a PR soon

Thank @jfgodoy, the new implementation seems to be even smaller 😲

[jceb]

Since this change I get the following error message for duotone FontAwesome icons (integration see here: #12 (comment)). Non-duotone icons work fine:

[plugin:solid] /app/packages/ui/~icons/fap-duotone/truck-loading.tsx: Unexpected token, expected "}" (1:192)

> 1 | export default (props = {}) => <svg height="1.2em" width="1.2em" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 640 512"{...props}><defs><style>.fa-secondary{opacity:.4}</style></defs><path d="M247.8 123.8a16 16 0 0 0-19.6-11.3L151 133.3l24.8 92.7-61.8 16.5-24.8-92.7-77.3 20.7A16 16 0 0 0 .6 190.1l49.6 185.5a16 16 0 0 0 19.6 11.3l216.4-58a16 16 0 0 0 11.3-19.6zM544 320a96 96 0 1 0 96 96 96 96 0 0 0-96-96z" class="fa-secondary" fill="currentColor"/><path d="M384 0a32 32 0 0 0-32 32v323.6L5.9 450a8 8 0 0 0-5.6 9.8l12.6 46.3a8 8 0 0 0 9.8 5.6l393.7-107.4c0 .33 0 .66.05 1C421.91 339.7 477 288 544 288a127.71 127.71 0 0 1 96 43.44V0zM175.8 226L151 133.3l-61.8 16.5 24.8 92.7z" class="fa-primary" fill="currentColor"/></svg>
    |       
~icons/fap-duotone/truck-loading.tsx:1:192
    at Object._raise (/app/node_modules/@babel/parser/lib/index.js:510:17)
    at Object.raiseWithData (/app/node_modules/@babel/parser/lib/index.js:503:17)
    at Object.raise (/app/node_modules/@babel/parser/lib/index.js:464:17)
    at Object.unexpected (/app/node_modules/@babel/parser/lib/index.js:3368:16)
    at Object.expect (/app/node_modules/@babel/parser/lib/index.js:3342:28)
    at Object.jsxParseExpressionContainer (/app/node_modules/@babel/parser/lib/index.js:7114:10)
    at Object.jsxParseElementAt (/app/node_modules/@babel/parser/lib/index.js:7205:36)
    at Object.jsxParseElementAt (/app/node_modules/@babel/parser/lib/index.js:7190:32)
    at Object.jsxParseElementAt (/app/node_modules/@babel/parser/lib/index.js:7190:32)
    at Object.jsxParseElement (/app/node_modules/@babel/parser/lib/index.js:7248:17                                                                                                                                                                                           ^

This, i.e. the content of the <style> tag, breaks it: secondary{opacity:.4} as solid tries to interpret it.

[jceb]

Apparently the right solution (facebook/react#1545) is to escape { as {'{'} (sveltejs/svelte#1318).

[jceb]

Adding svg.replace(/([{}])/ig, "{'$1'}") before the props injecting works for me but it's a blunt method that might not work in all cases. @jfgodoy @dephiros what do you think?