Skip to content

Latest commit

 

History

History

flow-with-absolute-module-resolution

Folders and files

NameName
Last commit message
Last commit date

parent directory

..

src

src

 
 

.flowconfig

.flowconfig

 
 

README.md

README.md

 
 

package.json

package.json

 
 

README.md

Parcel Absolute Module Resolution with Flow

Parcel supports using Flow types out of the box.

In this example we use the .flowconfig file to instruct Parcel to use Flow and the // @flow pragma at the top of each JS file to specify those files to be type-checked.

We also demonstrate the use of Parcel Absolute Module Resolution - see the imports in index.js as well as index.html. Imports are resolved from the project root, which is defined as the Parcel entrypoint, which in this case is src/index.html, so every / import is resolved from the src/ folder.

For Flow to understand where /index.js is actually imported from we need to account for this difference. module.name_mapper is a .flowconfig option which remaps the imports for Flow. In this instance, /index.js must become src/index.js.

To run Flow, either install it as an editor indtegration, or run either yarn run flow or npm run flow.

Running Flow over this example should result in the following error:

Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/index.js:7:28
Cannot assign banana.color to bananaColor because string [1] is incompatible with boolean [2].

     src/index.js
      4│ import banana from "/fruits/banana";
      5│
      6│ let ripeApple: boolean = apple.ripe;
 [2]  7│ let bananaColor: boolean = banana.color;
      8│
      9│ console.log("is the apple ripe?", ripeApple);
     10│ console.log("what is the banana's color?", bananaColor);

     src/fruits/banana.js
 [1]  4│   color: "green",

Further Reading: