Error: React is not defined

[imranbarbhuiya]

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 and vite v3.0.0 throws
ReferenceError: 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 and vite v3.0.0 and use toast.error('message') and you'll get the error

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

[fkhadra]

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

[imranbarbhuiya]

I'm using v9.0.5

[mehmetonder]

I get the same error using the newly released v9.0.6 (with @vitejs/plugin-react v2.0.0 and vite v3.0.0).

[fkhadra]

@imranbarbhuiya would it be possible to reproduce your issue in code sandbox or share a repo? Thanks

[fkhadra]

It seems to work just fine for me, so I believe it has something to do with the configuration

https://github.com/fkhadra/vite-toastify

[pitang1965]

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.

• pitang1965/pitang-todo@a85ecb2
• Enter email and press button

[imranbarbhuiya]

It seems to work just fine for me, so I believe it has something to do with the configuration

fkhadra/vite-toastify

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.

[pitang1965]

I have seen no issues in the development environment, only with Netlify.

[fkhadra]

You're right @imranbarbhuiya didn't see that the issue was just happening in production.

[fkhadra]

@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'
  })]
})

[fkhadra]

@imranbarbhuiya may I ask you to try to install yarn add [email protected] and see if it fixes your issue without changing the jsxRuntime. Thank you

[imranbarbhuiya]

yeah sure lemme try

[imranbarbhuiya]

No still the same error. I just upgraded my vite to 3.0.2 as I saw they fixed an esm issue but still, [email protected] with [email protected] throws the same error.

[fkhadra]

@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.
You can even see it running there https://62d5c1ea2d484c09063cb367--heartfelt-cupcake-0c67ab.netlify.app/

[imranbarbhuiya]

Yeah yarn was resolving it to 9.0.6. I just tried by pinning the version and it worked. Thanks.

[fkhadra]

Awesome I'll publish a new version tomorrow then

[fkhadra]

@imranbarbhuiya pushed v9.0.7

[szymonhel]

I have the same issue in version 9.1.1. 9.0.7 works fine.

[vincentteyssier]

Same issue on 9.1.2. Happens only after build once pushed to firebase, on local dev it works fine

[szymonhel]

@fkhadra Can we reopen this issue if the problem still exists?

[asgharh24]

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