Polak Posts - Answer Overflow

Polak

•Created by Polak on 2/26/2025 in #❓・help

Hydration Error

Hello Nuxt Gang. I have run into some trouble. I have a project I am trying to work on and I have been experiencing hydration errors recently. This is the error I am getting:

500
null is not an object (evaluating 'currentRenderingInstance.ce')
_sfc_render@https://domain.com.test:3000/_nuxt/layouts/auth.js:23:16
renderComponentRoot@https://domain.com.test:3000/_nuxt/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:6521:20
hydrateSubTree@https://domain.com.test:3000/_nuxt/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5309:51
componentUpdateFn@https://domain.com.test:3000/_nuxt/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5334:27
run@https://domain.com.test:3000/_nuxt/node_modules/.pnpm/@[email protected]/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:198:21
setupRenderEffect@https://domain.com.test:3000/_nuxt/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5478:11
mountComponent@https://domain.com.test:3000/_nuxt/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5253:24
........

500
null is not an object (evaluating 'currentRenderingInstance.ce')
_sfc_render@https://domain.com.test:3000/_nuxt/layouts/auth.js:23:16
renderComponentRoot@https://domain.com.test:3000/_nuxt/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:6521:20
hydrateSubTree@https://domain.com.test:3000/_nuxt/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5309:51
componentUpdateFn@https://domain.com.test:3000/_nuxt/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5334:27
run@https://domain.com.test:3000/_nuxt/node_modules/.pnpm/@[email protected]/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:198:21
setupRenderEffect@https://domain.com.test:3000/_nuxt/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5478:11
mountComponent@https://domain.com.test:3000/_nuxt/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5253:24
........

I cant seem to understand whats going on. For what I understand, it is an error in my auth js layout? But whats wrong here?

<template>
    <main class="dark auth__layout">
        <slot />
    </main>
</template>

<template>
    <main class="dark auth__layout">
        <slot />
    </main>
</template>

30 replies

NNuxt

•Created by Polak on 2/21/2025 in #❓・help

unable to verify the first certificate

Hi Nuxt community! I recently got a new laptop and I'm trying to create a new project on it. I am running Nuxt as a frontend and Laravel as backend. I cloned the project down from github and imported the SSL key and certificate from the old laptop but they were not accepted. So I created a new certificate and key using:

openssl genrsa 2048 > server.key
chmod 400 server.key
openssl req -new -x509 -nodes -sha256 -days 365 -key server.key -out server.crt

openssl genrsa 2048 > server.key
chmod 400 server.key
openssl req -new -x509 -nodes -sha256 -days 365 -key server.key -out server.crt

and then i verified it by writing:

openssl s_client -connect {{host}}:443 -servername {{host}} </dev/null | openssl x509 -noout -text

openssl s_client -connect {{host}}:443 -servername {{host}} </dev/null | openssl x509 -noout -text

and that seems to working great. Then I went into nuxt to define the keys in my nuxt config by doing so:

devServer: {
        https: {
            key: "server.key",
            cert: "server.crt",
        },
        host: "{{host}}",
    },

devServer: {
        https: {
            key: "server.key",
            cert: "server.crt",
        },
        host: "{{host}}",
    },

but doing so, i still get errors with the ceriticate:

[cause]: unable to verify the first certificate

        at TLSSocket.onConnectSecure (node:_tls_wrap:1679:34)
        at TLSSocket.emit (node:events:518:28)
        at TLSSocket._finishInit (node:_tls_wrap:1078:8)
        at ssl.onhandshakedone (node:_tls_wrap:864:12)
        at TLSWrap.callbackTrampoline (node:internal/async_hooks:130:17)

[cause]: unable to verify the first certificate

        at TLSSocket.onConnectSecure (node:_tls_wrap:1679:34)
        at TLSSocket.emit (node:events:518:28)
        at TLSSocket._finishInit (node:_tls_wrap:1078:8)
        at ssl.onhandshakedone (node:_tls_wrap:864:12)
        at TLSWrap.callbackTrampoline (node:internal/async_hooks:130:17)

I am using the nuxt-auth-sanctum package. Anyone has an idea? Macbook Pro M4 Nuxt V3 Laravel 11

10 replies

NNuxt

•Created by Polak on 11/14/2024 in #❓・help

Has anyone played around with "nuxt-auth-sanctum"? I have some issues.

Link to module: https://manchenkoff.gitbook.io/nuxt-auth-sanctum So where is my issue? I've managed to setup everything on Laravel 11 as for sanctum, but my issue is that my Nuxt app sends the GET /api/user request without the Application/json header. My question is, does anyone know how I can solve this? OR how else would you setup authentication with laravel 11 nowadays? I get this error from nuxt because the request doesnt have the right header:

[nuxt-auth-sanctum:ssr]  ERROR  Unable to load user identity from API [GET] "http://localhost:8000/api/user": <no response> fetch failed

[nuxt-auth-sanctum:ssr]  ERROR  Unable to load user identity from API [GET] "http://localhost:8000/api/user": <no response> fetch failed

If I call the same endpoint from Hoppscotch (postman) with the right header, then it works. I am looking for both tips, other recommendations to auth etc. I am fairly new to Nuxt and Laravel.

20 replies

NNuxt

•Created by Polak on 11/11/2024 in #❓・help

(Solved) Nuxt with SASS - Legacy Deprecation

Hi. I am runnning into an issue while trying to use sass with Nuxt 3 project. I'm more of a do it yourself type of guy and therefore would like to use SASS. The sass package I use though, is throwing deprecation errors:

[3:37:33 PM]  WARN  Deprecation [legacy-js-api]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.

[3:37:33 PM]  WARN  Deprecation [legacy-js-api]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.

Does anyone know the solution to this? I have thought about saying f*ck it and use prepros to compile to css and just load that file, but then I loose the possibility to have scoped styling. Maybe I dont need a sass package at all? is it supported by default?

6 replies

NNuxt

•Created by Polak on 6/7/2024 in #❓・help

i18n fallback issues

Heya people. I've recently moved away from NextJS over to Vue and I'm trying to setup the most important things and one of them is i18n. It works so smoothly compared to next and I love it so far. One thing I am not happy with though is the fallbackLocale feature on the i18n package. The documentation says I should do it in this way but the editor says it is wrong. Any ideas?

i18n: {
        lazy: true,
        langDir: "locales",
        strategy: "prefix_and_default",
        defaultLocale: "en",
        fallbackLocale: ['en', 'fr'],
        locales: [
            {
                code: "en",
                iso: "en-US",
                name: "English",
                file: "en-US.json"
            },
            {
                code: "da",
                iso: "da-DK",
                name: "Dansk",
                file: "da-DK.json"
            }
        ]
    }

i18n: {
        lazy: true,
        langDir: "locales",
        strategy: "prefix_and_default",
        defaultLocale: "en",
        fallbackLocale: ['en', 'fr'],
        locales: [
            {
                code: "en",
                iso: "en-US",
                name: "English",
                file: "en-US.json"
            },
            {
                code: "da",
                iso: "da-DK",
                name: "Dansk",
                file: "da-DK.json"
            }
        ]
    }

Documentation says I should it like this:

fallbackLocale: 'en',

fallbackLocale: 'en',

But I get the error:

Object literal may only specify known properties, and 'fallbackLocale' does not exist in type 'Partial<ModuleOptions>'.

Object literal may only specify known properties, and 'fallbackLocale' does not exist in type 'Partial<ModuleOptions>'.

^ On line with "fallbackLocale" Any suggestions? 😄

33 replies

Gaming

Programming