Type spread on imported types doesn't work

[konstantinkreft]

This is a:

• Bug Report
• Feature Request
• Question
• Other

Which concerns:

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

---

What is the current behaviour?

Example:

import type { Bar } from './types';

type Foo = {|
  ...Bar,
  foobar: string,
|};

If a type is imported from external file and spread into another type the following error is thrown: TypeError: Invalid attempt to spread non-iterable instance.

It seems like that at this point the @babel/flow preset already stripped out the types so it tries to spread undefined.

But if both types are declared in the same file everything works fine.

To showcase this bug I created a minimal reproducible example over here: https://github.com/risetechnologies/flow-runtime-bug

---

What is the expected behaviour?

It should be possible to spread a type from external file into another type.

---

Which package versions are you using?

flow-runtime: 0.17.0
babel-plugin-flow-runtime: 0.19.0

[tebuevd]

any work around for this?

[gajus]

If anyone contributes a fix, I will make sure it gets released.

[jedwards1211]

I might look into this soon if I have time...

It seems like that at this point the @babel/flow preset already stripped out the types so it tries to spread undefined

I don't think type stripping would cause any problems like this? Because flow-runtime converts all type imports/exports to runtime values. If types get stripped before babel-plugin-flow-runtime, then everything breaks because nothing in babel-plugin-flow-runtime can function without type annotations.

I forget the specifics of how presets interact with plugin order, but in my .babelrc.js I do explicitly specify the order of the strip types transform:

{
  plugins: [
    ['@babel/plugin-proposal-decorators', { legacy: true }],
    [
      'babel-plugin-flow-runtime',
      { assert: false, annotate: false, optInOnly: true },
    ],
    '@babel/plugin-proposal-async-generator-functions',
    '@babel/plugin-proposal-object-rest-spread',
    '@babel/plugin-proposal-optional-chaining',
    '@babel/plugin-proposal-nullish-coalescing-operator',
    'babel-plugin-dynamic-import-node',
    '@babel/plugin-transform-flow-strip-types',
    ['@babel/plugin-proposal-class-properties', { loose: true }],
    'babel-plugin-lodash',
    'babel-plugin-dedent',
    '@babel/plugin-transform-runtime',
  ],
  presets: [
    ['@babel/preset-env', { targets: { node: 'current' } }],
    '@babel/preset-react',
    '@babel/preset-flow',
  ]
}