How to use declarations to avoid "required module not found" errors? #2092

Closed
ffxsam opened this Issue Jul 15, 2016 · 21 comments

Comments

Projects
None yet
@ffxsam

ffxsam commented Jul 15, 2016

Per this discussion, I've added .*/node_modules/.* to the ignore section of .flowconfig. And so I'm getting errors about certain imported modules not being found.

I'm tackling the invariant package first. But, from the Flow documentation on declarations, I can't figure out what I need to do. It almost seems like I need to stub it somehow, so I'll stop seeing this error:

imports/helpers.js:3
  3: import invariant from 'invariant';
                           ^^^^^^^^^^^ invariant. Required module not found

Could someone point me in the right direction? (already checked out the docs, I didn't find them helpful)

@Overtonesinger

This comment has been minimized.

Show comment
Hide comment
@Overtonesinger

Overtonesinger Jul 15, 2016

Same here.
react-addons-update. Required module not found

Same here.
react-addons-update. Required module not found

@ryyppy

This comment has been minimized.

Show comment
Hide comment
@ryyppy

ryyppy Jul 15, 2016

Contributor

try this:

Add a [libs] path to your .flowconfig:

...
[libs]
flow-typed
...

Create a file [PROJECT]/flow-typed/invariant.js:

declare module 'invariant' {
  declare module.exports: any;
}

Now flow should find your invariant module :-)

EDIT:

I just realized from the other linked issue that you are not familiar with these mechanics. So this is the deal: Flow recently released breaking changes with it's syntax, so it is very crucial to know which node_module vendors with which kind of flowtype versions. If you ignore node_modules you basically are blind of vendored type-definitions.

To simulate the interfaces for flow, we need libdef files, which are very similar to how C header file would work. They don't contain any implementation details, just the declarations of the library's API.

With [libs] you tell flow specific paths to look up libdef files. from version 0.27, it will by default pick up [PROJECT]/flow-typed if it cannot find any [libs] section. In there, you define your third-party module libdefs, which then will be picked up and stubbed in the import statements you mentioned.

To make things easier, we work on the flow-typed project,... it provides a CLI tool to install specific libdef files for specific lib and flow versions.

https://github.com/flowtype/flow-typed

Hope this helps

Contributor

ryyppy commented Jul 15, 2016

try this:

Add a [libs] path to your .flowconfig:

...
[libs]
flow-typed
...

Create a file [PROJECT]/flow-typed/invariant.js:

declare module 'invariant' {
  declare module.exports: any;
}

Now flow should find your invariant module :-)

EDIT:

I just realized from the other linked issue that you are not familiar with these mechanics. So this is the deal: Flow recently released breaking changes with it's syntax, so it is very crucial to know which node_module vendors with which kind of flowtype versions. If you ignore node_modules you basically are blind of vendored type-definitions.

To simulate the interfaces for flow, we need libdef files, which are very similar to how C header file would work. They don't contain any implementation details, just the declarations of the library's API.

With [libs] you tell flow specific paths to look up libdef files. from version 0.27, it will by default pick up [PROJECT]/flow-typed if it cannot find any [libs] section. In there, you define your third-party module libdefs, which then will be picked up and stubbed in the import statements you mentioned.

To make things easier, we work on the flow-typed project,... it provides a CLI tool to install specific libdef files for specific lib and flow versions.

https://github.com/flowtype/flow-typed

Hope this helps

@ffxsam

This comment has been minimized.

Show comment
Hide comment
@ffxsam

ffxsam Jul 15, 2016

Thanks, that's very helpful! Though ESLint is not very happy:

/Volumes/SuperData/Sites/harris-partners/harris/flow-typed/invariant.js
  4:17  error  Parsing error: Unexpected token

invariant_js_-harris-___sites_harris-partners_harris

ffxsam commented Jul 15, 2016

Thanks, that's very helpful! Though ESLint is not very happy:

/Volumes/SuperData/Sites/harris-partners/harris/flow-typed/invariant.js
  4:17  error  Parsing error: Unexpected token

