Sveltekit Auth failing on build and preview
Hi,
I have set up authentication using the guide and when I npm run dev I have no issues. However as soon as I npm run build or npm run preview everything builds but when I go to click logon rather than a reconnect I get a 500 server error with a console log saying process is not defined in the kinde-typescript-sdk.
I have narrowed it down to being the handleAuth(requestEvents) function in the kindeAuth nested folder however I'm not sure whats causing this and if its a bug or something I caused.
Would anyone be able to help with this 😀
I've included so pictures to hopefully better explain what I mean.
Thanks
3 Replies
Hi,
Thank you for reaching out to us!
Could you try using sessionStorage.getItem() instead of sessionManager.getSessionItem() and see if that works?
If you encounter any issues or need further clarification, please don’t hesitate to let us know. We’re here to help!
Hi Zaki,
Thanks for the response.
I'm not sure where I use sessionManager.getSessionItem() in this example in order to change it.
Sorry if I'm missing something obvious
Hi @itsmexd
Thank you for reaching out and providing detailed information about the issue you're encountering. The error message "
process is not defined" typically occurs in Vite-based projects, like SvelteKit, because the process object is a Node.js global that's not available in the browser environment. This discrepancy often doesn't surface during development (npm run dev) but becomes apparent during build or preview stages.
To address this issue, you can modify your Vite configuration to define the process object for the browser environment. Here's how you can do it:
In your vite.config.js or vite.config.ts file, import the defineConfig function from Vite and add a define property to simulate the process object in the browser:
// vite.config.js import { defineConfig } from 'vite'; import { sveltekit } from '@sveltejs/kit/vite'; export default defineConfig({ plugins: [sveltekit()], define: { 'process.env': {} } });This configuration tells Vite to replace occurrences of process.env with an empty object, preventing the runtime error in the browser. In Vite, environment variables should be accessed using import.meta.env instead of process.env. Ensure that any environment variables you intend to use in your client-side code are prefixed with VITE and accessed accordingly:
// Accessing an environment variable const apiUrl = import.meta.env.VITE_API_URL;This approach aligns with Vite's handling of environment variables and avoids issues related to undefined process objects. Implement the above changes in your project. Run npm run build and npm run preview to test if the issue is resolved. Please let me know how it goes. If you continue to experience issues, I'll escalate this to our team for further assistance