Toaster doesn't work with SSR/SSG

[jpeterson]

Expected Behavior

The Toaster component should work the same in a SSR/SSG app as it does in a client-rendered app.

Current Behavior

./node_modules/react-toastify/dist/ReactToastify.css being imported causes the following error:

This error is documented here:
https://github.com/vercel/next.js/blob/master/errors/css-npm.md

Possible Solution

Steps to Reproduce (for bugs)

1. Go to this sandbox: https://codesandbox.io/s/tender-panini-hhx11?file=/pages/index.js
2. Note the use of ToastContainer
3. Note the error in the console:

error - ./node_modules/react-toastify/dist/ReactToastify.css
Global CSS cannot be imported from within node_modules.
Read more: https://err.sh/next.js/css-npm
Location: node_modules/calcite-react/Toaster/Toaster.js

Context + Screenshots

Your Environment

• Version used: 0.54.0
• Browser Name and version: Chrome 84
• Operating System and version (desktop or mobile): macOS Catalina
• Link to your project: https://codesandbox.io/s/tender-panini-hhx11?file=/pages/index.js

[jpeterson]

@codylawson do you have any thoughts on this?

It looks like react-toastify can be used with SSR, but there is currently no way to tell CR not to import the CSS file behind the scenes.

[codylawson]

@jpeterson What's the preferred way for it to work? Import the css manually instead?

[jpeterson]

@codylawson I'm not entirely sure of the best approach here, but based on this page, I feel like we need a way for users to take on the responsibility of importing the CSS.

I wonder if we could come up with a solution where passing a prop like <ToastContainer omitStyles /> to skip importing the CSS file?

I don't know if what we're doing now is an anti-pattern, but I don't want this to introduce a breaking change or make it harder to use for anyone not concerned with SSR/SSG.

[codylawson]

Are there any babel/webpack plugins that take care of this? Not that we shouldn't handle it ourselves, just curious what options there are.

[jpeterson]

This is no longer a problem with NextJS apps as of NextJS 9.5.4

announcement: https://nextjs.org/blog/next-10#importing-css-from-third-party-react-components
doc: https://nextjs.org/docs/basic-features/built-in-css-support#import-styles-from-node_modules