invariant_js_-harris-___sites_harris-partners_harris

@ryyppy

This comment has been minimized.

Show comment
Hide comment
@ryyppy

ryyppy Jul 15, 2016

Contributor

yep, eslint doesn't like that, this is since the syntax change in 0.27... if you use the old syntax (declare var exports = any or so,... you should find some examples in the flow-typed repo), eslint won't complain.... anyways don't take eslint too serious in that case!

Contributor

ryyppy commented Jul 15, 2016

yep, eslint doesn't like that, this is since the syntax change in 0.27... if you use the old syntax (declare var exports = any or so,... you should find some examples in the flow-typed repo), eslint won't complain.... anyways don't take eslint too serious in that case!

@ffxsam

This comment has been minimized.

Show comment
Hide comment
@ffxsam

ffxsam Jul 15, 2016

The problem is, a passing eslint is part of my CI build process. I'll go back to the older flow-typed syntax.

declare module 'invariant' {
  declare var exports: any
}

ffxsam commented Jul 15, 2016

The problem is, a passing eslint is part of my CI build process. I'll go back to the older flow-typed syntax.

declare module 'invariant' {
  declare var exports: any
}
@ffxsam

This comment has been minimized.

Show comment
Hide comment
@ffxsam

ffxsam Jul 15, 2016

It would be great to have better documentation around this whole process.

Quick question: if the idea of flow-typed is to have type declarations for various npm libraries that support flow, why not modify flow so that it looks for a flow-typed folder inside each package in node_modules, and uses that instead?

ffxsam commented Jul 15, 2016

It would be great to have better documentation around this whole process.

Quick question: if the idea of flow-typed is to have type declarations for various npm libraries that support flow, why not modify flow so that it looks for a flow-typed folder inside each package in node_modules, and uses that instead?

@ryyppy

This comment has been minimized.

Show comment
Hide comment
@ryyppy

ryyppy Jul 18, 2016

Contributor

@ffxsam Yeah, we have an open issue where we wanna make the process of writing declaration files a little bit easier and more transparent... this will take a while tho.

Anyways, in the long run, it wouldn't make sense to track libdefs inside the library repo itself, since the flow syntax will hopefully (I reckon) be stable as soon as there is commonjs / es6 export syntax support. Actual typing information should be retrieved from the source code itself.

flow-typed really targets libraries which are not typed with flow and fills these untyped holes until more maintainers type their source.

As a sidenote, I am currently writing flow guidelines for Runtastic, which will also include a section about properly vendoring flowtype information in ES6 modules and such.

