sourceMappingURL=ReactToastify.css.map causes Nextjs 13 error [ERR_PACKAGE_PATH_NOT_EXPORTED]

[iharuya]

Do you want to request a feature or report a bug? bug

What is the current behavior? Applying the ReactToastify.css in Nextjs 13 (App directory) causes an error when next dev:

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './server.edge' is not defined by "exports" in ~/sample-project/node_modules/.pnpm/next@13.4.7_react-dom@18.2.0_react@18.2.0/node_modules/react-dom/package.json

There is also a related message in the chrome 114 browser console:

DevTools failed to load source map: Could not load content for http://localhost:3700/_next/static/css/app/(main)/ReactToastify.css.map: HTTP error: status code 500, net::ERR_HTTP_RESPONSE_CODE_FAILURE

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your CodeSandbox (https://codesandbox.io/s/new) example below:

Toast.tsx in Nextjs 13.4.7 (App directory)

"use client"
import { FC } from "react"
import { ToastContainer } from "react-toastify"
import "react-toastify/dist/ReactToastify.css"

export const Toast: FC = () => {
  return <ToastContainer position="bottom-right" draggable />
}

I imported this component in the layout.tsx.

Fix

At first glance, the message from nextjs dev server seemed to be irrelevant to react-toastify, but deleting the last line of react-toastify/dist/ReactToastify.css solved the problem.

...
/* delete the line below */
/*# sourceMappingURL=ReactToastify.css.map */

Shouldn't we remove the reference to the map in dist?

Or is my approach to using the library in Nextjs wrong in the first place?

[fkhadra]

Hmm not sure I would need to set up a next app. Have you tried to import the CSS in the layout.tsx, I think importing CSS in server component should be ok.

[iharuya]

Thank you for your response:)

I upgraded nextjs to version 13.4.8 and next dev --port 3700 then I don't see the error anymore. However the following warning in the browser console remains regardless of where you import the css.

DevTools failed to load source map: Could not load content for http://localhost:3700/_next/static/css/app/(main)/ReactToastify.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

Note that this warning disappears when next build && next start

[amit548]

I think this problem is fixed in next.js 14

[fkhadra]

Same as #1002