Server-side rendering
bryan opened this issue · comments
Is there anyway to get this working for server-side rendering?
window is undefined is the error that comes up.
Could you give me the full stack trace? That would tell me whether this is an issue with my code or with the underlying TradingView script 😄
Thanks for the quick reply! Any instance of window and document won't be able to be rendered on the server, so it'll always come back as undefined.
window is not defined
ReferenceError: window is not defined
at /node_modules/react-tradingview-widget/dist/manifest.js:1:154
at Object.<anonymous> (/node_modules/react-tradingview-widget/dist/manifest.js:1:1401)
at Module._compile (module.js:660:30)
at Module._extensions..js (module.js:671:10)
at Object.require.extensions.(anonymous function) [as .js] (/node_modules/babel-register/lib/node.js:152:7)
at Module.load (module.js:573:32)
at tryModuleLoad (module.js:513:12)
at Function.Module._load (module.js:505:3)
at Module.require (module.js:604:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (/node_modules/react-tradingview-widget/index.js:1:63)
at Module._compile (module.js:660:30)
at Module._extensions..js (module.js:671:10)
at Object.require.extensions.(anonymous function) [as .js] (/node_modules/babel-register/lib/node.js:152:7)
at Module.load (module.js:573:32)
at tryModuleLoad (module.js:513:12)
at Function.Module._load (module.js:505:3)
at Module.require (module.js:604:17)
at require (internal/module.js:11:18)
Well, in that case I don't think it's possible to fix this issue because this component is just a wrapper. Internally it uses TradingView's script, which uses document.getElementById I suppose.
Is it possible for you to make sure that that script is loaded & available (via a script tag) before the TradingViewWidget component is instantiated? If so, I might be able to make it work 😄
It's possible. You just have to not any client-side related scripts when you detect it being a server. Check out this wrapper for Twitter embedding and their workaround: andrewsuzuki/react-twitter-widgets#7
I see. Will look into it!
Hi, @bryan could you test the ssr-fix branch for me?
You can use npm link in the repo & npm link react-tradingview-widget in the server side rendered app.
It does assume https://s3.tradingview.com/tv.js is loaded before the widget is.
Sure. I'll take a look when I have time sometime this week.
Or if you want to try it yourself and debug it at your pace, try it with this starter pack: https://github.com/iaincollins/nextjs-starter
Next.js is a pretty popular SSR framework.
When #ssr-fix will be released?
@bryan Could you still take a look at it or shall I do it?
Let me give you result of my case,
I did "link" what you said above, then did "npm run build" in the repo.
Here is my situation.
/Users/sungwooyang/Documents/work/madtail/react-tradingview-widget/dist/manifest.js:3
/******/ var parentJsonpFunction = window["webpackJsonpreact_tradingview_widget"];
^
ReferenceError: window is not defined
at /Users/sungwooyang/Documents/work/madtail/react-tradingview-widget/dist/manifest.js:3:43
at Object.<anonymous> (/Users/sungwooyang/Documents/work/madtail/react-tradingview-widget/dist/manifest.js:101:10)
...
It looks, server side node still can't find "window".
I hope this will help you. Thanks.
I added codes and tested. It's working for me.
Please check this.
I believe SSR is working on the ssr-fix branch (thanks to @yangga). I'll run some last tests this afternoon and then release it 😄
I can't wait this :)
Released! 😄