Toastify css webpack/chunk file not found(404) issue ( NextJS 14 & React 18.2.0 )

[dltmdrbtjd]

Bug Report

What is the current behavior?
i got this issue. i use next.js version 14.2.1 & react version 18.2.0 & react-toastify 10.0.5

 GET /_next/static/css/ReactToastify.css.map 404 in 21ms
 GET /_next/static/chunks/app/react-toastify.esm.mjs.map 404 in 15ms

If I import css from the root layout, the error above occurs. If I import css from root css, the first error disappears, but the error below still occurs.

Am I missing something?

[kamami]

I have the same issue.

[douglasrcjames]

Adding some context from my end here, getting the same issue when I updated to Next.js 14.2.1, but also occasionally getting the below error of failed to pipe on page load, and sometimes the page completely crashes. It should be noted that this is just on page load, not even actively calling a toast alert!

GET /_next/static/chunks/app/react-toastify.esm.mjs.map 404 in 101ms
Error: failed to pipe response
    at et (C:\Users\dougl\Documents\GitHub\mt-next-boiler\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:386705)
    at runNextTicks (node:internal/process/task_queues:60:5)
    at listOnTimeout (node:internal/timers:540:9)
    at process.processTimers (node:internal/timers:514:7)
    at async er.pipeToNodeResponse (C:\Users\dougl\Documents\GitHub\mt-next-boiler\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:388154)
    at async sendRenderResult (C:\Users\dougl\Documents\GitHub\mt-next-boiler\node_modules\next\dist\server\send-payload.js:118:5)
    at async DevServer.pipeImpl (C:\Users\dougl\Documents\GitHub\mt-next-boiler\node_modules\next\dist\server\base-server.js:930:13)
    at async C:\Users\dougl\Documents\GitHub\mt-next-boiler\node_modules\next\dist\server\dev\next-dev-server.js:339:20
    at async Span.traceAsyncFn (C:\Users\dougl\Documents\GitHub\mt-next-boiler\node_modules\next\dist\trace\trace.js:154:20)
    at async DevServer.handleRequest (C:\Users\dougl\Documents\GitHub\mt-next-boiler\node_modules\next\dist\server\dev\next-dev-server.js:336:24)
    at async invokeRender (C:\Users\dougl\Documents\GitHub\mt-next-boiler\node_modules\next\dist\server\lib\router-server.js:174:21)
    at async handleRequest (C:\Users\dougl\Documents\GitHub\mt-next-boiler\node_modules\next\dist\server\lib\router-server.js:368:24)
    at async requestHandlerImpl (C:\Users\dougl\Documents\GitHub\mt-next-boiler\node_modules\next\dist\server\lib\router-server.js:377:13)
    at async Server.requestListener (C:\Users\dougl\Documents\GitHub\mt-next-boiler\node_modules\next\dist\server\lib\start-server.js:141:13) {
  [cause]: TypeError [ERR_INVALID_STATE]: Invalid state: Unable to enqueue
      at transformStreamDefaultControllerEnqueue (node:internal/webstreams/transformstream:505:11)
      at TransformStreamDefaultController.enqueue (node:internal/webstreams/transformstream:323:5)
      at Object.flush (C:\Users\dougl\Documents\GitHub\mt-next-boiler\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:376892)
      at runNextTicks (node:internal/process/task_queues:60:5)
      at listOnTimeout (node:internal/timers:540:9)
      at process.processTimers (node:internal/timers:514:7) {
    code: 'ERR_INVALID_STATE'
  }
}

[ViniciusCavalcanteSantos]

anything new? having the same problem here.

[ViniciusCavalcanteSantos]

I had tried it before and it didn't work. Now I tried it again and it worked. How I love programming! But thanks, man, you helped a lot.

…

On Wed, May 1, 2024 at 1:47 PM Hubert Knioła ***@***.***> wrote: Tip from stack: @import '~react-toastify/dist/ReactToastify.min.css'; add this to globals.css file and the error will disappear — Reply to this email directly, view it on GitHub <#1099 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AQNSEVVRMEHSRU3NZQICBWLZAEMDTAVCNFSM6AAAAABGIPMSOGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAOBYG42TEMRVHA> . You are receiving this because you commented.Message ID: ***@***.***>

[fullgream]

I had tried it before and it didn't work. Now I tried it again and it worked. How I love programming! But thanks, man, you helped a lot.

For me this didn't help

[dltmdrbtjd]

