Webpack 3 warns about missing imports from flow-runtime conversion

[jedwards1211]

This is a:

• [x] Bug Report
• [ ] Feature Request
• [ ] Question
• [ ] Other

Which concerns:

• [ ] flow-runtime
• [x] babel-plugin-flow-runtime
• [ ] flow-runtime-validators
• [ ] flow-runtime-mobx
• [ ] flow-config-parser
• [ ] The documentation website

babel-plugin-flow-runtime converts all import type statements to concrete imports, which causes Webpack 3 to warn about concrete imports which don't exist. The more such import type statements, the more warnings, leading to a lot of noise.

For example, if I import type {Reducer} from 'redux', I get a warning like:

WARNING in ./src/universal/redux/types.js
155:9-18 "export 'Reducer' (imported as '_Reducer2') was not found in 'redux'
 @ ./src/universal/redux/types.js
 @ ./src/client/index.js
 @ multi babel-polyfill react-hot-loader/patch ./src/client/index.js webpack-hot-middleware/client

How to solve this?

My optInOnly proposal would reduce the noise on this, though it wouldn't eliminate warnings in files where one opts in.

Option 1

Get a PR into Webpack that allows us to put a comment before these imports that suppresses the warning, and then change babel-plugin-flow-runtime to insert the comments.

Option 2

Look in the node_modules to see which imported types have corresponding concrete exports. Not a very good option I think.

[jedwards1211]

More viable options:

Option 3: support comment to suppress converting imports

Make it so that babel-plugin-flow-runtime will avoid converting:

// flow-runtime no-convert
import type {Reducer} from 'redux'

Option 4: add ignorePackages to plugin options

Any type imports from ignored packages won't be converted.

{
  "plugins": [
    ["flow-runtime", {"ignorePackages": ["redux"]}]
  ]
}

[phpnode]

The best fix for this is via a custom webpack loader / plugin I think, we just need more information than a file-by-file approach can give us

[jedwards1211]

That's true, but considering how much time that would take, would you accept a PR for option 3 or 4?

[phpnode]

option 3 sounds like it would be the easiest to do,

// flow-runtime no-convert
import {Baz, type Foo} from 'bar'

should produce

import {Baz} from 'bar';
const Foo = t.any()

(yes would really appreciate a PR please!)