Docs: Add a "web support" section

[gunnartorfis]

Been receiving a few questions if this has web support.

Would want to point out to the following setup:

// sonner.ts
export * from 'sonner-native';

// sonner.web.ts
export * from 'sonner';

And mention that the APIs match so it will work on native & web platforms.

[Code-Victor]

Dope!
Awesome work.

[GustavoBonfimS]

When I try to add Sonner to my project and use it on the web, as you described, I encounter the following error: 'Unable to resolve "sonner" from "src/lib/Sonner/index.web.ts".'

Do you know how to solve this issue? Thank you for your great work!

[gunnartorfis]

Could you show me more code for context?

[GustavoBonfimS]

I created a basic reproduction example here:
https://github.com/GustavoBonfimS/sonner-native-web-test

In my tests, the only way to make Sonner work is by editing node_modules/sonner/package.json to include a main field. This way, I can run the web app with Sonner working.

[gunnartorfis]

@GustavoBonfimS thanks. Is platform specific file endings working in the project in general? If you just create some Text component that says "Hello" on native and "Hello Web" on .web.tsx?

[GustavoBonfimS]

Yes, I have platform-specific file extensions in other files in my app, and they worked fine before adding Sonner.

Could Sonner be breaking because of the Package Exports support in React Native? Are you able to use Sonner by following the setup in the documentation?

[gunnartorfis]

I'm using this setup in my production apps. There's one slight difference:

// toast.ts
export { toast, Toaster } from "sonner-native";

// toast.web.ts
export { toast, Toaster } from "sonner";

Could you try that instead of the * export?

[GustavoBonfimS]

This is causing errors as well 😢

What version of React Native are you using in your app? Could you try creating a new expo project and installing the library?

[gunnartorfis]

Seems like an open issue in Sonner: emilkowalski/sonner#473