(Currently a WIP branch: https://github.com/runtastic/flow-guide/tree/initial-guidelines/guidelines)

Contributor

ryyppy commented Jul 18, 2016

@ffxsam Yeah, we have an open issue where we wanna make the process of writing declaration files a little bit easier and more transparent... this will take a while tho.

Anyways, in the long run, it wouldn't make sense to track libdefs inside the library repo itself, since the flow syntax will hopefully (I reckon) be stable as soon as there is commonjs / es6 export syntax support. Actual typing information should be retrieved from the source code itself.

flow-typed really targets libraries which are not typed with flow and fills these untyped holes until more maintainers type their source.

As a sidenote, I am currently writing flow guidelines for Runtastic, which will also include a section about properly vendoring flowtype information in ES6 modules and such.

(Currently a WIP branch: https://github.com/runtastic/flow-guide/tree/initial-guidelines/guidelines)

@nkt

This comment has been minimized.

Show comment
Hide comment
@nkt

nkt Nov 3, 2016

Any updates?
I always got this error with react-addons-css-transition-group. Nothing helps, lib definition, etc. Just flow disabling for file which uses react-addons-css-transition-group.

nkt commented Nov 3, 2016

Any updates?
I always got this error with react-addons-css-transition-group. Nothing helps, lib definition, etc. Just flow disabling for file which uses react-addons-css-transition-group.

@ryyppy

This comment has been minimized.

Show comment
Hide comment
@ryyppy

ryyppy Nov 4, 2016

Contributor

@nkt What is your current setup to introduce the react-addons-css-transition-group libdef files? If you didn't define the module somewhere, flow needs to complain!

Contributor

ryyppy commented Nov 4, 2016

@nkt What is your current setup to introduce the react-addons-css-transition-group libdef files? If you didn't define the module somewhere, flow needs to complain!

@nkt

This comment has been minimized.

Show comment
Hide comment
@nkt

nkt Nov 4, 2016

@ryyppy I've tried to detect reason of this behaviour and found it. I'm using css-modules and there are some settings in my flowconfig:

module.name_mapper='.*\(.css\)' -> 'empty/object'

From first link in google. But now I see, this regexp matches react-addons-css-transition-group in pair with module.system=haste. I don't know why, but you should add recommended way for using flow with css-modules into flow docs.

nkt commented Nov 4, 2016

@ryyppy I've tried to detect reason of this behaviour and found it. I'm using css-modules and there are some settings in my flowconfig:

module.name_mapper='.*\(.css\)' -> 'empty/object'

From first link in google. But now I see, this regexp matches react-addons-css-transition-group in pair with module.system=haste. I don't know why, but you should add recommended way for using flow with css-modules into flow docs.

@webdesserts

This comment has been minimized.

Show comment
Hide comment
@webdesserts

webdesserts Nov 30, 2016

Just in case someone runs into the same (mostly unrelated) issue I had and ended up here... If you include the following in your .flowconfig for something like css-modules:

[options]
module.file_ext=.css

You will also need to add the default module extensions back in, as the initial declaration wipes out those defaults.

[options]
module.file_ext=.css
module.file_ext=.js
module.file_ext=.jsx
module.file_ext=.json

Just in case someone runs into the same (mostly unrelated) issue I had and ended up here... If you include the following in your .flowconfig for something like css-modules:

[options]
module.file_ext=.css

You will also need to add the default module extensions back in, as the initial declaration wipes out those defaults.

[options]
module.file_ext=.css
module.file_ext=.js
module.file_ext=.jsx
module.file_ext=.json
@ryyppy

This comment has been minimized.

Show comment
Hide comment
@ryyppy

ryyppy Nov 30, 2016

Contributor

@nkt I think you did a small typo in your regex...

module.name_mapper='.*\(.css\)' -> 'empty/object'

The . in (.css\) should actually be masked, no?

also you should probably add a $ to mark the end of the string -> (\.css\)$

Contributor

ryyppy commented Nov 30, 2016

@nkt I think you did a small typo in your regex...

module.name_mapper='.*\(.css\)' -> 'empty/object'

The . in (.css\) should actually be masked, no?

also you should probably add a $ to mark the end of the string -> (\.css\)$

@nkt

This comment has been minimized.

Show comment
Hide comment
@nkt

nkt Nov 30, 2016

@ryyppy this is the first regex from google. Now I'm using this one:

module.name_mapper='.*\.css$' -> 'CSSModule'

nkt commented Nov 30, 2016

@ryyppy this is the first regex from google. Now I'm using this one:

module.name_mapper='.*\.css$' -> 'CSSModule'
@ryyppy

This comment has been minimized.

Show comment
Hide comment
@ryyppy

ryyppy Nov 30, 2016

Contributor

Exactly, so it was an RegExp issue :-)

Contributor

ryyppy commented Nov 30, 2016

Exactly, so it was an RegExp issue :-)

@craigcosmo

This comment has been minimized.

Show comment
Hide comment
@craigcosmo

craigcosmo Jan 18, 2017

And the full solution is?

And the full solution is?

@arthur801031 arthur801031 referenced this issue in devtools-html/debugger.html Jan 19, 2017

Merged

Import client types #1737

@jasonLaster jasonLaster referenced this issue in devtools-html/debugger.html Jan 19, 2017

Closed

[flow] errors with client-adapter #1754

@kjnsn

This comment has been minimized.

Show comment
Hide comment
@kjnsn

kjnsn Mar 14, 2017

