Search code examples
javascriptapache-kafkasveltesveltekit

How to import KafkaJS into a Svelte page?

I have tried importing my Kafka library inside page.svelte, and it has thrown an error saying it is not allowed to import Kafka inside the script.

<script>                                   
  import Table from "$lib/Table.svelte";   
  import {Kafka, logLevel} from 'kafkajs'; 

</script>

Later I found we can export the kafka producer by setting the kafka import in hooks.server.js. I imported the kafka library in hooks.server.js and added the producer in event.locals. Later exported it to my script tag of page.svelte.

  export let producer;

Still, the value of producer is undefined. Any leads on how to expose the imports from hooks.server.js to svelte.page could be much appreciated.

Solution

  • You can't do that at all, as the library is not meant for the browser and data transferred to the page has to be serialized which is impossible here.

    From the FAQ:

    Can KafkaJS be used in a browser?
    No - KafkaJS is a library for NodeJS and will not work in a browser context.

    Communication with Kafka happens over a TCP socket. The NodeJS API used to create that socket is net.connect/tls.connect. There is no equivalent API in browsers as of yet, which means that even if you run KafkaJS through a transpilation tool like Browserify, it cannot polyfill those modules.

    You could expose the functionality via custom API endpoints instead of trying to use it directly.

    How one would transfer locals otherwise:

    Locals are not exposed automatically, they are only available in server functions. One can pass locals from the server to the page e.g. in the top +layout.server.js load function:

    export const load = ({ locals }) => {
    return { value: locals.value };
};

    Data returned from this function is available to all pages using the layout via the data property.