-
-
Notifications
You must be signed in to change notification settings - Fork 700
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Error: React is not defined #797
Comments
hey, @imranbarbhuiya which version of react-toastify are you using? A fix has been pushed in v9.0.4 to fix an issue with vite |
I'm using v9.0.5 |
I get the same error using the newly released v9.0.6 (with |
@imranbarbhuiya would it be possible to reproduce your issue in code sandbox or share a repo? Thanks |
It seems to work just fine for me, so I believe it has something to do with the configuration |
I ran into the same problem and couldn't solve it, so I switched to a different notification library, but the problem occurs before I switched. |
I'll test with your repo btw have you tried in production build or dev build? Because the dev build works fine the issue comes in the production build. |
I have seen no issues in the development environment, only with Netlify. |
You're right @imranbarbhuiya didn't see that the issue was just happening in production. |
@imranbarbhuiya I found out that the issue is coming from the jsxRuntime used by the vite react plugin. A couple of libraries seems to have the same issue. Can you update your config to use the classic runtime. Meanwhile, I keep on troubleshooting export default defineConfig({
plugins: [react({
jsxRuntime: 'classic'
})]
}) |
@imranbarbhuiya may I ask you to try to install |
yeah sure lemme try |
No still the same error. I just upgraded my vite to |
@imranbarbhuiya weird. Could it be a cache issue on your side? I've updated the repo with the latest vite version as you did https://github.com/fkhadra/vite-toastify and the react-toastify version I've shared with you. |
Yeah yarn was resolving it to |
Awesome I'll publish a new version tomorrow then |
@imranbarbhuiya pushed v9.0.7 |
I have the same issue in version 9.1.1. 9.0.7 works fine. |
Same issue on 9.1.2. Happens only after build once pushed to firebase, on local dev it works fine |
@fkhadra Can we reopen this issue if the problem still exists? |
The problem also exists on versions after 9.0.7. I am using 9.0.7 to resolve the issue. This is only for production build. In dev newer versions work fine |
<p>This PR was automatically created by Snyk using the credentials of a real user.</p><br /><h3>Snyk has created this PR to upgrade react-toastify from 9.0.7 to 9.1.3.</h3> :information_source: Keep your dependencies up-to-date. This makes it easier to fix existing vulnerabilities and to more quickly identify and fix newly disclosed vulnerabilities when they affect your project. <hr/> - The recommended version is **6 versions** ahead of your current version. - The recommended version was released **25 days ago**, on 2023-05-14. <details> <summary><b>Release notes</b></summary> <br/> <details> <summary>Package name: <b>react-toastify</b></summary> <ul> <li> <b>9.1.3</b> - <a href="https://snyk.io/redirect/github/fkhadra/react-toastify/releases/tag/v9.1.3">2023-05-14</a></br><h1>Release note</h1> <ul> <li>Add support for RSC (next app router): <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1695199612" data-permission-text="Title is private" data-url="fkhadra/react-toastify#951" data-hovercard-type="issue" data-hovercard-url="/fkhadra/react-toastify/issues/951/hovercard" href="https://snyk.io/redirect/github/fkhadra/react-toastify/issues/951">#951</a></li> <li>Partially address <code>Toast is undefined || Uncaught TypeError: Cannot read properties of undefined (reading 'content')</code> <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1412605274" data-permission-text="Title is private" data-url="fkhadra/react-toastify#858" data-hovercard-type="issue" data-hovercard-url="/fkhadra/react-toastify/issues/858/hovercard" href="https://snyk.io/redirect/github/fkhadra/react-toastify/issues/858">#858</a> <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1696250675" data-permission-text="Title is private" data-url="fkhadra/react-toastify#952" data-hovercard-type="issue" data-hovercard-url="/fkhadra/react-toastify/issues/952/hovercard" href="https://snyk.io/redirect/github/fkhadra/react-toastify/issues/952">#952</a></li> <li>Bump dependencies</li> </ul> </li> <li> <b>9.1.2</b> - <a href="https://snyk.io/redirect/github/fkhadra/react-toastify/releases/tag/v9.1.2">2023-03-21</a></br><h1>Release notes</h1> <p>Mainly bug fixes as I'm working on the next major release.</p> <h2><g-emoji class="g-emoji" alias="spider" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f577.png">🕷</g-emoji>Bugfixes</h2> <ul> <li>fix resetting options <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1605117353" data-permission-text="Title is private" data-url="fkhadra/react-toastify#921" data-hovercard-type="issue" data-hovercard-url="/fkhadra/react-toastify/issues/921/hovercard" href="https://snyk.io/redirect/github/fkhadra/react-toastify/issues/921">#921</a> <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1605073557" data-permission-text="Title is private" data-url="fkhadra/react-toastify#920" data-hovercard-type="issue" data-hovercard-url="/fkhadra/react-toastify/issues/920/hovercard" href="https://snyk.io/redirect/github/fkhadra/react-toastify/issues/920">#920</a></li> <li>fix autoClose on update <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1593223965" data-permission-text="Title is private" data-url="fkhadra/react-toastify#918" data-hovercard-type="issue" data-hovercard-url="/fkhadra/react-toastify/issues/918/hovercard" href="https://snyk.io/redirect/github/fkhadra/react-toastify/issues/918">#918</a></li> <li>fix invalid CSS translate <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1619151175" data-permission-text="Title is private" data-url="fkhadra/react-toastify#925" data-hovercard-type="issue" data-hovercard-url="/fkhadra/react-toastify/issues/925/hovercard" href="https://snyk.io/redirect/github/fkhadra/react-toastify/issues/925">#925</a></li> </ul> </li> <li> <b>9.1.2-rsc</b> - 2023-05-14 </li> <li> <b>9.1.1</b> - <a href="https://snyk.io/redirect/github/fkhadra/react-toastify/releases/tag/v9.1.1">2022-11-02</a></br><p>9.1.1</p> </li> <li> <b>9.1.0</b> - <a href="https://snyk.io/redirect/github/fkhadra/react-toastify/releases/tag/v9.1.0">2022-11-01</a></br><h1>Release notes</h1> <h2><g-emoji class="g-emoji" alias="rocket" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f680.png">🚀</g-emoji> Features</h2> <ul> <li><code>toast.promise</code> let you type <code>data</code> for each state. This is useful when rendering something based on the response.</li> </ul> <p>For example:</p> <div class="highlight highlight-source-tsx notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="interface Success { username: string } interface Error { err: string } toast.promise<Success,Error>(myPromise, { success: { render({ data }) { return data.username; } }, error: { render({ data }) { return data.err; } } }) "><pre><span class="pl-k">interface</span> <span class="pl-smi">Success</span> <span class="pl-kos">{</span> <span class="pl-c1">username</span>: <span class="pl-smi">string</span> <span class="pl-kos">}</span> <span class="pl-k">interface</span> <span class="pl-smi">Error</span> <span class="pl-kos">{</span> <span class="pl-c1">err</span>: <span class="pl-smi">string</span> <span class="pl-kos">}</span> <span class="pl-s1">toast</span><span class="pl-kos">.</span><span class="pl-en">promise</span><span class="pl-kos"><</span><span class="pl-smi">Success</span><span class="pl-kos">,</span><span class="pl-smi">Error</span><span class="pl-kos">></span><span class="pl-kos">(</span><span class="pl-s1">myPromise</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">success</span>: <span class="pl-kos">{</span> <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">{</span> data <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-k">return</span> <span class="pl-s1">data</span><span class="pl-kos">.</span><span class="pl-c1">username</span><span class="pl-kos">;</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-c1">error</span>: <span class="pl-kos">{</span> <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">{</span> data <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-k">return</span> <span class="pl-s1">data</span><span class="pl-kos">.</span><span class="pl-c1">err</span><span class="pl-kos">;</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span><span class="pl-kos">)</span></pre></div> <ul> <li><code>toast.update</code> accepts a generic as well to specify the data type</li> </ul> <div class="highlight highlight-source-tsx notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="interface TData { username: string } toast.update<TData>(id, { data: payload, render({ data }) { return `hello ${data.username}` } })"><pre><span class="pl-k">interface</span> <span class="pl-smi">TData</span> <span class="pl-kos">{</span> <span class="pl-c1">username</span>: <span class="pl-smi">string</span> <span class="pl-kos">}</span> <span class="pl-s1">toast</span><span class="pl-kos">.</span><span class="pl-en">update</span><span class="pl-kos"><</span><span class="pl-smi">TData</span><span class="pl-kos">></span><span class="pl-kos">(</span><span class="pl-s1">id</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">data</span>: <span class="pl-s1">payload</span><span class="pl-kos">,</span> <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">{</span> data <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-k">return</span> <span class="pl-s">`hello <span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">data</span><span class="pl-kos">.</span><span class="pl-c1">username</span><span class="pl-kos">}</span></span>`</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span><span class="pl-kos">)</span></pre></div> <h2><g-emoji class="g-emoji" alias="spider" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f577.png">🕷</g-emoji> Bugfixes</h2> <ul> <li>fix progress countdown stops on mobile <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="831649103" data-permission-text="Title is private" data-url="fkhadra/react-toastify#580" data-hovercard-type="issue" data-hovercard-url="/fkhadra/react-toastify/issues/580/hovercard" href="https://snyk.io/redirect/github/fkhadra/react-toastify/issues/580">#580</a></li> <li>prevent clash with ios native gesture <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="511805272" data-permission-text="Title is private" data-url="fkhadra/react-toastify#397" data-hovercard-type="issue" data-hovercard-url="/fkhadra/react-toastify/issues/397/hovercard" href="https://snyk.io/redirect/github/fkhadra/react-toastify/issues/397">#397</a></li> <li>fix toast when a word is too long <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1425266300" data-permission-text="Title is private" data-url="fkhadra/react-toastify#864" data-hovercard-type="pull_request" data-hovercard-url="/fkhadra/react-toastify/pull/864/hovercard" href="https://snyk.io/redirect/github/fkhadra/react-toastify/pull/864">#864</a></li> <li>fix missing types declarations in exports <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1384747418" data-permission-text="Title is private" data-url="fkhadra/react-toastify#843" data-hovercard-type="issue" data-hovercard-url="/fkhadra/react-toastify/issues/843/hovercard" href="https://snyk.io/redirect/github/fkhadra/react-toastify/issues/843">#843</a></li> <li>fix <code>toast.done</code> not dismissing toast <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1403104391" data-permission-text="Title is private" data-url="fkhadra/react-toastify#853" data-hovercard-type="issue" data-hovercard-url="/fkhadra/react-toastify/issues/853/hovercard" href="https://snyk.io/redirect/github/fkhadra/react-toastify/issues/853">#853</a></li> <li>fix cursor when close on click is false <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1374976459" data-permission-text="Title is private" data-url="fkhadra/react-toastify#839" data-hovercard-type="issue" data-hovercard-url="/fkhadra/react-toastify/issues/839/hovercard" href="https://snyk.io/redirect/github/fkhadra/react-toastify/issues/839">#839</a></li> </ul> <h2><g-emoji class="g-emoji" alias="rotating_light" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f6a8.png">🚨</g-emoji> Deprecated API</h2> <p>Added deprecation notice for the API below. They will be removed in the next major release</p> <table> <thead> <tr> <th>API</th> <th>Why</th> <th>Alternative</th> </tr> </thead> <tbody> <tr> <td><code>onClick</code></td> <td>Not used that much, it's increasing the API surface for nothing</td> <td>Can easily be implemented in userland. Just render a react component and attach the handler to it. <code>toast(<div onClick={doSomething}>hello</div>)</code></td> </tr> <tr> <td><code>onOpen</code></td> <td>Does not play well with <code>useEffect</code> behavior in react18 (runs twice in dev mode) see <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1205306489" data-permission-text="Title is private" data-url="fkhadra/react-toastify#741" data-hovercard-type="issue" data-hovercard-url="/fkhadra/react-toastify/issues/741/hovercard" href="https://snyk.io/redirect/github/fkhadra/react-toastify/issues/741">#741</a></td> <td>A better approach is to use <code>toast.onChange</code> see <a href="https://fkhadra.github.io/react-toastify/listen-for-changes/" rel="nofollow">https://fkhadra.github.io/react-toastify/listen-for-changes/</a></td> </tr> <tr> <td><code>onClose</code></td> <td>Does not play well with <code>useEffect</code> behavior in react18 (runs twice in dev mode) see <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1205306489" data-permission-text="Title is private" data-url="fkhadra/react-toastify#741" data-hovercard-type="issue" data-hovercard-url="/fkhadra/react-toastify/issues/741/hovercard" href="https://snyk.io/redirect/github/fkhadra/react-toastify/issues/741">#741</a></td> <td>A better approach is to use <code>toast.onChange</code> see <a href="https://fkhadra.github.io/react-toastify/listen-for-changes/" rel="nofollow">https://fkhadra.github.io/react-toastify/listen-for-changes/</a></td> </tr> <tr> <td><code>toast.POSITION</code></td> <td>Reduce bundle size :)</td> <td>Thanks to typescript, we now have autocomplete</td> </tr> <tr> <td><code>toast.TYPE</code></td> <td>Reduce bundle size :)</td> <td>Thanks to typescript, we now have autocomplete</td> </tr> </tbody> </table> <h2><g-emoji class="g-emoji" alias="gear" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/2699.png">⚙️</g-emoji> Chore</h2> <ul> <li>bump dependencies</li> <li>refactor internal</li> </ul> </li> <li> <b>9.0.8</b> - <a href="https://snyk.io/redirect/github/fkhadra/react-toastify/releases/tag/v9.0.8">2022-08-07</a></br><h1>Release notes</h1> <h2><g-emoji class="g-emoji" alias="lady_beetle" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f41e.png">🐞</g-emoji>Bugfixes</h2> <ul> <li>fix draggable in strict mode <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1228656148" data-permission-text="Title is private" data-url="fkhadra/react-toastify#752" data-hovercard-type="issue" data-hovercard-url="/fkhadra/react-toastify/issues/752/hovercard" href="https://snyk.io/redirect/github/fkhadra/react-toastify/issues/752">#752</a></li> <li>fix sass import <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1255286931" data-permission-text="Title is private" data-url="fkhadra/react-toastify#771" data-hovercard-type="issue" data-hovercard-url="/fkhadra/react-toastify/issues/771/hovercard" href="https://snyk.io/redirect/github/fkhadra/react-toastify/issues/771">#771</a></li> <li>fix progress bar overflow for WebKit browser(safari, ios...) <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1299896074" data-permission-text="Title is private" data-url="fkhadra/react-toastify#791" data-hovercard-type="issue" data-hovercard-url="/fkhadra/react-toastify/issues/791/hovercard" href="https://snyk.io/redirect/github/fkhadra/react-toastify/issues/791">#791</a></li> <li>fix dismissed toasts while the container is unmounted still appear when the container is mounted <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1327813083" data-permission-text="Title is private" data-url="fkhadra/react-toastify#811" data-hovercard-type="issue" data-hovercard-url="/fkhadra/react-toastify/issues/811/hovercard" href="https://snyk.io/redirect/github/fkhadra/react-toastify/issues/811">#811</a></li> <li>fix AutoClose doesn't work on update <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1326132465" data-permission-text="Title is private" data-url="fkhadra/react-toastify#810" data-hovercard-type="issue" data-hovercard-url="/fkhadra/react-toastify/issues/810/hovercard" href="https://snyk.io/redirect/github/fkhadra/react-toastify/issues/810">#810</a> <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1282846074" data-permission-text="Title is private" data-url="fkhadra/react-toastify#782" data-hovercard-type="issue" data-hovercard-url="/fkhadra/react-toastify/issues/782/hovercard" href="https://snyk.io/redirect/github/fkhadra/react-toastify/issues/782">#782</a> <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1156837912" data-permission-text="Title is private" data-url="fkhadra/react-toastify#720" data-hovercard-type="issue" data-hovercard-url="/fkhadra/react-toastify/issues/720/hovercard" href="https://snyk.io/redirect/github/fkhadra/react-toastify/issues/720">#720</a></li> </ul> <h2>Chore</h2> <ul> <li>master branch renamed to main <g-emoji class="g-emoji" alias="sparkling_heart" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f496.png">💖</g-emoji></li> </ul> </li> <li> <b>9.0.7</b> - <a href="https://snyk.io/redirect/github/fkhadra/react-toastify/releases/tag/v9.0.7">2022-07-19</a></br><h1>Release note</h1> <h2>Bugfix</h2> <ul> <li>fix memory leak when multiple containers are used <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1259604572" data-permission-text="Title is private" data-url="fkhadra/react-toastify#772" data-hovercard-type="issue" data-hovercard-url="/fkhadra/react-toastify/issues/772/hovercard" href="https://snyk.io/redirect/github/fkhadra/react-toastify/issues/772">#772</a>, thanks to <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/roblotter/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://snyk.io/redirect/github/roblotter">@ roblotter</a></li> </ul> <h2>Chore</h2> <ul> <li>build artifacts are no longer minified. This was causing issues with some bundlers like vitejs <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1307006946" data-permission-text="Title is private" data-url="fkhadra/react-toastify#797" data-hovercard-type="issue" data-hovercard-url="/fkhadra/react-toastify/issues/797/hovercard" href="https://snyk.io/redirect/github/fkhadra/react-toastify/issues/797">#797</a></li> </ul> </li> </ul> from <a href="https://snyk.io/redirect/github/fkhadra/react-toastify/releases">react-toastify GitHub release notes</a> </details> </details> <details> <summary><b>Commit messages</b></summary> </br> <details> <summary>Package name: <b>react-toastify</b></summary> <ul> <li><a href="https://snyk.io/redirect/github/fkhadra/react-toastify/commit/94a36ff04e1cc8de6b2aa588e207a47ba1188d39">94a36ff</a> 9.1.3</li> <li><a href="https://snyk.io/redirect/github/fkhadra/react-toastify/commit/f0e64cc4da0db8385401a47e11eb96c016682f7d">f0e64cc</a> partial fix #858 #952</li> <li><a href="https://snyk.io/redirect/github/fkhadra/react-toastify/commit/74b320ad627d42fed5f6646477daede117db69d2">74b320a</a> add use client to generated output</li> <li><a href="https://snyk.io/redirect/github/fkhadra/react-toastify/commit/0edd49a250248343263b917db3dbc26bd2c2d2b3">0edd49a</a> bump deps</li> <li><a href="https://snyk.io/redirect/github/fkhadra/react-toastify/commit/bbe05c78e430fa0075a297fcf7201c6b8774bf23">bbe05c7</a> output type first</li> <li><a href="https://snyk.io/redirect/github/fkhadra/react-toastify/commit/277deee6a3fc6b709e3a81971adfa2040cf24942">277deee</a> Update CONTRIBUTING.md</li> <li><a href="https://snyk.io/redirect/github/fkhadra/react-toastify/commit/378afe67ea67a08673a1539c20eae358febc39cb">378afe6</a> Move `types` condition to the front of the `addons/use-notification-center` entry</li> <li><a href="https://snyk.io/redirect/github/fkhadra/react-toastify/commit/97d9afc48c6e2ef0f6240842700251b8b6e64cd9">97d9afc</a> update copyright year</li> <li><a href="https://snyk.io/redirect/github/fkhadra/react-toastify/commit/321a3455ab74a84a6719335db601e72ecc16c2b0">321a345</a> 9.1.2</li> <li><a href="https://snyk.io/redirect/github/fkhadra/react-toastify/commit/12cbc6984d83f1f2c08bdb773442da9c1f0f645d">12cbc69</a> (chore): change type prop to optional</li> <li><a href="https://snyk.io/redirect/github/fkhadra/react-toastify/commit/100044d8e4677ca524a4966afbca3265e53c67bb">100044d</a> fix invalid translate #925</li> <li><a href="https://snyk.io/redirect/github/fkhadra/react-toastify/commit/fb7126ab64c06a7b7dac043f9e30dffd7278c432">fb7126a</a> fix autoClose doesn't work on update #918</li> <li><a href="https://snyk.io/redirect/github/fkhadra/react-toastify/commit/11888ce7e5a62743434de216c2be3a68bb7ba8a1">11888ce</a> fix resetting options #921 #920</li> <li><a href="https://snyk.io/redirect/github/fkhadra/react-toastify/commit/eca19e9066c92a9ab102532f85e04aebd9a1e0c7">eca19e9</a> chore: bump dependencies</li> <li><a href="https://snyk.io/redirect/github/fkhadra/react-toastify/commit/eb407af221242df2e39742d5acd0f7a4e7f77872">eb407af</a> 9.1.1</li> <li><a href="https://snyk.io/redirect/github/fkhadra/react-toastify/commit/80bf024d2f72fe6ac55a437ae334f3e8393ec59f">80bf024</a> fix style not applied properly #870</li> <li><a href="https://snyk.io/redirect/github/fkhadra/react-toastify/commit/e5074908afaafe78ce609562cfffbd5990897de6">e507490</a> 9.1.0</li> <li><a href="https://snyk.io/redirect/github/fkhadra/react-toastify/commit/e8cac357c0ceaf45436d10bc83c71a8ba6225410">e8cac35</a> allow to specify TData for update</li> <li><a href="https://snyk.io/redirect/github/fkhadra/react-toastify/commit/f33823df3342057b60b513aefa0473f07729de3f">f33823d</a> clean a bit</li> <li><a href="https://snyk.io/redirect/github/fkhadra/react-toastify/commit/80fab3c163a9140477d6c4452819da041f58c648">80fab3c</a> deprecate onClick</li> <li><a href="https://snyk.io/redirect/github/fkhadra/react-toastify/commit/3afe7efcb3c8bba8776934ee1ba193d4b1b1ce3b">3afe7ef</a> remove isNil util</li> <li><a href="https://snyk.io/redirect/github/fkhadra/react-toastify/commit/54e397af872ff69476098b4ddd17897c499b53d1">54e397a</a> remove excessive validation</li> <li><a href="https://snyk.io/redirect/github/fkhadra/react-toastify/commit/4952d948ec8647a705ec905074c51e2559f4f77f">4952d94</a> Revert "alias requestAnimationFrame"</li> <li><a href="https://snyk.io/redirect/github/fkhadra/react-toastify/commit/498c1694b9fb0fa74686cdd75f3c02e8b571b426">498c169</a> shorten declaration</li> </ul> <a href="https://snyk.io/redirect/github/fkhadra/react-toastify/compare/307e78bdd92151709bfc16de1cfcee91e54dab92...94a36ff04e1cc8de6b2aa588e207a47ba1188d39">Compare</a> </details> </details> <hr/> **Note:** *You are seeing this because you or someone else with access to this repository has authorized Snyk to open upgrade PRs.* For more information: <img src="https://api.segment.io/v1/pixel/track?data=eyJ3cml0ZUtleSI6InJyWmxZcEdHY2RyTHZsb0lYd0dUcVg4WkFRTnNCOUEwIiwiYW5vbnltb3VzSWQiOiIxZGI1ZDdkMS1lZDMyLTRiMDUtODRjMC0zOGE1NjRhNzcyNjkiLCJldmVudCI6IlBSIHZpZXdlZCIsInByb3BlcnRpZXMiOnsicHJJZCI6IjFkYjVkN2QxLWVkMzItNGIwNS04NGMwLTM4YTU2NGE3NzI2OSJ9fQ==" width="0" height="0"/> 🧐 [View latest project report](https://app.snyk.io/org/mtes-mct/project/afb3e19a-88e3-4a0e-9409-d0f9cfdc75b5?utm_source=github&utm_medium=referral&page=upgrade-pr) 🛠 [Adjust upgrade PR settings](https://app.snyk.io/org/mtes-mct/project/afb3e19a-88e3-4a0e-9409-d0f9cfdc75b5/settings/integration?utm_source=github&utm_medium=referral&page=upgrade-pr) 🔕 [Ignore this dependency or unsubscribe from future upgrade PRs](https://app.snyk.io/org/mtes-mct/project/afb3e19a-88e3-4a0e-9409-d0f9cfdc75b5/settings/integration?pkg=react-toastify&utm_source=github&utm_medium=referral&page=upgrade-pr#auto-dep-upgrades) <!--- (snyk:metadata:{"prId":"1db5d7d1-ed32-4b05-84c0-38a564a77269","prPublicId":"1db5d7d1-ed32-4b05-84c0-38a564a77269","dependencies":[{"name":"react-toastify","from":"9.0.7","to":"9.1.3"}],"packageManager":"npm","type":"auto","projectUrl":"https://app.snyk.io/org/mtes-mct/project/afb3e19a-88e3-4a0e-9409-d0f9cfdc75b5?utm_source=github&utm_medium=referral&page=upgrade-pr","projectPublicId":"afb3e19a-88e3-4a0e-9409-d0f9cfdc75b5","env":"prod","prType":"upgrade","vulns":[],"issuesToFix":[],"upgrade":[],"upgradeInfo":{"versionsDiff":6,"publishedDate":"2023-05-14T18:56:17.373Z"},"templateVariants":[],"hasFixes":false,"isMajorUpgrade":false,"isBreakingChange":false,"priorityScoreList":[]}) --->
Do you want to request a feature or report a bug?
bug
What is the current behavior?
Using react-toastify with
@vitejs/plugin-react v2.0.0
andvite v3.0.0
throwsReferenceError: React is not defined
only in Production.After getting the error, I enabled sourcemap and found the error in
react-toastify
esm build.If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your CodeSandbox (https://codesandbox.io/s/new) example below:
Use
@vitejs/plugin-react v2.0.0
andvite v3.0.0
and usetoast.error('message')
and you'll get the errorWhat is the expected behavior?
It shouldn't throw.
Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
It works in both react 17 and 18 when using vite v2 but it's throwing in vite 3 as vite 3 uses esm.
I'm not sure if it's a vitejs plugin but or react-toastify. Lmk should I create the issue in vitejs plugin instead.
The text was updated successfully, but these errors were encountered: