Crash on Self Closing JSX Elements

[crubier]

The tool crashes on js files that contains self closing JSX components such as <div/>

Crash log:

Error: Error replacing tree: The children of the old and new trees were expected to have the same count (7:8).
-- Details --
Path: /Users/vincent/Code/sterblue/packages/apps/cloud/src/containers/__stories__/index.js
Text: "import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\n//import Mission from \"../Mission\";\n\nstoriesOf(\"Containers\", module).add(\"Expert\", () => <Expert />);\nconst match = {\n  params: {\n    id: \"mockId\"\n  }\n};\nstoriesOf(\"Containers\", module).add(\"Mission DontTest\", () => (\n  <Mission match={match} />\n));\n"
Stack: Error: Error replacing tree: The children of the old and new trees were expected to have the same count (7:8).
    at StraightReplacementNodeHandler.handleChildren (/Users/vincent/.config/yarn/global/node_modules/ts-morph/dist/manipulation/nodeHandlers/StraightReplacementNodeHandler.js:26:19)
    at StraightReplacementNodeHandler.handleNode (/Users/vincent/.config/yarn/global/node_modules/ts-morph/dist/manipulation/nodeHandlers/StraightReplacementNodeHandler.js:20:18)
    at Object.doManipulation (/Users/vincent/.config/yarn/global/node_modules/ts-morph/dist/manipulation/manipulations/doManipulation.js:9:21)
    at Object.replaceSourceFileForFilePathMove (/Users/vincent/.config/yarn/global/node_modules/ts-morph/dist/manipulation/manipulations/replaction.js:64:22)
    at SourceFile._moveInternal (/Users/vincent/.config/yarn/global/node_modules/ts-morph/dist/compiler/ast/module/SourceFile.js:273:24)
    at SourceFile.move (/Users/vincent/.config/yarn/global/node_modules/ts-morph/dist/compiler/ast/module/SourceFile.js:246:19)
    at tsAstProject.getSourceFiles.forEach.sourceFile (/Users/vincent/.config/yarn/global/node_modules/js-to-ts-converter/dist/converter/convert.js:38:24)
    at Array.forEach (<anonymous>)
    at Object.convert (/Users/vincent/.config/yarn/global/node_modules/js-to-ts-converter/dist/converter/convert.js:29:35)
    at doConvert (/Users/vincent/.config/yarn/global/node_modules/js-to-ts-converter/dist/js-to-ts-converter.js:62:22)
    at Object.doManipulation (/Users/vincent/.config/yarn/global/node_modules/ts-morph/dist/manipulation/manipulations/doManipulation.js:12:15)
    at Object.replaceSourceFileForFilePathMove (/Users/vincent/.config/yarn/global/node_modules/ts-morph/dist/manipulation/manipulations/replaction.js:64:22)
    at SourceFile._moveInternal (/Users/vincent/.config/yarn/global/node_modules/ts-morph/dist/compiler/ast/module/SourceFile.js:273:24)
    at SourceFile.move (/Users/vincent/.config/yarn/global/node_modules/ts-morph/dist/compiler/ast/module/SourceFile.js:246:19)
    at tsAstProject.getSourceFiles.forEach.sourceFile (/Users/vincent/.config/yarn/global/node_modules/js-to-ts-converter/dist/converter/convert.js:38:24)
    at Array.forEach (<anonymous>)
    at Object.convert (/Users/vincent/.config/yarn/global/node_modules/js-to-ts-converter/dist/converter/convert.js:29:35)
    at doConvert (/Users/vincent/.config/yarn/global/node_modules/js-to-ts-converter/dist/js-to-ts-converter.js:62:22)
    at Object.convertJsToTsSync (/Users/vincent/.config/yarn/global/node_modules/js-to-ts-converter/dist/js-to-ts-converter.js:40:35)
    at Object.<anonymous> (/Users/vincent/.config/yarn/global/node_modules/js-to-ts-converter/dist/cli.js:57:22)

[crubier]

When rewriting them to <div></div> it works

[ericvergnaud]

Hi, this is a showstopper for me (100+ self closing tags).
Any ETA for a fix?

[IkeyBenz]

^^ Same here

[crubier]

I solved this with a good old regex +manual edits on my migration... Not recommended in general but it did the job for me.... good luck!

[IkeyBenz]

Thanks @crubier ! I ended up using a different npm package, react-js-to-ts, to convert my jsx files, and then ran this one to convert everything else. I wrote a short python script to execute the whole conversion.

[gregjacobs]

I believe this is fixed now in v0.17.1, but good suggestion on running react-js-to-ts first

[arikmaor]

Having a similar (or same?) issue
running node.set({ name: 'div' }) (to change Box to div) fails when the element has children that are self closing

// works:
<Box>
  <Icon></Icon>
</Box>

// doesn't work
<Box>
  <Icon />
</Box>