Skip to content
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.

Sign up for GitHub

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

Jump to bottom

<noscript> on server side rendering #1324

Closed
mauricioklein opened this issue Nov 21, 2016 · 8 comments
Closed

<noscript> on server side rendering #1324

mauricioklein opened this issue Nov 21, 2016 · 8 comments

Comments

@mauricioklein
Copy link

mauricioklein commented Nov 21, 2016 •
edited
Loading

Hello!

I'm facing a strange behavior:
All my routes is working fine in dev mode, and everything is being rendered as expected.

However, when I run production mode and disable JavaScript from browser, the HTML component is rendered correctly, however the <body> renders the component as a <noscript> tag, and nothing is displayed.

After some research, I found this can be a problem with react-router, meaning that the route didn't match, which is not the case, because on dev mode it works well.

Any idea what could be the problem?
How can I debug this error?

Thanks in advance for any support!

PS: my server.js and routes.js files are available on this gist.
The only customization on server.js was to remove the mocked API related code, unnecessary for us.
@mauricioklein mauricioklein mentioned this issue Nov 21, 2016
Closed
@mauricioklein
Copy link
Author

mauricioklein commented Nov 22, 2016 •
edited
Loading

By the way, I've made the most simple test possible:

A dummy component:

import React from 'react';

const HelloWorld = () => (
  <h1>Hello World!</h1>
);

export default HelloWorld;

and a single route:

<Route path="/" component={HelloWorld} />

Acessing / with JS enabled in browser, I got the correct hello world message.
However, disabling JS on browser, I still get a blank page, with <noscript> on page body.

So, it seems the problem is related to how server side is dealing with routes definition.

@mauricioklein
Copy link
Author

mauricioklein commented Nov 22, 2016 •
edited
Loading

@erikras Could you please take a look at this?
Would be so kind have an opinion from your part.
Thanks 👍

@mauricioklein
Copy link
Author

Another discovery:
With both JS enable and disabled, the server renders the element as a <noscript> element.
However, with JS enabled, client is able to interpret it and render correctly.
Without JS, nothing is shown.

@TravnikovDev
Copy link

Yeah, i stuck at that moment too

@TravnikovDev
Copy link

TravnikovDev commented Jan 20, 2017 •
edited
Loading

Change version of "redux-async-connect" to "1.0.0-rc3" helped me

@hoseinz3
Copy link

@TPABHuKOB thanks for your beautiful answer

@bertho-zero
Copy link

You can also use https://www.npmjs.com/package/redux-connect that is up to date.

@janziemba
Copy link

@TPABHuKOB Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@TravnikovDev @janziemba @bertho-zero @mauricioklein @hoseinz3