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

[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'
  }
}

[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"

[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

[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