CODEWITHSUNDEEP
nuxt.jsvuejs3nuxt3.js
mrale81
mrale81

Reputation: 329

Nuxt 3 / nuxt-image [h3] Implicit event handler conversion is deprecated. Use eventHandler() or fromNodeMiddleware() to define event handlers

I'm planning using Nuxt 3 to build SSR website. I'm using nuxt-image to handle all images under static directory. I wonder that nuxt-image doesn't work well but I don't know how to resolve. Just to be clear, please see my steps below.

My project directories:

components
pages
static/
    sample-image.webp
app.vue
nuxt.config.ts
package.json

package.json

"scripts": {
    "dev": "nuxt dev",
    "build": "nuxt build"
},
"devDependencies": {
    "nuxt": "3.0.0-rc.12",
    "@nuxt/image": "^0.7.1"
}

nuxt.config.ts

export default defineNuxtConfig({
    modules: [
        "@nuxt/image",
    ]
})

MyImage.vue component:

<script setup></script>

<template>
    <div>
        <NuxtImg
            format="webp"
            src="/sample-image.webp"
            loading="lazy"
            alt="Sample Image"
        />
    </div>
</template>

I got this warning at yarn dev.

WARN  [h3] Implicit event handler conversion is deprecated. Use eventHandler() or fromNodeMiddleware() to define event handlers. 
Route: /_ipx 
Handler: function IPXMiddleware(req, res) {
    return handleRequest({ url: req.url, headers: req.headers }, ipx).then((_res) => {
        res.statusCode = _res.statusCode;
        res.statusMessage = _res.statusMessage;
        for (const name in _res.headers) {
            res.setHeader(name, _res.headers[name]);
        }
        res.end(_res.body);
    });
}

Then I'm facing an error 500 when accesscing http://localhost:3000

[nuxt] [request error] [unhandled] [500] Cannot read properties of undefined (reading 'component')

Hope anyone will assist.

Thanks in advance.

Upvotes: 3

Views: 4174

Answers (1)

jugo
jugo

Reputation: 171

You are using the Nuxt2 nuxt-image module. Try removing it and using this nuxt-image (for Nuxt 3) package

Upvotes: 0

Related Questions