Error parsing svelte:head

[georgecrawford]

I'm struggling to get houdini generate to work on my codebase. Hitting lots of errors without any clue which file they come from. I'm not sure if the problem is from svelte or houdini. For example:

route.svelte

<script>
    export let scriptPath = '/blah';
</script>

<svelte:head>
    <script src={scriptPath}></script>
</svelte:head>

output:

$ npm run generate

> [email protected] generate /Users/george/client/sveltekit
> houdini generate

SyntaxError: Unexpected token s in JSON at position 1
    at JSON.parse (<anonymous>)
    at file:///Users/george/client/sveltekit/node_modules/houdini/build/cmd.js:15129:31
    at Array.map (<anonymous>)
    at findAttributes (file:///Users/george/client/sveltekit/node_modules/houdini/build/cmd.js:15121:14)
    at parseFile (file:///Users/george/client/sveltekit/node_modules/houdini/build/cmd.js:15063:29)
    at file:///Users/george/client/sveltekit/node_modules/houdini/build/cmd.js:59191:54
    at step (file:///Users/george/client/sveltekit/node_modules/houdini/build/cmd.js:124:23)
    at Object.next (file:///Users/george/client/sveltekit/node_modules/houdini/build/cmd.js:105:53)
    at fulfilled (file:///Users/george/client/sveltekit/node_modules/houdini/build/cmd.js:95:58)

Putting in some logging in the top stacktrace location, I see that it's trying to run JSON.parse('{scriptPath}'), which was never going to work.

This same code works fine in Sveltekit, so I don't know where things have gone wrong.

[georgecrawford]

Aah, so the stacktrace points to this file: https://github.com/AlecAivazis/houdini/blob/3b05b9b032bf66471975e9d1455f586ee07a141d/packages/houdini-common/src/parse.ts. I see that houdini's finding all <script> blocks (in .svelte files, presumably), and parsing their attributes and contents. However, it should presumably not run the same routine for <script> tags within HTML blocks, as these aren't the same thing. I'm afraid I don't know the fine details of how Svelte works with this, nor why Sveltekit doesn't blow up like Houdini does.

[georgecrawford]

Reference: sveltejs/svelte#335

[georgecrawford]

I guess I need to know why Houdini uses its own parser. Is there no way of sharing a parser with Svelte, or at least doing it in the same way?

[georgecrawford]

FWIW, it's not specific to svelte:head, as this also fails in the same way:

<script>
    export let scriptPath = '/blah';
</script>

<pants>
    <script src={scriptPath}></script>
</pants>

It's just that we should ignore any script tag which is nested in a HTML element.

[AlecAivazis]

Hey @georgecrawford - thanks for opening this. I tried at first to use the native svelte parser but because it only parses typescript through its plugins, i was running into a lot of hair pulling to get things wired up correctly. If we can find a way to use svelte's parser, i would prefer it.

I think a quick solution (maybe even the right one?) is to only consider script tags that are at the root of the file.