I'm using MDX with NextJS. I can override heading elements successfully.
In my MDX:
###### This is an h6
In my React component:
const CustomH6 = ({ children }) => {
return <h6 style={{ background: "gold" }}>{children}</h6>;
};
<MDXRemote
{...props.content}
components={{
h6: CustomH6,
}}
/>
However I can't get this working for image elements.
I've tried using a regular image in my MDX:
<img src="/image.jpg" alt="alt text" />
But the 'CustomImage' isn't used and the image renders normal.
<MDXRemote
{...props.content}
components={{
img: CustomImage,
}}
/>
I also tried using the markdown syntax for the image:
Then it does work but I get an error in the webpage:
Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.
Related
I'm getting this super confusing Vue warning and I can't figure it out:
[Vue warn]: Property "me" was accessed during render but is not defined on instance.
at <UserReputation user= {reputation: {…}, _id: '638f81dbb288267e6340ddbc', username: 'artsborba'…} class="mt-1" >
...
Here on StackOverflow I can find more topics with this warning, but seems each one is a different case, and mine is just not making sense! My vue version is ^3.1.0, vuetify ^3.1.0 and vite ^2.5.4.
My component looks like:
// MyComponent.vue
<v-menu location="end" location-strategy="connected">
<template #activator="{ props }">
<div
v-bind="props"
class="user-info-container cursor-pointer"
>
<UserAvatar
:user="me"
/>
<div v-if="me" class="user-data">
<div class="username-row">
{{ me.username }}
<AppIcon
icon="downward-arrow"
color="primary"
class="user-menu-icon"
:class="{ 'is-active': props['aria-expanded'] === 'true' }"
/>
</div>
<!-- HERE WE HAVE THE WARNING SOURCE -->
<UserReputation :user="me" class="mt-1" />
</div>
</div>
</template>
...
</v-menu>
In the same component I have the me set as a prop:
props: {
me: {
validator: prop => typeof prop === 'object' || prop === null,
required: true
}
},
Now, please notice that in the same component I have another one using this me pro (<UserAvatar :user="me"...>), which doesn't trigger this warning. Only the <UserReputation... component usage does! If I comment out the <UserReputation... tag, the warning goes away.
I already tried placing this me as a computed value instead of a prop, directly inside MyComponent.vue (it comes from a Pinia store) and many other structures with no success. Hopefuly someone can help on this! Thanks in advance.
Maybe you are accesing at me property inside your UserReputation component, but in the parent you are passing me to user prop, like this :user="me", so... you need to access to user prop instead me prop inside UserReputation component.
If this answer doesn't resolve the question, please share us the structure of UserReputation component.
I am trying to implement Cookiebot on my NextJs Website.
The docs (Link to docs) mention to insert the script for the cookie declaration inside the HTML of the specific page, for me it is an own subpage only for the cookie declaration.
If I use the HTML element <script ... /> as mentioned in the docs, the text does not load when I switch to the page, but only after a refresh once I'm on the page.
If I use the NextJs Script component Link to docs by switching the <script ..> to and import it from next/script, the cookie declaration loads instantly as expected, but it is placed below everything else of the page, even under the footer (even though i wrap the pages inside a layout with footer).
My code for the layout looks like following:
`
function BasePage(props: IBasePageProps) {
return (
<div>
<Navbar />
<main>{props.children}</main>
<Footer />
</div>
);
}
This works for every page and everything - the pages are all between the Navbar and Footer. However if I use following code for the page of the screenshot, the <Script .../> text is loaded below the footer.
export default function CookieRichtlinie() {
return (
<>
<h1 className="pb-8 mt-2 text-3xl font-extrabold leading-8 tracking-tight text-gray-900 sm:text-4xl">
Cookie Richtlinie
</h1>
<div id="CookiePolicyText">
<Script
id="CookieDeclaration"
src="https://consent.cookiebot.com/12345/cd.js"
type="text/javascript"
async
/>
</div>
</>
);
`
After googling for two days I couldn't find any issue or thread close to this problem. Someone experienced this or know what I could try?
<Script ...> below everything else
Placed <Script ...> tag of next/script anywhere possible to get the loaded text inside the page. Expected to have the result of the script in the placed component, however it is always at the bottom of the page.
Did some global searches in Github and found an useEffect workaround, made some modifications and this worked in my case.
useEffect(() => {
const cookieBotWrapper = document.getElementById("CookiebotDeclaration")
if (cookieBotWrapper) {
const script = document.createElement("script")
script.id = "CookieDeclaration"
script.type = "text/javascript"
script.async = true
script.src = `https://consent.cookiebot.com/${process.env.NEXT_PUBLIC_COOKIEBOT_DOMAIN_GROUP_ID}/cd.js`
cookieBotWrapper.appendChild(script)
}
}, [])
return (
<main>
{process.env.NODE_ENV !== "development" && (
<div id="CookiebotDeclaration" />
)}
</main>
)
In vue3 component I have this code:
<script>
export default {
data() {
return {
vendedores: [{
id: 1,
nombre: "Name test1"
}],
};
}
};
</script>
Having this template, there everything works fine:
<div v-for="vendedor in vendedores"
:key="vendedor.id">
</div>
But in this one is displaying an error everytime vite compiles the assets:
<div v-for="vendedor in vendedores"
:key="vendedor.id">
<button
:class="(vendedor.seleccionado)? 'bg-zinc-800 border-amber-300' : 'bg-transparent'"
class="border-zinc-400 rounded-full py-3 text-left hover:border-violet-200"
>
<span> Test</span>
</button>
</div>
The error displayed in the console is the following:
TypeError: can't access property "nodeValue", node is null
setText runtime-dom.esm-bundler.js:30
processText runtime-core.esm-bundler.js:5109
patch runtime-core.esm-bundler.js:5064
patchKeyedChildren runtime-core.esm-bundler.js:5849
patchChildren runtime-core.esm-bundler.js:5792
patchElement runtime-core.esm-bundler.js:5305
processElement runtime-core.esm-bundler.js:5165
patch runtime-core.esm-bundler.js:5082
...
I have updated #vite to last version (^3.2.0) and vue3 (3.2.41). Other components working fine in other projects with the same version.
Nextjs Image component wont load my images, I've tried everything I've come across still nothing.
<div>
{output?.map((item) => (
<div>
{console.log(`${apiUrl}${item.localImage}`)}
<Image
loader={(item) => {
return `${apiUrl}${item.localImage}`;
}}
alt={item.title}
src={`${apiUrl}${item.localImage}`}
layout="fill"
objectFit="contain"
// height={98}
// width={77}
/>
</div>
))}
</div>
The console.log shows the correct image location.
http://localhost:3030/images/b/Painting-with-Both-Hands--Sophie-Walbeoffe.jpg
http://localhost:3030/images/b/DK-The-History-Book.jpg
http://localhost:3030/images/b/Cradle-to-Cradle--(Patterns-of-Life).jpg
http://localhost:3030/images/b/Upstarts.jpg
I have added localhost to next.config.js with the port and without. I think its something to do with the loader.
So what is missing?
I think you can change the code for the loader to:
loader={() => {
return `${apiUrl}${item.localImage}`;
}}
My NextJS 12 App is stuck loading when the image provided doesn't exist, there is a way to solve that?
import Image from "next/image";
export default function Home() {
return (
<div>
<Image
src="/image_dont_exist"
alt="Image don't exist"
width={400}
height={400}
objectFit="cover"
/>
</div>
);
}
The page just keep loading forever