preprocessor error when querying from load function

Other houdini queries are working just fine, but when I try querying from inside the load function in SvelteKit it throws this error below.

Error: Looks like you don't have the preprocessor enabled.
    at Module.graphql (/$houdini/runtime/index.js:21:11)
    at eval (/Users/benj/projects/preview-app/src/routes/u/[sellerUsername].svelte:69:77)
    at Generator.next (<anonymous>)
    at eval (/Users/benj/projects/preview-app/src/routes/u/[sellerUsername].svelte:59:66)
    at new Promise (<anonymous>)
    at __awaiter (/Users/benj/projects/preview-app/src/routes/u/[sellerUsername].svelte:36:9)
    at load (/Users/benj/projects/preview-app/src/routes/u/[sellerUsername].svelte:65:28)
    at load_node (file:///Users/benj/projects/preview-app/node_modules/@sveltejs/kit/dist/ssr.js:864:30)
    at respond$1 (file:///Users/benj/projects/preview-app/node_modules/@sveltejs/kit/dist/ssr.js:1136:21)
    at async render_page (file:///Users/benj/projects/preview-app/node_modules/@sveltejs/kit/dist/ssr.js:1290:20)

My svelte.config.js file:

import preprocess from 'svelte-preprocess'
import houdini from 'houdini-preprocess'
import node from '@sveltejs/adapter-node'
import path from 'path'

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: [preprocess({ postcss: true }), houdini()],

  kit: {
    // hydrate the <div id="svelte"> element in src/app.html
    target: '#svelte',
    adapter: node(),
    vite: {
      resolve: {
        alias: {
          $houdini: path.resolve('.', '$houdini')
        }
      }
    }
  }
}

export default config

The load function (please let me know if I’m using this wrong):

<script lang="ts" context="module">
  import type { Load } from '@sveltejs/kit'
  import { query, graphql } from '$houdini'
  export const load: Load = async ({ page }) => {
    const username = page.params.sellerUsername
    try {
      const { data } = query(graphql`
        ... query data
      `)
      const seller = data.get_seller
      return {
        props: {
          seller
        }
      }
    } catch (err) {
      console.log(err)
      return {
        status: 400,
        error: new Error(err[0].message)
      }
    }
  }
</script>

[pixelmund]

This is not how Houdini works. Houdinis preprocessor automatically transforms your query into the load function. https://github.com/AlecAivazis/houdini#what-about-load

[AlecAivazis]

Hey @ledesmablt - sorry to hear you are running into some issues.

The query function isn’t meant to be inside of a load function as you have it. The preprocessor only looks inside of the instance scripts to replace the graphql tag. The idea is that you shouldn’t have to worry about defining your load function, and threading the value to your components props - the preprocessor takes care of that for you.

Can you give me some more information about what you’re trying to accomplish?