Cannot find module `sonner/dist/styles.css?url` after upgrading to v2.0.4

[janhesters]

Description
After upgrading Sonner from v2.0.3 to v2.0.4, the build fails with the following error:

Cannot find module 'sonner/dist/styles.css?url'

Prior to this release, importing styles worked correctly. It appears that the path or packaging of the CSS file was changed in v2.0.4.

It seems likely that the new release either removed or relocated dist/styles.css, but the documentation (and/or code) still expects to import it from sonner/dist/styles.css?url.

To Reproduce

1. In your project, update package.json to use:

   "dependencies": {
     "sonner": "2.0.4",
     /* ...other dependencies... */
   }

2. Run your package manager to install the new version:

   npm install
   # or
   yarn install

3. In your application code, import the styles exactly as before. For example:

   import { Toaster } from "sonner";
   import "sonner/dist/styles.css?url";

or

import sonnerStyles from 'sonner/dist/styles.css?url';

4. Start the dev server or build your application:

   npm run dev
   # or
   yarn dev
   # or however you build

5. Observe the error in the console/terminal:

   Cannot find module 'sonner/dist/styles.css?url'
   

Expected Behavior

• The CSS file should still be available at the same path (sonner/dist/styles.css) so that importing it using the ?url suffix works as before.
• After upgrading, no import-related errors should occur, and the toast component should continue rendering with the correct default styling.

Actual Behavior

• The import of sonner/dist/styles.css?url fails because the file is not found in the published dist/ directory of the 2.0.4 package.
• As a result, the application build crashes, preventing usage of the Sonner Toaster and any related styling.

[dotamir]

Same here. Even downgrading to the v2.0.3 didn't resolve the issue.
I tried removing node_modules and lock, but it didn't help.

[rxliuli]

Although unintentional, the #647 also fixed this issue.

[emilkowalski]

I just released v2.0.5 which should fix the issue, please let me know if it worked.

[ilarramendi]

This isn't directly related to the issue, but I noticed the library is importing a CSS file. However, looking at the output code, the CSS is actually bundled as a string within the JavaScript and injected into the at runtime. This approach isn't ideal, especially for SSR. It would be much better to reference a static stylesheet via a tag, allowing the browser to preload the CSS while the JavaScript is still loading and parsing.

Is there a way to prevent the library from injecting the CSS dynamically, so we can handle it manually—ideally by serving it as a separate file and linking to it ourselves?

Or why is everyone else importing the css file? are you just duplicating the css content sent via network?

I understand this is happening because of the use of bunchee

[sos0]

I just released v2.0.5 which should fix the issue, please let me know if it worked.

I'm unsure what the issue exactly is, but I had a similar error with "Cannot find module {- external image source link on <img> tag -}" with the latest version. I think whatever dependencies are causing module resolutions from the compiler to be jumbled up.

If it helps, I'm using Next 13 + shadcn/radix and was mid-updating the now-deprecated shadcn toast component as instructed by shadcn documentation.

[sos0]

Maybe related to webpack/webpack#19012

[rxliuli]

Is there a way to prevent the library from injecting the CSS dynamically, so we can handle it manually—ideally by serving it as a separate file and linking to it ourselves?

Currently, the only option is to use pnpm patch to override it locally. Due to issues with shadow DOM support, I am also considering forking and releasing a new package.

Or why is everyone else importing the css file? are you just duplicating the css content sent via network?

As for me, I need to use it within the shadow DOM. I also have to remove the CSS that is injected by default into the website's head tag, as it may cause conflicts with the site's own sonner styles.

[jjrise]

for anyone using tanstack start, I had to import the sonner css and add it to my stylesheet links, that did the trick for me

import appCss from "@acme/ui/globals.css?url";
import sonnerStyles from "../../../../node_modules/sonner/dist/styles.css?url";

  head: () => ({
    meta: [
      {
        charSet: "utf-8",
      },
      {
        name: "viewport",
        content: "width=device-width, initial-scale=1",
      },
    ],
    links: [
      {
        rel: "stylesheet",
        href: appCss,
      },
      {
        rel: "stylesheet",
        href: sonnerStyles,
      },
    ],
  }),

[janhesters]

@emilkowalski 2.0.5 resolved the issue for me. Thank you! 🙏