Flow: index.js.flow not recognized in scoped module

[hmeerlo]

I encounter a weird problem which I can not explain. I have a custom scoped npm module called @ftdn/table. It is in node_modules/@ftdn/table:

Hermans-MBP-2:ftdn-import hermanmeerlo$ ls -l node_modules/\@ftdn/table/
total 16
-rw-r--r--   1 hermanmeerlo  staff    92 Apr  4 14:08 README.md
drwxr-xr-x  14 hermanmeerlo  staff   448 Apr 11 12:16 es
drwxr-xr-x  14 hermanmeerlo  staff   448 Apr 11 12:16 lib
-rw-r--r--   1 hermanmeerlo  staff  1225 Apr 11 16:31 package.json

Part of the package.json:

  "name": "@ftdn/table",
  "version": "1.0.5",
  "description": "ftdn-table React component",
  "main": "lib/index.js",
  "module": "es/index.js",
  "files": ["css", "es", "lib", "umd"],

So my build picks up the index.js from the es directory correctly. It builds fine, no problems there. But the es directory contains this:

Hermans-MBP-2:ftdn-import hermanmeerlo$ ls -l node_modules/\@ftdn/table/es/
total 128
-rw-r--r--   1 hermanmeerlo  staff    713 Apr 11 16:31 CardBox.js
-rw-r--r--   1 hermanmeerlo  staff    345 Apr 10 12:04 CardBox.js.flow
-rw-r--r--   1 hermanmeerlo  staff   2700 Apr  4 16:11 Table.test.js.flow
-rw-r--r--   1 hermanmeerlo  staff   5547 Apr 11 16:31 TablePagination.js
-rw-r--r--   1 hermanmeerlo  staff   3075 Apr 11 16:22 TablePagination.js.flow
-rw-r--r--   1 hermanmeerlo  staff   1352 Apr 11 16:31 helpers.js
-rw-r--r--   1 hermanmeerlo  staff   1353 Apr  4 15:44 helpers.js.flow
-rw-r--r--   1 hermanmeerlo  staff  10748 Apr 11 16:31 index.js
-rw-r--r--   1 hermanmeerlo  staff   9472 Apr 10 12:04 index.js.flow
drwxr-xr-x  10 hermanmeerlo  staff    320 Apr 11 12:16 renderers
-rw-r--r--   1 hermanmeerlo  staff    446 Apr 11 16:31 tableTheme.js
-rw-r--r--   1 hermanmeerlo  staff    456 Apr  4 15:35 tableTheme.js.flow

And now Flow complains:

Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ demo/src/index.js:8:36

Cannot resolve module @ftdn/table.

      5│ import exampleImg from './example.png';
      6│ import { List, Map } from 'immutable';
      7│ import { TableRow, TableCell } from 'material-ui';
      8│ import Table, { TableColumn } from '@ftdn/table';
      9│ import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
     10│ import Theme from './theme.js';
     11│ import PropTypes from 'prop-types';

This is weird because this directory is not in the [ignore] section of the .flowconfig. I don't understand why Flow doesn't pick up the index.js.flow typedefs.

[saadq]

I believe Flow tries to use a matching .flow file for the main file in your package.json. If you don't have any .flow files in your lib, that is probably your issue.

[hmeerlo]

@saadq I have .flow files in both lib and es directories.

[ardok]

@hmeerlo any updates from your end?
I'm facing the same issue. I have a scoped module, say @foo/ardo.table.
I have done the flow-copy-source thing, and I still can't do import type {Whatever} from '@foo/ardo.table'

[hmeerlo]

no progress unfortunately

[vicapow]

I wasn't able to reproduce with the latest version of flow. Are you sure you have the .js.flow files in your published lib directory?

[vicapow]

Here's the example code I used: https://github.com/vicapow/test-flow-scoped-import If you want to play around with it. Can you attempt to provide more detailed steps to reproduce?

[ardok]

@vicapow

https://github.com/ardok/test-flow-package

Just follow the README and you'll see:

> @ardo/[email protected] flow /Users/ardokusuma/Documents/workspace/test-flow-package/packages/my-app
> flow --show-all-errors

Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/index.js:2:19

Cannot resolve module @ardo/test-library.

     1│ // @flow
     2│ import {sum} from '@ardo/test-library';
     3│ import type {NumberListT, SumOptionsT, SumReturnT} from '@ardo/test-library';
     4│
     5│ function wrapperSum(numbers: NumberListT, options: SumOptionsT): string {


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/index.js:3:57

Cannot resolve module @ardo/test-library.

     1│ // @flow
     2│ import {sum} from '@ardo/test-library';
     3│ import type {NumberListT, SumOptionsT, SumReturnT} from '@ardo/test-library';
     4│
     5│ function wrapperSum(numbers: NumberListT, options: SumOptionsT): string {
     6│   return sum([1, 2]);

But to your point though, at some other projects that have been published, having index.js.flow works just fine.
So I'm not sure about this particular error.

[vicapow]

@ardok that error exists because you have dist being ignored in your flowconfig but you have your library main pointing to dist/index.js and dist/index.js.flow. Remove that and you'll see a different error.

[ignore] .*/dist/*

[ardok]

@vicapow ahhh, I see.
Yeah, it works now.
So we shouldn't exclude the .js.flow from our library.
Thanks a lot!

@hmeerlo ^ FYI.
Check your flowconfig and make sure you don't ignore the .js.flow

[pho3nixf1re]

~This is actually happening to me but I'm not ignoring any files in my flowconfig. I'm importing a private scoped module from our own registry (not on npm). I have verified the presence of the correct .flow files in the package and that they match up to the package's main. Has there been anything new on this?~

Well this is weird. I had an ignore entry but not at all related to my module name. I removed it and everything worked?!

works

[ignore]

[include]

[libs]

[lints]

[options]
module.name_mapper='.*\.\(css\|scss\)$' -> '<PROJECT_ROOT>/flow/stubs/css-module.js'
module.name_mapper='.*\.\(jpg\|png\|gif\|svg\|woff\|woff2\|ttf\|eot\|webm\|mp4\)$' -> '<PROJECT_ROOT>/flow/stubs/url-loader.js'

[strict]

does not work

[ignore]
.*\.json$

[include]

[libs]

[lints]

[options]
module.name_mapper='.*\.\(css\|scss\)$' -> '<PROJECT_ROOT>/flow/stubs/css-module.js'
module.name_mapper='.*\.\(jpg\|png\|gif\|svg\|woff\|woff2\|ttf\|eot\|webm\|mp4\)$' -> '<PROJECT_ROOT>/flow/stubs/url-loader.js'

[strict]

WTF?