Flow doesn't work with Lerna when importing packages into one another

[rjdlee]

I have a Lerna package containing two different React apps made with Create React App (let's called them App A and App B). One of the apps imports the other one. I want to add Flow support to both apps. To do so, I've installed Flow at the global level.

Flow functions correctly when each app is used separately. However, when I import one of the apps into the other, I get the following error in App B:

Module parse failed: Unexpected token (8:5)
You may need an appropriate loader to handle this file type.
import { AppA } from 'app-a';

type Options = {
    key: string,
    onSuccess: function,

The way I interpret this is that Flow is not processing App A because it is a symlinked dependency (due to Lerna) inside App B. To resolve this, here is what I've tried:

• In the .flowconfig, under [options], add:
  module.name_mapper='^app-a$' -> '<PROJECT_ROOT>/../app-a/src/index.js' where index.js is the entry point for App A. This solution came from: How to apply flow type checking in lerna managed project? lerna/lerna#891
• In the .flowconfig, under [include], add:
  ../app-a/src/index.js
• Rather than using Flow globally, install Flow in each app separately. Using these separate Flow instances, I ran flow ls inside App B and saw that both app-b and app-a were part of the file list, but still got the same error
• I've been avoiding ejecting my Create React App because I want to be able to update to newer versions without hassle. Therefore, it would be more optimal if I didn't have to use the flow strip types plugin

I copy and pasted this from my question on Stack Overflow: https://stackoverflow.com/questions/49090460/using-flow-with-lerna-and-create-react-app#

[rista404]

@rjdlee I think it would be helpful to state what version of Create React App you're using, since CRA is supporting Lerna only in their next version, specifically [email protected]. (facebook/create-react-app#3815). Previous versions don't support Lerna, so that might be the issue.

However, there's still a question if it works in the next version of CRA. I'll test it out and report once facebook/create-react-app#4154 is fixed.

If you're using the master version of CRA (1.x), you can try some solutions proposed here facebook/create-react-app#1333, and see if it works.

[rjdlee]

@rista404 I'll update my CRA and let you know what happens. Thanks.

[steelbrain]

For all the people subscribed, a PR to fix this has been opened at #6504

Please have a look (and maybe provide feedback)

[matthewharwood]

@steelbrain Looks like that PR isn't gonna be closed... Do you have any other ideas?

[flo-pereira]

I have this kind of configuration :

/packages
  package-a/
    dist/   // transpiled by babel
    src/
      index.js
      file-a.js
  package-b/
    dist/ 
    src/
      index.js
  createReactApp/
    src/
      index.js
    //...

/packages/createReactApp/src/index.js

import packageA from 'package-a';
import fileA from 'package-a/dist/file-a';

/.flowconfig

module.name_mapper='package-a' -> 'package-a/src/index'
module.name_mapper='package-a\/dist/\(.+\)' -> 'package-a/src/\1'

it's working fine.

[petro-shkuratenyuk]

@flo-pereira do you have one flowconfig per whole project?

[flo-pereira]

only one flowconfig at root /.flowconfig