Question 239417 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – onMouseEnter/onMouseOver not working on new NextJS project

I have created a new NextJS project with the latest version of Next (Next.js v13.4.19). I want to register onMouseEnter events for my application. A basic example works in this code sandbox: https://codesandbox.io/s/romantic-saha-9mvvwy?file=/index.js.

I use a simple sudo yarn create next-app --typescript and then paste the Box code on the home page. My page.tsx looks like so:

import { Box } from "@material-ui/core";
import Image from "next/image";

export default function Home() {
  return (
    <Box
      color="primary"
      onMouseOver={(e) => console.log("onMouseEnter (first button)")}
      onMouseOut={(e) => console.log("onMouseLeave (first button)")}
    >
      Hello World Edit
    </Box>
  );
}

I get an error about needing to specify if this is a client or server component, so I add the "use client" modifier at the top:

'use client'

import { Box } from "@material-ui/core";
import Image from "next/image";

export default function Home() {
  return (
    <Box
      color="primary"
      onMouseOver={(e) => console.log("onMouseEnter (first button)")}
      onMouseOut={(e) => console.log("onMouseLeave (first button)")}
    >
      Hello World Edit
    </Box>
  );
}

There are no errors, but the events are not getting registered. Any suggestions?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I was able to solve it by downgrading my version of next from 13.4 to 13.0.6 in package.json


  2. 0

    You need to use createRoot to render your app.

    import React from "react";
import ReactDOM from "react-dom";
import { Box } from "@material-ui/core";

function App() {
  return (
    <Box
      color="primary"
      onMouseEnter={(e) => console.log("onMouseEnter (first button)")}
      onMouseLeave={(e) => console.log("onMouseLeave (first button)")}
    >
      Hello World
    </Box>
  );
}

const app = ReactDOM.createRoot(document.querySelector("#app"))

app.render(<App />);

    Code sandbox – https://codesandbox.io/s/strange-sky-2cskff

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search