Error for simple component conversion

[OliverJAsh]

Property value expected type of string but got null

TS 3.1.6 VS Code 1.30.2 Extension version 4.2.3

import React, { Component } from 'react';

class App extends Component<{}> {
  render() {
    return (
      <div />
    );
  }
}

[borislit]

Hey @OliverJAsh ! Thanks for the report. Ill check it out right away. Keep in mind, currently, there is an issue in publishing a new version to the market.

[borislit]

@OliverJAsh IUnfortunatly i was un able to reproduce (see gif below). Perhaps some details are missing?

[ecbrodie]

@borislit I also got this error when doing a simple conversion, although for me it was the other way around. It was in a .tsx file, so not sure if Typescript is causing an issue here. Here's some code to try to reproduce the issue, via converting from a stateless to a stateful component (with all code from export default function Test to the end of the file highlighted):

import React from "react"

type Props = {
  foo: string
}

export default function Test({ foo = "bar" }: Props) {
  return <div>Foo = {foo}</div>
}

My workspace:

• VSCode 1.31.1
• vscode-glean 4.6.0
• MacOS 10.14.3

[borislit]

Hey @ecbrodie ! Ill give it another go later today and keep you posted! Thanks for reporting!

[borislit]

@ecbrodie i found the issue. It has to do with incorrect handling of default prop values. Im working on a fix. meanwhile, if u remove the = "bar" it'll work

[borislit]

@ecbrodie https://github.com/wix/vscode-glean/commit/3cf1c6589359902988566ac2fa8cc74dc6fd3881 should fix the issue. It also adds support for defaultProps. Tell me how it goes. Thanks

[ecbrodie]

@borislit I just checked the latest version of Glean and it now works without error when there are default prop values. Thank you for the quick turnaround.

Also, I checked the example from the OP (@OliverJAsh) and that conversion also works without error. Thus, with default props, I have confirmed that stateful-to-stateless and stateless-to-stateful conversions are working just fine. I think this issue can be closed.

[borislit]

Thanks @ecbrodie ! Glad to help!

[OliverJAsh]

I'm still running into this error, using 5.0.1.

I also get the same error when I try "wrap with useMemo":

And "wrap with useEffect" produces a lot of weird code. Input:

import * as React from 'react';

const App = () => {
    Math.random();
    return <div />;
};

Output:

import * as React from 'react';

const App = () => {
    var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
  return a;
};

React.useEffect(() => {
  () => {
    Math.random();
  };
});
    return <div />;
};

[borislit]

Hey @OliverJAsh ! Thanks for the report. Will have a look ASAP

[techsin]

Also it shows up in non react code everywhere.