Server-side Rendering with React Components (Hybrid approach)

[kumarrk5]

I am trying to setup asp.net core project with server-side rendering concept using react components(Hybrid way).

I can't use third party libraries in server-side rendering.
for example, https://reactstrap.github.io/ library throws this error.

"React.Exceptions.ReactScriptLoadException: Error while loading "~dist/server.bundle.js": Script Document [2]: Uncaught ReferenceError: Map is not defined at line: 2880 column: 69.
Line: 2880"

I attached the relevant screenshots here. please check this. Did I miss anything ?

error:

package file:

server-side component call in home view

startup file register

webpack config

expose-loader

mapping of server-side rendering

[dustinsoftware]

What JS engine are you using? I think the default fallback engine (internet explorer) does not support Map, which is an ES2015 language features. Check out the docs for switching to chakra core or v8, it’s possible you are missing a runtime dependency such as VC2015 which is preventing the V8 DLLs from loading.

…

On Mon, Jul 16, 2018 at 02:59, rkjeevakumar ***@***.***> wrote: I am trying to setup asp.net core project with server-side rendering concept using react components(Hybrid way). I can't use third party libraries in server-side rendering. for example, https://reactstrap.github.io/ <http://url> library throws this error. *"React.Exceptions.ReactScriptLoadException: Error while loading "~dist/server.bundle.js": Script Document [2]: Uncaught ReferenceError: Map is not defined at line: 2880 column: 69. Line: 2880"* I attached the relevant screenshots here. please check this. Did I miss anything ? error: [image: error] <https://user-images.githubusercontent.com/8487243/42752492-a6347666-8920-11e8-8b64-1e0a6e1c4365.PNG> package file: [image: package file] <https://user-images.githubusercontent.com/8487243/42752487-a558433a-8920-11e8-9e96-edf8302c993f.PNG> server-side component call in home view [image: server-side component call in home view] <https://user-images.githubusercontent.com/8487243/42752489-a59163a4-8920-11e8-9bbc-094417728f30.PNG> startup file register [image: startup file register] <https://user-images.githubusercontent.com/8487243/42752490-a5c5a4ac-8920-11e8-8b24-849f56a7a1b9.PNG> webpack config [image: webpack config] <https://user-images.githubusercontent.com/8487243/42752491-a5fca308-8920-11e8-8457-c3e22a48934b.PNG> expose-loader [image: expose-loader] <https://user-images.githubusercontent.com/8487243/42752493-a66759c8-8920-11e8-9a25-cc26ff5b0b06.PNG> mapping of server-side rendering [image: mapping of server-side rendering] <https://user-images.githubusercontent.com/8487243/42752495-a69ff670-8920-11e8-85b5-ecf9a1999284.PNG> — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#572>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AA5hFnLH3CEQxhbPhMY2WRrG-oTZ7H_8ks5uHGP6gaJpZM4VQ2s0> .

[kumarrk5]

https://github.com/Taritsyn/JavaScriptEngineSwitcher/wiki/Registration-of-JS-engines

I followed above link to add JS engine, but i got another issue Now i got this error
"HTTP Error 502.3 - Bad Gateway"
Can you please some other link to resolve this issue ? or some steps ...

Refer these screenshots...

[dyamon-cz]

Solution is to install ChakraCore NuGet package. Follow the steps in the documentation here https://reactjs.net/guides/chakracore.html.

[dustinsoftware]

You can check out the samples in this repo, they should all be working. At this point it doesn’t seem like this is a library bug so I’m closing this issue.. let me know if you have trouble getting the samples to run.