search

scniro / react-codemirror2

Codemirror integrated components for React
MIT License
1.66k stars 193 forks source link

Uncaught ReferenceError: global is not defined #66

Closed linkenneth closed 6 years ago

linkenneth commented 6 years ago

First of all, thanks for taking over maintenance of react-codemirror.

I'm unsure if this is an issue with my setup, but it appears that a relatively recent change to support server-side rendering now breaks client-side rendering. global is not defined in browsers, so line 14 here breaks:

https://github.com/scniro/react-codemirror2/commit/24700c903cdb5f711ab3e949f92c7828081eff64#diff-168726dbe96b3ce427e7fedce31bb0bcR15

Could you please take a look? Looks to be a quick fix to check existence of global if this is not server-rendered.

scniro commented 6 years ago

@linkenneth sound like you may have a webpack issue since that check shouldn't break anything. Check out this SO answer that may apply. I'm guessing you have target: 'node' for your client bundle?

linkenneth commented 6 years ago

Thanks! That seems to be the culprit. I'll close this since this isn't an actual issue anymore.

obadakhalili commented 3 years ago

This is not very convenient since it assumes the use of webpack. For example. If I'm using React with Rollup through Vite there's no way to avoid this issue, thus making your component non-technology-agnostic.

c10b10 commented 3 years ago

I'm running into the same issue. I agree with what @obadakhalili said.

davidwinter commented 3 years ago

I'm using ViteJS (not Webpack) and I was able to get this working, with the related security considerations by adding the following to my index.html in the <head> tag:

<script>window.global = window;</script>

To ensure it passes the Content-Security-Policy I used the hashed value of that new code, and added it to my policy like so:

<meta http-equiv="Content-Security-Policy" content="script-src 'sha256-pQY0fuQAnnVQH5nQfjo80rzGkQzeN3JeAtAJ+1KcD4k=' 'self' blob:">

Hope this helps others trying to get this working outside of Webpack.

Favourz1 commented 1 year ago

@davidwinter How can i get the hashed value of my code?

davidwinter commented 1 year ago

@davidwinter How can i get the hashed value of my code?

echo -n 'window.global = window;' | openssl sha256 -binary | openssl base64

This will give you:

pQY0fuQAnnVQH5nQfjo80rzGkQzeN3JeAtAJ+1KcD4k=
rimmelasghar commented 1 year ago

@davidwinter thanks David it worked for me.