search

Esri / calcite-react

DEPRECATED - DO NOT USE
https://calcite-react.netlify.com
Apache License 2.0
51 stars 14 forks source link

Toaster doesn't work with SSR/SSG #398

Open jpeterson opened 4 years ago

jpeterson commented 4 years ago

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

jpeterson commented 4 years ago

@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 commented 4 years ago

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

jpeterson commented 4 years ago

@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 commented 4 years ago

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 commented 3 years ago

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