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

[KarsonJo]

Same issue, any updates?

[spacecat]

I'm experiencing the same issue:

    ~/repos  on   main  npm run dev                                                                                     ✔  took 1h 34m 9s   at 20:02:26  

> [email protected] dev
> next dev

  ▲ Next.js 14.2.3
  - Local:        http://localhost:3000
  - Environments: .env.local

 ✓ Starting...
 ✓ Ready in 1688ms
 ✓ Compiled /middleware in 391ms (169 modules)
 ○ Compiling /dashboard ...
 ✓ Compiled /dashboard in 3.8s (1559 modules)
 ✓ Compiled in 558ms (620 modules)
 GET /dashboard 200 in 4359ms
 ○ Compiling /_not-found ...
 ✓ Compiled /favicon.ico in 2.5s (1553 modules)
 GET /_next/static/chunks/app/react-toastify.esm.mjs.map 404 in 2687ms
 GET /_next/static/chunks/app/dashboard/react-toastify.esm.mjs.map 404 in 2549ms
 GET /favicon.ico 200 in 2175ms
 POST /dashboard 200 in 2365ms
 POST /dashboard 200 in 101ms

   ~/r/_/ on   main  npx --no-install next info                                                           ✔  at 19:59:14  

Operating System:
 Platform: darwin
 Arch: arm64
 Version: Darwin Kernel Version 23.4.0: Fri Mar 15 00:12:41 PDT 2024; root:xnu-10063.101.17~1/RELEASE_ARM64_T8103
 Available memory (MB): 16384
 Available CPU cores: 8
Binaries:
 Node: 20.9.0
 npm: 10.1.0
 Yarn: 1.22.19
 pnpm: N/A
Relevant Packages:
 next: 14.2.3 // Latest available version is detected (14.2.3).
 eslint-config-next: 14.2.3
 react: 18.3.1
 react-dom: 18.3.1
 typescript: 5.4.5
Next.js Config:
 output: N/A

   ~/repos/ on   main  npx envinfo --system --browsers --binaries --npmPackages                     ✔  at 20:24:15  

 System:
   OS: macOS 14.4.1
   CPU: (8) arm64 Apple M1
   Memory: 283.20 MB / 16.00 GB
   Shell: 5.9 - /bin/zsh
 Binaries:
   Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
   Yarn: 1.22.19 - ~/.yarn/bin/yarn
   npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm
   bun: 1.0.13 - ~/.bun/bin/bun
 Browsers:
   Chrome: 125.0.6422.142
   Safari: 17.4.1
 npmPackages:
   @clerk/nextjs: 5.1.4 => 5.1.4 
   @floating-ui/react: 0.26.16 => 0.26.16 
   @headlessui/react: 2.0.4 => 2.0.4 
   @ianvs/prettier-plugin-sort-imports: 4.2.1 => 4.2.1 
   @tailwindcss/forms: 0.5.7 => 0.5.7 
   @tailwindcss/typography: 0.5.13 => 0.5.13 
   @types/node: 20.14.2 => 20.14.2 
   @types/react: 18.3.3 => 18.3.3 
   @types/react-dom: 18.3.0 => 18.3.0 
   @types/react-howler: 5.2.3 => 5.2.3 
   @types/react-scroll: 1.8.10 => 1.8.10 
   @types/react-timeago: 4.1.7 => 4.1.7 
   algoliasearch: 4.23.3 => 4.23.3 
   autoprefixer: 10.4.19 => 10.4.19 
   clsx: 2.1.1 => 2.1.1 
   date-fns: 3.6.0 => 3.6.0 
   eslint: 8.57.0 => 8.57.0 
   eslint-config-next: 14.2.3 => 14.2.3 
   eslint-config-prettier: 9.1.0 => 9.1.0 
   justgage: 1.6.1 => 1.6.1 
   next: 14.2.3 => 14.2.3 
   next-themes: 1.0.0-beta.0 => 1.0.0-beta.0 
   postcss: 8.4.38 => 8.4.38 
   prettier: 3.3.1 => 3.3.1 
   prettier-plugin-tailwindcss: 0.6.2 => 0.6.2 
   react: 18.3.1 => 18.3.1 
   react-countdown: 2.3.5 => 2.3.5 
   react-dom: 18.3.1 => 18.3.1 
   react-howler: 5.2.0 => 5.2.0 
   react-instantsearch: 7.11.0 => 7.11.0 
   react-responsive: 10.0.0 => 10.0.0 
   react-scroll: 1.9.0 => 1.9.0 
   react-toastify: 10.0.5 => 10.0.5 
   sass: 1.77.4 => 1.77.4 
   swiper: 11.1.4 => 11.1.4 
   tailwind-merge: 2.3.0 => 2.3.0 
   tailwind-scrollbar: 3.1.0 => 3.1.0 
   tailwindcss: 3.4.4 => 3.4.4 
   typescript: 5.4.5 => 5.4.5 

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

[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

[ViniciusCavalcanteSantos]

anything new? having the same problem here.

[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

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

[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

Updating that what I thought fixed my issue, actually does not, and this bug still is very much annoying in my logs! considering just switching libs.

[BorisBarzotto]

Hi, It happened to me again, at first I thought it had been solved with that import suggestion in layout.tsx but it's still the same issue.

NextJS 14.2.3
ReactToastify 9.1.3
These are the messages I see repeatedly in the console and my notifications still work but it sends many 404 messages.

 GET /_next/static/chunks/app/dashboard/sales/simple-invoices/react-toastify.esm.mjs.map 404 in 725ms
 GET /dashboard/sales/simple-invoices 200 in 7424ms
 GET /favicon.ico 200 in 218ms
 GET /_next/static/css/app/ReactToastify.css.map 404 in 204ms
 GET /_next/static/chunks/app/react-toastify.esm.mjs.map 404 in 215ms
 GET /_next/static/chunks/app/dashboard/sales/simple-invoices/react-toastify.esm.mjs.map 404 in 91ms
 GET /_next/static/chunks/app/dashboard/sales/simple-invoices/react-toastify.esm.mjs.map 404 in 128ms
 POST /dashboard/sales/simple-invoices 200 in 2462ms
 GET /_next/static/css/app/ReactToastify.css.map 404 in 118ms
 ○ Compiling /dashboard/customers ...
 ✓ Compiled /dashboard/customers in 4.2s (3815 modules)
 GET /_next/static/chunks/app/dashboard/customers/react-toastify.esm.mjs.map 404 in 241ms
 ○ Compiling /api/auth/sign-out ...
 ✓ Compiled /api/auth/sign-out in 1235ms (3653 modules)
 POST /api/auth/sign-out 301 in 4188ms
 GET /login 200 in 439ms
 GET /_next/static/css/app/ReactToastify.css.map 404 in 172ms
 GET /_next/static/chunks/app/react-toastify.esm.mjs.map 404 in 202ms```