Merite
Hydration mismatche
contentSecurityPolicy: {
'img-src': ["'self'", 'data:', 'https://*.tile.openstreetmap.org']
}Impossible d'assigner le type 'boolean' au type 'string | false | string[] | undefined'.ts(2322)
⚠ Error (TS2322) |
Impossible d'assigner le type
au type
@kapa.ai
76 replies
Hydration mismatche
Refused to load the image 'https://c.tile.openstreetmap.org/6/31/22.png' because it violates the following Content Security Policy directive: "img-src 'self' data:". @kapa.ai avec nuxt security et leaflet
76 replies
Hydration mismatche
@kapa.ai voila mon code leaflet <div class="z-0 h-full px-0.5">
<LMap
ref="map"
:zoom="6"
:center="[47.21322, -1.559482]"
:use-global-leaflet="false"
>
<LTileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution="&copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors"
layer-type="base"
name="OpenStreetMap"
/>
<LCircleMarker
:lat-lng="[47.21322, -1.559482]"
:radius="6"
:color="'red'"
/>
</LMap>
</div>
76 replies
Hydration mismatche
@kapa.ai j'ai instlallé nuxt leaflet sur mon projet et je recois cette erreur lors du generate [16:58:17] ERROR Nuxt Build Error: [vite:css] [postcss] ENOENT: no such file or directory, open 'front\app\base\assets\images\layers.png'
file: front/node_modules/leaflet/dist/leaflet.css:undefined:NaN
76 replies
Hydration mismatche
@kapa.ai <UButton
@click="navigateTo('/auth/login')"
size="2xl"
:ui="{ rounded: 'rounded-full' }"
class="bg-[#E8F1FC] hover:bg-[#E8F1FC]/90 text-black"
label="Se connecter"
/> Impossible d'assigner le type '"2xl"' au type 'ButtonSize | undefined'. button: {
default: { size: 'lg' },
size: {
'2xl': 'text-lg',
'3xl': 'text-xl',
'4xl': 'text-2xl',
'5xl': 'text-3xl',
'6xl': 'text-4xl'
},comment je peux regler cette erreur ts
76 replies
Hydration mismatche
<script setup>
const messages = ref([])
const inputMessage = ref('')
let ws
const connectWebSocket = () => {
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
ws = new WebSocket(
${protocol})
ws.onopen = () => {
messages.value.push('Connecté au serveur WebSocket')
}
ws.onmessage = (event) => {
messages.value.push(${event.data})
}
ws.onclose = () => {
messages.value.push('Déconnecté du serveur WebSocket')
}
}
const sendMessage = () => {
if (inputMessage.value && ws.readyState === WebSocket.OPEN) {
ws.send(inputMessage.value)
inputMessage.value = ''
}
}
onMounted(() => {
connectWebSocket()
})
onUnmounted(() => {
if (ws) ws.close()
})
</script>
<template>
<div>
<h2>WebSocket Demo</h2>
<ul>
<li
v-for="(message, index) in messages"
:key="index"
>{{ message }}</li>
</ul>
<input
v-model="inputMessage"
@keyup.enter="sendMessage"
placeholder="Entrez un message"
>
<button @click="sendMessage">Envoyer</button>
</div>
</template>
Failed to construct 'WebSocket': The URL 'ws:' is invalid.
<style lang="css" scoped></style> @kapa.ai76 replies
Hydration mismatche
<p class="tablet:p-4 p-2 flex justify-between">
<span class="tablet:text-base text-xs">Envoyer un colis</span>
<URadio
v-model="selectedOption"
name="notifications"
value="sendPackage"
:ui="{ rounded: 'rounded-full' }"
/>
</p> @kapa.ai warn]: Hydration children mismatch on <p class="tablet:p-4 p-2 flex justify-between" data-v-inspector="app/website/pages/auth/register/index.vue:36:21">…</p>flex<span class="tablet:text-base text-xs" data-v-inspector="app/website/pages/auth/register/index.vue:37:25">Envoyer un colis</span><div class="relative flex items-start">…</div>flex</p>
Server rendered element contains fewer child nodes than client vdom.
76 replies
Hydration mismatche
@kapa.ai how i can use useId on this code <template>
<UAccordion
class="w-11/12 mx-auto mt-10 laptop-m:w-4/6 bg-mgp-cyan rounded-xl"
variant="ghost"
color="blue"
:items="faqStore.faqs"
:ui="{ item: { color: 'text-mgp-slate-500' } }"
>
<template #default="{ item, index, open }">
<UButton
variant="ghost"
:class="[
index === 0 ? 'rounded-tl-xl rounded-tr-xl' : '',
index === faqStore.faqs.length - 1 ? 'rounded-bl-xl rounded-br-xl border-b-0' : '',
!open && index !== faqStore.faqs.length - 1 ? 'border-b border-gray-200' : ''
]"
class="flex justify-between p-4"
:ui="{ rounded: 'rounded-none', padding: { 'mobile-md': 'p-3' } }"
>
<span class="mt-2 text-lg font-semibold truncate text-mgp-slate-500">
{{ item.title }}
</span>
<template #trailing>
<div class="flex justify-end text-white rounded-full bg-mgp-dark-blue">
<UIcon
size="25"
:name="open ? 'i-heroicons-minus-20-solid' : 'i-heroicons-plus-20-solid'"
class="transition-transform duration-200 transform ms-auto text-mgp-blue"
/>
</div>
</template>
</UButton>
</template>
<template #item="{ item }">
<p class="p-4 text-base text-gray-900 dark:text-white">
{{ item.description }}
</p>
</template>
</UAccordion>
76 replies