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.

[Prettier API] crashing in printJSXChildren with custom parser and JSX whitespace

See original GitHub issue

I’m trying to avoid parsing some text again after generating the AST with babylon, so I’m using this code to return the ast directly in parsing:

https://runkit.com/darknoon/5a9ef2674d0ffc001297fd53

It works for most cases, but if there is a JSX element with extra whitespace, I get this exception:

TypeError: Cannot read property 'split' of undefined

You can see the full exception on the runkit above.

Input:

const var = <A>  </A>;

Output: throws a TypeError

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
duailibecommented, Mar 7, 2018

@darknoon Actually it did fix the issue

 FAIL  test/editXCoord.test.js
  ✓ find first comment in canvas (14ms)
  ✕ output with no change is same as input (37ms)
  ✕ change value of x to x+1 (27ms)

The "output with no change is same as input" test fails because Prettier looks at the original code to detect newlines, but you don’t pass anything there:

https://github.com/darknoon/auto-code-react/blob/17000d735ee212524fb759cf009398452a309dd8/test/editXCoord.test.js#L55-L60

If you change prettier.format('', { to prettier.format(text, {, that test now passes:

 FAIL  test/editXCoord.test.js
  ✓ find first comment in canvas (18ms)
  ✓ output with no change is same as input (37ms)
  ✕ change value of x to x+1 (28ms)

Now the "change value of x to x+1" is the only one failing and inspecting that, it’s because you change the expression of an expression container in

https://github.com/darknoon/auto-code-react/blob/17000d735ee212524fb759cf009398452a309dd8/test/editXCoord.test.js#L92-L94

If you print the before/after of that NumericLiteral what you get is:

// before
    Node {
      type: 'NumericLiteral',
      start: 277,
      end: 278,
      loc: 
       SourceLocation {
         start: Position { line: 17, column: 16 },
         end: Position { line: 17, column: 17 } },
      extra: { rawValue: 0, raw: '0' },
      value: 0 }

// after
    { type: 'NumericLiteral', value: 1 }

If you check how Prettier prints NumericLiterals, you see it relies on node.extra.raw:

https://github.com/prettier/prettier/blob/f6f6f2e2eaa8d784ddb54e9219416e37cc3b94ec/src/language-js/printer-estree.js#L1309-L1310

0reactions
darknooncommented, Mar 9, 2018

@duailibe thanks for your help!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Options - Prettier
Developers often use whitespace to break up long lines for readability. In practice, the average line length often ends up well below the...
Read more >
Prettier kills non-breaking spaces in JSX · Issue #5077 - GitHub
Perhaps because I use the babel-eslint parser? Expected behavior: If I have literal unbreakable whitespace in my contents, it's for a reason.
Read more >
How to make VSCode and Prettier extension to ignore React ...
It's an opinionated tool, which means its formatting style isn't customizable, and it's been intentionally made that way. Don't use Prettier ...
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