fkhadra / react-toastify

React notification made easy 🚀 !
https://fkhadra.github.io/react-toastify/introduction
MIT License
12.33k stars 676 forks source link

Failed to load resource nextjs #985

Closed AndonMitev closed 8 months ago

AndonMitev commented 11 months ago

Hello i'm building desktop app with Tauri and Next, have added next for notifications and it works ok but i see this error:

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:3000/_next/static/css/app/ReactToastify.css.map

and this is how i use it:

import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

export default function ToastContainerWrapper() {
  return (
    <ToastContainer
      position="top-right"
      autoClose={5000}
      hideProgressBar={false}
      newestOnTop={false}
      closeOnClick
      rtl={false}
      pauseOnFocusLoss
      draggable
      pauseOnHover
      theme="dark"
    />
  );
}

and then import it in layout.ts:

              <div className=" fixed w-full h-[140px] top-0 left-0 z-10 bg-gray-800">
                <MainNav />
                <RouteGuard />
              </div>
              <main id="home-root" className=" mt-[140px] mx-4 flex flex-col gap-4 relative flex-1 h-full">
                {children}
              </main>
              <ToastContainerWrapper />

any ideas?

Ruttmann commented 11 months ago

You should import the CSS on the _app file and only there.

OscarArranz commented 11 months ago

To add to what @Ruttmann said, if you're using the new Next 13 app folder structure you can instead import the css directly inside the layout.tsx file.