2

I'm using create-react-app and wherever there's JavaScript in a tagged template literal and it's commented out (like in the example below), it will still run (it will apply the reset, in this case).

Why does that happen and how can it be prevented?

import { createGlobalStyle } from "styled-components";
import reset from "styled-reset";

export default createGlobalStyle`
  /* the following line will run even though it's commented out */
  /* ${reset} */
`

It seems that this is an issue with Webpack/Babel configuration in create-react-app? Because I can't replicate that on this sandbox:

https://codesandbox.io/s/p7qx411xvq

Using: styled-components@4.2.0

zok
  • 6,065
  • 10
  • 43
  • 65
  • Could you give us here the transpiled babel code ? – Orelsanpls Apr 26 '19 at 14:14
  • 1
    Dupe of this? https://stackoverflow.com/questions/30766441/reactjs-how-to-use-comments – mplungjan Apr 26 '19 at 14:16
  • The "comment" is inside a string and is not a comment. Instead try commenting out the token inside the interpolation? `${/*reset*/}` – evolutionxbox Apr 26 '19 at 16:12
  • @mplungjan I don't think that is a good dupe target. That question is dealing with commenting out react components, this is a template string misunderstanding. – evolutionxbox Apr 26 '19 at 16:13
  • @mplungjan are you sure? The issue here is the interpolations inside a tagged template literal are still being run, the dupe target is how to comment _inside JSX_. This question doesn't use JSX. --- The suggestion I give is different due to the dollar sign before the first curly brace. – evolutionxbox Apr 26 '19 at 16:30
  • But the solution is to always comment `{/* ..... */}` regardless of $ or () – mplungjan Apr 26 '19 at 16:31
  • @mplungjan isn't that only a coincidence of JSX syntax? JSX just so happens to use curlys to evaluate JS expressions. – evolutionxbox Apr 26 '19 at 16:36

0 Answers0