calcite-react icon indicating copy to clipboard operation
calcite-react copied to clipboard

Published 20 hours ago • verified publisher icon Esri

Toaster doesn't work with SSR/SSG

Open jpeterson opened this issue 4 years ago • 5 comments

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

image

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 avatar Aug 13 '20 20:08 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.

jpeterson avatar Aug 13 '20 20:08 jpeterson

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

codylawson avatar Aug 13 '20 20:08 codylawson

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

jpeterson avatar Aug 13 '20 20:08 jpeterson

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.

codylawson avatar Aug 13 '20 21:08 codylawson

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

jpeterson avatar Oct 27 '20 16:10 jpeterson