hmmm.... It's not exact, but I suspect it seems to be unable to be read due to a problem in the bundling process of react-toastify scss when building in nextjs. Or, I suspect that it is a case where a classname override problem occurs when used with tailwindcss.

[marcustran98]

i have the same issue

[ganny0219]

i put import "react-toastify/dist/ReactToastify.css"; on layout.tsx folder an this is working for me

[kyawnyeinnaing-lastoenjob]

remove dist, it should be like that import 'react-toastify/ReactToastify.min.css';. I don't get the error anymore
"react-toastify": "^10.0.5"
"next": "14.2.3"

[fullgream]

I'm encountering 404 errors related to React Toastify after trying several troubleshooting steps.

Steps I've taken:

1. Removed node_modules
2. Removed .next
3. Reinstalled all dependencies
4. Added the following import statement:

   import 'react-toastify/ReactToastify.min.css';

With dependencies versions:

•	"react-toastify": "^10.0.5"
•	"next": "^14.2.3"

Errors Encountered:
Despite the above steps, I’m still facing 404 errors for certain resources:

GET /_next/static/chunks/app/react-toastify.esm.mjs.map 404 in 12ms
GET /_next/static/chunks/app/platform/react-toastify.esm.mjs.map 404 in 14ms
GET /_next/static/chunks/app/platform/react-toastify.esm.mjs.map 404 in 11ms

[marcasmed]

I'm encountering 404 errors related to React Toastify after trying several troubleshooting steps.

Steps I've taken:

1. Removed node_modules
2. Removed .next
3. Reinstalled all dependencies
4. Added the following import statement:

   import 'react-toastify/ReactToastify.min.css';

With dependencies versions:

•	"react-toastify": "^10.0.5"
•	"next": "^14.2.3"

Errors Encountered: Despite the above steps, I’m still facing 404 errors for certain resources:

GET /_next/static/chunks/app/react-toastify.esm.mjs.map 404 in 12ms
GET /_next/static/chunks/app/platform/react-toastify.esm.mjs.map 404 in 14ms
GET /_next/static/chunks/app/platform/react-toastify.esm.mjs.map 404 in 11ms

Try importing the css into the layout.tsx file.

This example in the main docs is a bit outdated for Next 14.
Split the imports:

// layout.tsx
import "react-toastify/ReactToastify.css";

// page.tsx
import { ToastContainer } from "react-toastify";

// button-component.tsx
"use client";
import { toast } from "react-toastify";
import { FaRegCopy } from "react-icons/fa6";

const CopyButton = () => {
  const handleCopy = () => {
    navigator.clipboard.writeText("test");
    toast("Report copied to clipboard!");
  };

  return (
    <button onClick={handleCopy}>
      <FaRegCopy className="w-5 h-5 p-1" />
    </button>
  );
};

Update: formatting and examples

[douglasrcjames]

remove dist, it should be like that import 'react-toastify/ReactToastify.min.css';. I don't get the error anymore "react-toastify": "^10.0.5" "next": "14.2.3"

This plus placing the import in the main layout.tsx file seemed to work for me

[humanterror]

I'm encountering 404 errors related to React Toastify after trying several troubleshooting steps.
Steps I've taken:

1. Removed node_modules
2. Removed .next
3. Reinstalled all dependencies
4. Added the following import statement:

   import 'react-toastify/ReactToastify.min.css';

With dependencies versions:

•	"react-toastify": "^10.0.5"
•	"next": "^14.2.3"

Errors Encountered: Despite the above steps, I’m still facing 404 errors for certain resources:

GET /_next/static/chunks/app/react-toastify.esm.mjs.map 404 in 12ms
GET /_next/static/chunks/app/platform/react-toastify.esm.mjs.map 404 in 14ms
GET /_next/static/chunks/app/platform/react-toastify.esm.mjs.map 404 in 11ms

Try importing the css into the layout.tsx file.

This example in the main docs is a bit outdated for Next 14. Split the imports:

// layout.tsx
import "react-toastify/ReactToastify.css";

// page.tsx
import { ToastContainer } from "react-toastify";

// button-component.tsx
"use client";
import { toast } from "react-toastify";
import { FaRegCopy } from "react-icons/fa6";

const CopyButton = () => {
  const handleCopy = () => {
    navigator.clipboard.writeText("test");
    toast("Report copied to clipboard!");
  };

  return (
    <button onClick={handleCopy}>
      <FaRegCopy className="w-5 h-5 p-1" />
    </button>
  );
};

Update: formatting and examples

It didn't work for me.