I want to use the library with next.js but i got error only in building

[piesinopoli]

I want to use the library with Next.js but i got error only in building

The error is this:
unhandledRejection: ReferenceError: location is not defined
at eval (webpack-internal:///(ssr)/./node_modules/@hakit/core/dist/hakit-core.es.js:533:5)
at Xe (webpack-internal:///(ssr)/./node_modules/@hakit/core/dist/hakit-core.es.js:658:41)

It's like the library is using "location" and it's not possibile with Next.js instead of vanilla React

Do you know why and how i can fix it?

[shannonhochkins]

Hi, are you using the use-client directive? Without this, components are treated as server side components in next js

[piesinopoli]

Yes, I was using use 'use-client' in the file where I imported the library.

I found the bug. At the line 451 of the file @hakit-core I added the useEffect hook wrapping the the conditions that use "location" and the error disappear

The only thing now is that I edited the build file and I don't know how to force to use this file inside my project for example in Vercel that download the dependencies automatically. Maybe you can change the dist online ahaha

[shannonhochkins]

That's odd this hasn't come up until now, would you mind showing me from the source code what you changed and I'll release a new version for you? Little bit hard to see what you've changed from minified code :)

[piesinopoli]

Ok I found it, I think that you have to wrap this async function that use location inside a useEffect hook:

The file is the Provider inside HassConnect:

Wait for you

[shannonhochkins]

Thankyou, I'll take a look at it, although location being a global property on the window object, it should not need to be passed to the useCallback, additionally it checks if location exists before attempting to use it so I'm quite puzzled here, so you're sating for you if you put location in the useCallback dependencies it solved the problem for you?

[piesinopoli]

I don't know man, I can't try it with minified code because the error happens only when I build my app with next.js.

If you want you can build for me the builded package one that use useEffect and one with "location" in the dependencies on useCallback and I will tell you if the error still appears.

[shannonhochkins]

I'll get to it when I can and reply back on this thread, give me a day :)

[piesinopoli]

Perfect, thank you very much!

[shannonhochkins]

I believe you may have not imported HassConnect as a dynamic import, by default in nextjs all imports are rendered server side, if you import HassConnect dynamically, you'll see your error go away:

'use client';
import dynamic from 'next/dynamic';
const HassConnect = dynamic(
  () => import('@hakit/core').then(mod => mod.HassConnect),
  { ssr: false }  // This will load the HassConnect component only on the client-side
);

I'm no expert with nextjs at all, however I saw the same error when setting up a simple nextjs app, and after a quick google this is what i came up with and it all worked for me with my custom dashboard which has about 93 components rendering with no issues / errors.