Error when transforming escaped quotes

[nathanforce]

Hello,

I've originally run into this issue when building my code using Vite, but reproduced with just esbuild so posting here. When transforming the following code I get an error:

const { transformSync } = require('esbuild');

const code =
  '              <span>\n' +
  '                <Trans id="Crisis Text Line: Text \\"START\\"" />\n' +
  '              </span>\n';

transformSync(code, {
  loader: 'tsx'
})

Error: Transform failed with 1 error:
<stdin>:2:56: error: Expected ">" but found "\"\""
    at failureErrorWithLog (/Users/nforce/dev/quartet/coop/node_modules/esbuild/lib/main.js:1124:15)
    at /Users/nforce/dev/quartet/coop/node_modules/esbuild/lib/main.js:1007:33
    at /Users/nforce/dev/quartet/coop/node_modules/esbuild/lib/main.js:541:9
    at handleIncomingPacket (/Users/nforce/dev/quartet/coop/node_modules/esbuild/lib/main.js:624:9)
    at readFromStdout (/Users/nforce/dev/quartet/coop/node_modules/esbuild/lib/main.js:508:7)
    at runServiceSync (/Users/nforce/dev/quartet/coop/node_modules/esbuild/lib/main.js:1414:3)
    at transformSync (/Users/nforce/dev/quartet/coop/node_modules/esbuild/lib/main.js:1270:3)
    at Object.<anonymous> (/Users/nforce/dev/quartet/coop/apps/patient-web/demo.js:8:16)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10) {
  errors: [
    {
      detail: undefined,
      location: {
        column: 56,
        file: '<stdin>',
        length: 2,
        line: 2,
        lineText: '                <Trans id="Crisis Text Line: Text "START"" />'
      },
      text: 'Expected ">" but found "\\"\\""'
    }
  ],
  warnings: []
}

Repl: https://repl.it/@nathanforce/RemarkableFixedRefactoring

Worth noting that the original code is first run through some i18n tooling that results in the escaped quotes. I'm not sure if the output of that is the culprit here. Original TSX before running through Babel Macro:

    <span>
          <Trans>Crisis Text Line: Text "START"</Trans>
    </span>

Happy to help any way I can!

Cheers

[evanw]

But Babel also throws an error on this (code here):

/repl.jsx: Expecting Unicode escape sequence \uXXXX (2:44)

  1 | <span>
> 2 |   <Trans id="Crisis Text Line: Text \"START\"" />
    |                                             ^
  3 | </span>
  4 |

as does TypeScript (code here):

example.tsx:2:43 - error TS1127: Invalid character.

2   <text id="Crisis Text Line: Text \"START\""/>
                                            ^

Found 1 error.

The JSX specification is here: https://facebook.github.io/jsx/. It doesn't say anything about backslash escape characters in strings. The relevant part of the specification is here:

JSXAttribute :

• JSXAttributeName JSXAttributeInitializer_opt

JSXAttributeName :

• JSXIdentifier
• JSXNamespacedName

JSXAttributeInitializer :

• = JSXAttributeValue

JSXAttributeValue :

• " JSXDoubleStringCharacters_opt "
• ' JSXSingleStringCharacters_opt '
• { AssignmentExpression }
• JSXElement
• JSXFragment

JSXDoubleStringCharacters :

• JSXDoubleStringCharacter JSXDoubleStringCharacters_opt

JSXDoubleStringCharacter :

• SourceCharacter but not "

JSXSingleStringCharacters :

• JSXSingleStringCharacter JSXSingleStringCharacters_opt

JSXSingleStringCharacter :

• SourceCharacter but not '

It looks like the problem is that whatever tool you're using is generating invalid JSX code. Quotes in JSX strings need to be escaped with " or " just like HTML.

[marvinhagemeister]

@evanw right on the money! JSX doesn't define any escaping semantics.

To solve this one needs to switch to an expression:

<span>
  <Trans id={`Crisis Text Line: Text "START"`}>...</Trans>
</span>

[nathanforce]

Wow very cool. Thanks for the detailed responses. This all has me wondering how this was working with our existing Webpack/Babel setup.

Thank you very much!