Noscript tags no longer rendering components in 16.5.0
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 251k
- Forks
- 51.4k
- Avg merge
- 2d 4h
- Merged PRs (30d)
- 53
Description
Do you want to request a feature or report a bug?
Bug
What is the current behavior?
Starting in version 16.4.3, the following code:
<noscript>
<a href="/cat">Cat</a>
<a href="/dog">Dog</a>
</noscript>
is being rendered in the browser as:
<noscript></noscript>
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.
Prior to 16.4.3: https://codesandbox.io/embed/5mww4nzpwp
After 16.4.3: https://codesandbox.io/embed/6v8m4yo303
(The changes are not visible, but if you inspect element you can see that, in the first example, the links are being rendered, and in the second example they're not being rendered.)
What is the expected behavior?
It should render in the browser the same as in the code:
<noscript>
<a href="/cat">Cat</a>
<a href="/dog">Dog</a>
</noscript>
Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
See above, it was working in versions prior to 16.4.3. (I couldn't find a previous issue mentioning this bug. I think it could have been introduced in the fix for https://github.com/facebook/react/issues/11423)
Why is this a problem?
I use a snapshot tool with React to generate a set of static pages from a React project. These pages have less functionality than the full application, but they allow webcrawlers and users who have disabled JavaScript to use the site at a basic level. For example, the code might look like this:
<FancyInteractiveButton linksTo="page">link</FancyInteractiveButton>
<noscript>
<a href="page">link</a>
</noscript>
Preventing components in <noscript> tags from rendering breaks this functionality for users with JavaScript disabled. The generated snapshots no longer contain the links. It also makes the site harder to navigate by webcrawlers, even if they have JavaScript enabled, because they have to be smart enough to use the fancy button instead of following the link.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the behavior using the two linked CodeSandbox examples and compare the rendered DOM before and after React 16.4.3. Trace React's handling of the issue's example, then verify that the links render as expected without regressing the prior behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100