Import not working
"use client"
import { useEffect } from 'react'
import { useRouter } from 'next/navigation'
import { InstantRedirect } from "@/utils/redirect.js"
export default function Home() {
const router = useRouter()
useEffect(() => {
InstantRedirect(router)
}, [router])
return null
}
"use client";
export function setupRedirectOnClick(router, buttonIds) {
buttonIds.forEach(id => {
const button = document.getElementById(id);
if (button) {
button.addEventListener("click", () => {
const path = button.getAttribute("data-path");
if (path) {
router.replace(path)
};
});
};
});
}
export function InstantRedirect(router) {
router.replace("/home")
};
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@components/": ["./src/components/"],
"@styles/": ["./styles/"],
"@utils/": [".src/utils/"]
}
}
}
33 Replies
it looks like it can't find
@/utils/redirect.js
where did that import come from?From /app/page.js
I mean why is it there? Is it from a package, or something you wrote yourself?
No it's the page but you get redirected to the correct page in this case /home/page.js
This http://localhost:3000/ is supposed to change to http://localhost:3000/home
does that import work on other pages?
Let me check
I think so
It doesn't show errors
But even if I would remove import { InstantRedirect } from "@/utils/redirect.js"
It still thinks it is there
have you restarted your dev server process?
Yes
Even removing npm and reinstalling it doesn't work
the code on the left in the trace does not match the code on the right in your editor
That's true I restarted the dev server and it stills shows this
what does layout.js look like?
import "../styles/globals.css"
import Logo from '../public/Logo.png'
export const metadata = {
title: "Personal portfolio",
icons: {
icon: '/favicon.ico',
}
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<head />
<body>{children}</body>
</html>
);
}
Also doesn't work in edge
I mean, it's a build error, the browser doesn't matter
Can you show a bigger screenshot of the terminal window?
and jsconfig.json?
your import should be
import { InstantRedirect } from "@utils/redirect.js"
where did the import { InstantRedirect } from "@/utils/redirect.js" line come from? Did you write it yourself?Restarted the dev server
Still not working
I searched for it online since I wanted to redirect it I don't know where I found it
why didn't you save the file?
I did save it
no you didn't
that ball means there's unsaved changes
it's an x otherwise
or just blank, actually
You can also see that there's no uncommitted changes in page.js, which probably means you haven't saved it at all since you last committed:
Since it was the same it thinks there was no changes
import { InstantRedirect } from "@/utils/redirect.js"
Was already here
this also needs to be
./src/utils/*, not .src/utils/*
you'll probably have to restart the dev server again after changing that
Restarted it again
Oh wait
I saved it and now it workes
Thank you for your help!
you really gotta remember to save your code
glad to help
but yeah, ctrl+s is your friend
I will remember that!