question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Gatsby build adds <!-- --> between string when build (SSR)

See original GitHub issue

Description

When I generate a compound string like this:

...
<td>{someTitle} {somethingElse}</td>
...

Gatsby turns this into:

<td>This is a title<!-- --> <!-- -->300</td>

Steps to reproduce

The issue does not appear when I use the current gatsby new bug-repro https://github.com/gatsbyjs/gatsby-starter-hello-world. However, updating this repro to the latest version causes this error to appear when using build or GATSBY_EXPERIMENTAL_FAST_DEV=true gatsby develop. It does not happen when using gatsby develop.

Gatsby gatsby-starter-hello-world uses:

├── gatsby@2.26.1
├── prettier@2.2.1
├── react@16.13.1
└── react-dom@16.13.1

✅-> String does not contain <!-- --> Minimal repro: https://github.com/shi-rudo/bug-repro-older-no-string-error

Gatsby updated gatsby-starter-hello-world uses:

├── gatsby@2.31.1
├── prettier@2.2.1
├── react@16.14.0
└── react-dom@16.14.0

❌ -> String does now contain <!-- --> Minimal repro: https://github.com/shi-rudo/bug-repro-string-bug

Expected result

<td>This is a title 300</td>

Actual result

<td>This is a title<!-- --> <!-- -->300</td>

Environment

System:
    OS: macOS 10.15.7
    CPU: (4) x64 Intel(R) Core(TM) i5-4570 CPU @ 3.20GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 14.5.0 - ~/.nvm/versions/node/v14.5.0/bin/node
    Yarn: 1.22.0 - /usr/local/bin/yarn
    npm: 6.14.10 - ~/.nvm/versions/node/v14.5.0/bin/npm
  Languages:
    Python: 3.7.6 - /Users/trex/opt/anaconda3/bin/python
  Browsers:
    Chrome: 87.0.4280.141
    Edge: 88.0.705.50
    Safari: 14.0.1
  npmPackages:
    gatsby: ^2.31.1 => 2.31.1
  npmGlobalPackages:
    gatsby-cli: 2.18.0

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
shi-rudocommented, Jan 24, 2021
return (
   <tr>
    <th colSpan={2}>
     <span><b>{title}</b> {weight} g</span>
    </th>
    ...
  )

with more complex layout it leads to strong malformations chrome screenshot

edit: this phenomenon occurs when switching from react to preact.

0reactions
github-actions[bot]commented, Mar 30, 2021

Hey again!

It’s been 60 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it. Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to comment on this issue or create a new one if you need anything else. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜

Read more comments on GitHub >

github_iconTop Results From Across the Web

Gatsby Server Rendering APIs
The file gatsby-ssr.jsx / gatsby-ssr.tsx lets you alter the content of static HTML files as they are being Server-Side Rendered (SSR) by Gatsby...
Read more >
GatsbyJS and Contentful with SSR - Stack Overflow
When you run gatsby build the site (HTML/CSS/JS) is built for you and outputted to the "public" directory. Try going through the official ......
Read more >
How to add vanilla Emotion server-side rendering to Gatsby
In gatsby-ssr.js , we can add something like the following: import { cache } from '@emotion ...
Read more >
Gatsby: The ultimate guide with examples - LogRocket Blog
js. Adding your site to Netlify is as simple as creating an account, linking your GitHub, and clicking the Create site from git...
Read more >
Gatsby 4: Using SSR and DSG - Medium
With static generation or deferred static generation, Gatsby builds the website's files only once. With server-side rendering, however, a server ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found