Esri / Esri/calcite-react

Toaster doesn't work with SSR/SSG

Open
#398 5 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
JavaScript
Stars
51
Forks
13
PR merge metrics
No merged PRs in 30d

Description

## Expected Behavior
The [Toaster](https://calcite-react.netlify.app/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:

```shell
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](https://user-images.githubusercontent.com/3399064/90181750-2c718680-dd6e-11ea-9706-ddee073128d9.png)

## 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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.