Flow: How to use flow and jsx without importing react in 0.53?

[zerkalica]

Flowtype now react-only? In 0.53 above example generates error: "identifier React. Could not resolve name"

// import React from 'react'

function A(
  props: {a: string;}
) {
  return <div>{props.a}</div>
}

<A a='123' />

try

How to use power of flowtype in jsx pure components without importing react?

[samwgoldman]

Flow has support for the @jsx pragma, but it doesn't work on TryFlow.

See https://github.com/facebook/flow/blob/master/newtests/jsx_pragma/test.js

[zerkalica]

Ok, this workaround works:

//@flow
// @jsx Bar

function Bar<Props>(component: ((props: Props, ...x: any[]) => any) | string, props: Props, ...childs: any[]) {}

function A(
  props: {a: string;}
) {
  return <div>{props.a}</div>
}

<A a="1" />

But how to do same without placing @jsx in each file and without importing Bar?

[vkurchatkin]

@zerkalica Why do you need it? It won't work without importing React anyway.

[zerkalica]

@vkurchatkin

1. Autoimporting react babel-plugin-react-require
2. Simple bridge to react-like jsx-compatible frameworks, like ivi, vue-jsx
3. Framework lockin
4. My experiments with react-free statefull flow-compatible component

Simple counter:

class Counter {
    @mem value = 0
}

export function CounterView(
    _: {},
    {counter}: {
        counter: Counter
    }
) {
    return <div>
        <div>
            Count: {counter.value}
        </div>
        <button onClick={() => { counter.value++ }}>Add</button>
        <button onClick={() => { counter.value = ('error': any) }}>Gen error</button>
    </div>
}
CounterView.deps = [{counter: Counter}]

[vkurchatkin]

I guess the easiest way would be do declare global React.

[zerkalica]

Do you now how to do that?

I try:

// flow-typed/react-stub.js

// @flow
import R from 'react'
declare var React: R

// test.js
//@flow

function A(
  props: {a: string;}
) {
  return <div>{props.a}</div>
}

<A a={1} />

flow does not check errors:

$flow check
Found 0 errors

[vkurchatkin]

Try this: declare var React: $Exports<'react'>;

[zerkalica]

It works, thank you.

[nucleartide]

@vkurchatkin's solution works great, but are there any docs for the @jsx pragma? @samwgoldman

[sobolevn]

I was using this trick to work with flow and vue.
https://github.com/wemake-services/wemake-vue-template/blob/c203e751f9d9ed9cfc411a4cdf56d35fe8a2dda7/template/client/components/ActionBar.vue#L3

Since 0.76 it is not working any more. https://github.com/wemake-services/wemake-vue-template/pull/645

Are there any ideas how to fix it now?

[mrkev]

@sobolevn, @nucleartide I recommend opening a new issue

[sobolevn]

Still no solution https://github.com/facebook/flow/issues/6626

[ArmorDarks]

@mrkev I wonder why it is recommended to open a new issue if this one actually was never resolved?

Recommending declare var React: $Exports<'react'>; sounds like a joke.

[CarmelK]

I found this clean way to work for me, in your .flowconfig file add react.runtime=automatic under [options].