Found a workaround by following this issue: #662

kjnsn commented Mar 14, 2017

Found a workaround by following this issue: #662

@ryyppy

This comment has been minimized.

Show comment
Hide comment
@ryyppy

ryyppy Mar 14, 2017

Contributor

Okay, since everyone is apparently completely lost here...

GOAL:

Make flow understand *.css files and map them to an exported Object or whatever type you need... also to prevent this dreaded module not found error.

STEPS:

  1. In your project folder, create a file helpers/CSSModule.js with following content:
//@flow

export default {};
  1. Now tell flow in your .flowconfig that you want to redirect all *.css require / imports to your newly created helpers/CSSModule.js file:
[ignore]

[include]

[libs]

[options]
module.file_ext=.css
module.file_ext=.js
module.file_ext=.jsx
module.file_ext=.json

module.name_mapper='.*\.css$' -> './helpers/CSSModule'
  1. Restart your flow with flow stop && flow start

RESULT:

Now everything is set up... let's assume we have a file test.js and whatever.css in the same directory:

// whatever.css

div {
  color: blue;
}
// test.js

//@flow

import styles from './whatever.css';

styles will now be of type Object, since I mapped it to the CSSModule export instead.


Does this solve your problems, or did I already post an unrelated solution, since I already lost track of the actual question?

Contributor

ryyppy commented Mar 14, 2017

Okay, since everyone is apparently completely lost here...

GOAL:

Make flow understand *.css files and map them to an exported Object or whatever type you need... also to prevent this dreaded module not found error.

STEPS:

  1. In your project folder, create a file helpers/CSSModule.js with following content:
//@flow

export default {};
  1. Now tell flow in your .flowconfig that you want to redirect all *.css require / imports to your newly created helpers/CSSModule.js file:
[ignore]

[include]

[libs]

[options]
module.file_ext=.css
module.file_ext=.js
module.file_ext=.jsx
module.file_ext=.json

module.name_mapper='.*\.css$' -> './helpers/CSSModule'
  1. Restart your flow with flow stop && flow start

RESULT:

Now everything is set up... let's assume we have a file test.js and whatever.css in the same directory:

// whatever.css

div {
  color: blue;
}
// test.js

//@flow

import styles from './whatever.css';

styles will now be of type Object, since I mapped it to the CSSModule export instead.


Does this solve your problems, or did I already post an unrelated solution, since I already lost track of the actual question?

@iq9891

This comment has been minimized.

Show comment
Hide comment
@iq9891

iq9891 Jun 7, 2017

`> tpltest@1.0.0 flow /Users/lee/eventmosh/vui-boilerplate/tpltest
> flow check

src/main.js:6
6: import Vue from 'vue';
^^^^^ vue. Required module not found`

iq9891 commented Jun 7, 2017

`> tpltest@1.0.0 flow /Users/lee/eventmosh/vui-boilerplate/tpltest
> flow check

src/main.js:6
6: import Vue from 'vue';
^^^^^ vue. Required module not found`

@dicristomanuel

This comment has been minimized.

Show comment
Hide comment
@dicristomanuel

dicristomanuel Jun 14, 2017

.flowconfig

[include]
./src/**

[ignore]
.*/node_modules/**

terminal:

> flow; test $? -eq 0 -o $? -eq 2

src/commands/build.js:3
  3: import documentation from 'documentation';
                               ^^^^^^^^^^^^^^^ documentation. Required module not found

.flowconfig

[include]
./src/**

[ignore]
.*/node_modules/**

terminal:

> flow; test $? -eq 0 -o $? -eq 2

src/commands/build.js:3
  3: import documentation from 'documentation';
                               ^^^^^^^^^^^^^^^ documentation. Required module not found

@bhough bhough referenced this issue in styled-components/polished Aug 29, 2017

Closed

Flow unable to find polished module #239

flarnie added a commit to flarnie/react that referenced this issue Sep 8, 2017

[Gatsby docs update] Enable and fix flow
**what is the change?:**
- enable flow for `www` subdirectory
- ignore nested `node_modules` with flow
- allow flow to find the `hex2rgba` definition in `node_modules`
  and add a `flow-typed` libdef file. See facebook/flow#2092
- Make types more consistent and check for corner cases in the 'theme'
  styles code.

**why make this change?:**
We want delicious types. :3

**test plan:**
`yarn flow`

**issue:**
Checklist item from wiki here; https://github.com/bvaughn/react/wiki/Gatsby-check-list
Misc > Make sure yarn flow checks the website directory and has no errors.

flarnie added a commit to flarnie/react that referenced this issue Sep 8, 2017

[Gatsby docs update] Enable and fix flow
**what is the change?:**
- enable flow for `www` subdirectory
- ignore nested `node_modules` with flow
- allow flow to find the `hex2rgba` definition in `node_modules`
  and add a `flow-typed` libdef file. See facebook/flow#2092
- Make types more consistent and check for corner cases in the 'theme'
  styles code.

**why make this change?:**
We want delicious types. :3

**test plan:**
`yarn flow`

**issue:**
Checklist item from wiki here; https://github.com/bvaughn/react/wiki/Gatsby-check-list
Misc > Make sure yarn flow checks the website directory and has no errors.

@flarnie flarnie referenced this issue in facebook/react Sep 8, 2017

Merged

[Gatsby docs update] Enable and fix flow #10647

flarnie added a commit to facebook/react that referenced this issue Sep 8, 2017

[Gatsby docs update] Enable and fix flow (#10647)
* [Gatsby docs update] Enable and fix flow

**what is the change?:**
- enable flow for `www` subdirectory
- ignore nested `node_modules` with flow
- allow flow to find the `hex2rgba` definition in `node_modules`
  and add a `flow-typed` libdef file. See facebook/flow#2092
- Make types more consistent and check for corner cases in the 'theme'
  styles code.

**why make this change?:**
We want delicious types. :3

**test plan:**
`yarn flow`

**issue:**
Checklist item from wiki here; https://github.com/bvaughn/react/wiki/Gatsby-check-list
Misc > Make sure yarn flow checks the website directory and has no errors.

* add more specific type for hex2rbga libdef

@raduchiriac raduchiriac referenced this issue in bigslycat/flow-geojson Dec 15, 2017

Closed

[Question] Required module not found #1

@Androbin Androbin referenced this issue in apertium/apertium-html-tools Dec 16, 2017

Merged

[WIP] Disentangle JS modules #225

@yordis

This comment has been minimized.

Show comment
Hide comment
@yordis

yordis Dec 22, 2017

Any updates on this.

I think we need a better solution than us adding files with the types spec, something clever that do not add more work and issues and allow us to focus on our platform.

Maybe some way to silence these issues or something?!

yordis commented Dec 22, 2017

Any updates on this.

I think we need a better solution than us adding files with the types spec, something clever that do not add more work and issues and allow us to focus on our platform.

Maybe some way to silence these issues or something?!

@samwgoldman

This comment has been minimized.

Show comment
Hide comment
@samwgoldman

samwgoldman Dec 22, 2017

Member

OK, I've read through this thread and @ryyppy has provided an answer for many issues that have been posted here.

To summarize: If you get a required module not found error, you should define a library definition. You can get library definitions from flow-typed, and flow-typed will even create stub definitions for you!

If you found this issue because you are having a similar issue, please read the thread for many answers to specific questions. If you are still stuck, please open a new issue with the specifics of your issue.

Member

samwgoldman commented Dec 22, 2017

OK, I've read through this thread and @ryyppy has provided an answer for many issues that have been posted here.

To summarize: If you get a required module not found error, you should define a library definition. You can get library definitions from flow-typed, and flow-typed will even create stub definitions for you!

If you found this issue because you are having a similar issue, please read the thread for many answers to specific questions. If you are still stuck, please open a new issue with the specifics of your issue.

@Takumi0901 Takumi0901 referenced this issue in Takumi0901/rails-react-sample Mar 6, 2018

Merged

Added Flow #37

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment