Import type dont recognize the type and returns any

[cristiancedenogallego]

When i import a type from another file, dont recognize the type:

Code

./typefile.js

// @flow
export type ReduxFormField = {
  value: string,
  active: boolean,
  autofill: Function,
  autofilled: ?boolean,
  checked: ?boolean,
  dirty: boolean,
  error: string,
  initialValue: any,
  invalid: boolean,
  name: string,
  onBlur(valueOrEvent: any): Function,
  onChange(valueOrEvent: any): Function,
  onDragStart: Function,
  onDrop: Function,
  onFocus:Function,
  onUpdate: Function,
  pristine: boolean,
  touched: boolean,
  valid: boolean,
  visited: boolean,
};

// @flow
import type {ReduxFormField} from './typefile';
let a: ReduxFormField;

autocomplete recognize var "a" with "any" type

Notes

• Nuclide recognize the type fine.
• flow dont throw errors with the import

[Arilas]

Can you specify version of VSCode and flow version?

[cristiancedenogallego]

flow 0.30.0
vscode 1.4

[warmbowski]

I get the same thing with the same version of flow 0.30.0 and vscode 1.4.0 (extension version is 0.0.3). I also see that starting vscode with this extension doesn't start up the flow server and there are no errors. But even I already have flow running via command line or nuclide, I still have this 'imported types' problem in vscode. So even if flow's running, I don't thing the extension is connecting to the flow server.

Without being able to connect to the flow server, I don't see how vscode would be able to reconcile the imported flow types.

[satya164]

Facing the same issue. Happy to PR if someone could point me in the right direction.

[clooth]

Same issue here too.

[ggregoire]

Same issue with vscode 1.5.3 and flow 0.33.

[elloyd-spredfast]

Same issue with VSCode 1.7.2 and flow 0.36. Extension version 0.4.0.

[orta]

Hrm, I'm not seeing this when I do this:

Then I get autocomplete as expected:

admittedly I don't get it if I use your exact case of let a: ReduxFormField as Flow doesn't seem to imply its a real object at that point.

[nfour]

Same issue with the below:

// @flow
import type { StorageEntry } from './StrategyStorage';

export default class Strategy {
  constructor(strategy: StorageEntry) {
    strategy;
  }
}

From the file:

export type StorageEntry = {
  Path: string,
  Content: {},
  Attributes: {},
};

On vscode 1.8.1, extension 0.4.0

[natew]

I get this too on 1.8.1

[jcreamer898]

Similar issue as above...

If I comment out the import and put the type inline it works...

[sattaman]

+1

[natew]

@crisys11 reason for closing?

[cristiancedenogallego]

Works well in vs code 1.9.1 and plugin 0.5.0

[aweary]

I'm still seeing this issue with VSCode 1.9.1 and version 0.5.0 of the plugin.

[cakecatz]

I think there has been a misunderstanding.

let a: any is Automatic Type Acquisition.

[im-sven]

Anyone has found a workaround?

[Arilas]

@im-sven are you sure, that flow extension is correctly installed and configured? Do you see type hinting like on screenshot in section [Flow], or you see only automatic intellisense info with 'any'.

Check that file have correct header. Maybe you need to use /** @flow*/ header

Check language that used for file(on the right bottom line). It's must be just 'Javascript'.

If you still have this issue, I think that this is something related to VSCode itself, and his resolver autocomplete resolver.

[im-sven]

@Arilas thanks for your comment. After starting a completely fresh project, I couldn't reproduce the behaviour. It seemed that it was caused by an incorrect flowconfig.

I suspect it was caused by using the modules.resolve option in Webpack 2, to import files like:

import foo from 'folder1/subfolder'

and not handling this correctly in Flow. In my case (for illustrational purposes), it was fixed by updating the .flowconfig as:

module.name_mapper='^\(folder1\|folder2\|folder3\|folder4\)\/\(.*\)$' -> '<PROJECT_ROOT>/app1/'
module.system.node.resolve_dirname=node_modules

Hope it can point other people in the right direction when facing similar issues.

[benadamstyles]

I'm not using webpack and I'm still seeing this issue. Just installed VSCode and flow plugin for the first time.

[ghost]

Same problem here. First time user, just freshly installed. it is not working.

[Arilas]

@Leeds-eBooks @MoeSattler Can you specify what exactly don't work for you? Is it hover and/or autocomplete? Because it's related to different APIs of VSCode.

[benadamstyles]

@Arilas It's both actually. When I work out how to do a screenshot of a hover effect I will paste it here, but basically if I import type {T} from 'path' hovering over T shows any and then, when referencing a variable that has type T and calling a property, the autocomplete doesn't have any of the type's properties.

[ghost]

Both for me too

[Arilas]

Do you have flow annotation for file with types? Do you have global nodejs installation or use nvm or similar tools. Do you have globally installed flow-bin or just dev dependency? Did you configure flow.pathToFlow?

[benadamstyles]

Do you have flow annotation for file with types?

Yes, import type {T} from 'path' imports from a file with flowtype annotations.

Do you have global nodejs installation or use nvm or similar tools.

I use nvm. But in any case, flow-for-vscode is working fine in its other features.

Do you have globally installed flow-bin or just dev dependency?

Globally installed.

Did you configure flow.pathToFlow?

No.

[Kureev]

Have exactly the same issue here.

Flow version 0.38,
plugin version 0.5.0.

import Foo from './types'

works (although I have "[flow] [flow] Named import from module ../types.js (Foo is a type, but not a value. In order to import it, please use import type.)" error), but

import type {Foo} from './types'

doesn't.

types.js:

export type Foo = {bar: number};

UPD: just tried to update flow to 0.43 - same issue.
UPD2: it seems it sees my export as "default":

[flow] [flow] Named import from module `./types` (This module only has a default export. Did you mean `import Foo from ...`?)

[Kureev]

Ok, I can't pretend I know the root cause, but(!):

• If you're using import type { Foo } from './types' then type is actually imported and can be used, but at the moment of import it'll be displayed as any (which I think is a bug).
• If you're using imported types for prop validations, they won't be displayed:

class Bar extends React.Component {
  props: {
    foo: Foo
  }

  render() {
    const { bar } = this.props.foo;
  }
}

foo will be displayed as any here, but bar will have a proper type.

Is it something we can help you fixing, @Arilas?

[Izhaki]

@greeze answer worked for me:

import { type Foo, type Bar } from './types'

People still experience this issue?

[sanghin]

People still experience this issue?

Yes i still have the issue

OS: macOS High Sierra 10.13.2 (17C88)
VSCode: Version 1.19.2 (1.19.2)
Extensions: (should i list all my extensions ? )

VSCode Workspace settings:

{
  "javascript.validate.enable": false,

  "flow.pathToFlow": "${workspaceRoot}/node_modules/.bin/flow",
  "flow.useNPMPackagedFlow": true,
  "flow.fileExtensions": [".js"],
  "flow.runOnAllFiles": true,

  "prettier.eslintIntegration": true,
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/tmp/**": true
  }
}

VSCode User settings :

{
  "sublimeTextKeymap.promptV3Features": true,
  "editor.multiCursorModifier": "ctrlCmd",
  "editor.snippetSuggestions": "top",
  "window.title": "${activeEditorLong}${separator}${rootName}",
  "window.zoomLevel": 1,
  "editor.minimap.enabled": false,
  "editor.tabCompletion": true,
  "editor.tabSize": 2,
  "workbench.editor.enablePreview": false,
  "typescript.autoImportSuggestions.enabled": false,
  "editor.parameterHints": false,
  "openInGitHub.requireSelectionForLines": false,
  "openInGitHub.providerType": "github",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.formatOnType": true,
}

AddonType.js

// @flow

export type Addon = (
  id: string
  type: 'free' | 'pro'
};

WorkspaceType.js

// @flow

import { type Addon } from "./AddonType";
// import { type Addon } from "./AddonType";

export type Workspace = {
  id: string,
  addons: Addon[]
};

With import type { Addon } from "./AddonType";

With import { type Addon } from "./AddonType"

[Izhaki]

I'm not using vscode-flow-ide, perhaps try disabling it? @sanghin

[sanghin]

It's good now

TL;DR don't export your type with export * from './File';

I was exporting the type like this (in index.js file):

export * from "./AddonType";
export * from "./WorkspaceType";
[...]

Where i should export it like this:

// @flow

import type {
   FlowIsGreatAddons,
  TestAddons,
  Addons,
} from "./AddonType";
import type { Workspace } from "./WorkspaceType";

export type {
   FlowIsGreatAddons,
  TestAddons,
  Addons,
  Workspace
};

Import =>

import type { User, Subscription, Workspace } from '@core/AppTypes';
// or without alias
import type { User, Subscription, Workspace } from '../../AppTypes';

Hovering on the type return any:

But hovering on the JS files display the types and Flow now display errors if i tried to access a non existing props, etc.

As describe here:

OK so it looks like if I hover over the alias type that uses the imported type it doesn't work but when looking at the actual JS that references the type it does. That's a win.

Thank you for your time (and sorry for wasting it 🙃 )

[romanlex]

Same issues(
Doesn't work...all types any(

[TwFlem]

@romanlex, @sanghin comment will address the issue. Also, it will work using export *. Make sure you are adding // @flow to ALL FILES INVOLVED. This involves where they are defined, being exported, being used, and anywhere in-between.

[romanlex]

@TwFlem with export * all work, thx!

[vschoener]

Same issue, doesn't work :(

[sanghin]

Make sure that you are adding // @flow to ALL FILES INVOLVED.

[Khachatour]

Hey there all.
I somehow managed to get this working.

import { type MyType } from 'whereIExportType.js'

Is this okay ?

[benadamstyles]

@Khachatour Of course, that is fine. I think this issue is fixed now anyway?

[mikeaustin]

I found why it was happening for me. I have js and css in the same folder with the same base name, and for Flow to see the import (CSS Modules) and not report an error, I added the ext to options:

[options]
module.file_ext=.js
module.file_ext=.css
module.file_ext=.html

The problem is that is sees foo.js and foo.css and I guess picks the file alphabetically, or randomly, or causes a problem and reports the type as any.

So now I must use the .js extension in my import, or move the css somewhere else.

[wilsonshakespeare]

Same issue here.

However, I'm noticing that if I change:
import type { Foo, Bar } from './types'
to
import { type Foo, type Bar } from './types'
it works as expected!

Ya it does but then it would have problem with flow-remove-types/register because it doesn't recognize the latter

[stepankuzmin]

Same here.

vs code 1.28.2
flow-for-vscode 0.7.2
flow: 0.85.0

.flowconfig

[ignore]
.*/node_modules/findup/.*
.*/node_modules/@mapbox/jsonlint-lines-primitives/.*

[include]

[libs]
./flow-typed
./node_modules/mapbox-gl/flow-typed

[options]
esproposal.class_static_fields=enable
esproposal.class_instance_fields=enable

[lints]

flow-typed/types.js

// @flow

import type Map from 'mapbox-gl/src/ui/map';

declare type MapboxMap = Map;

This resolves correctly:

But everywhere in the project it resolves to any in VS Code:

Although if I run flow on source code it works fine.

[ButuzGOL]

I still have issue with such way

import type {
  CombatType,
  WarriorType,
} from '../lib/types';

but dont have with

import {
  type CombatType,
  type WarriorType,
} from '../lib/types';

But what is right way to do ?

This doc doesn't give right example
https://flow.org/en/docs/types/modules/#importing-and-exporting-types-

In google i see different syntax in articles

[neb-b]

What fixed it for me, and how I think I should have been doing it in the first place(?) was to move all my type files into the /flow-typed folder. Then changed export type to declare type.

Then I don't need to manually import all of my types, they just work.
https://flow.org/en/docs/libdefs/

[falnos24865]

This really should not have been closed. Its still an issue and renders this extension almost useless if using a code base that does imports the way the flow docs specify - import type Foo, {MyObject, MyInterface} from './exports';

[ortonomy]

For anyone stumbling upon this, suggest checking out this thread and this comment: facebook/flow#338 (comment)

[ghost]

Still happens with me, import type returns type any

[pizzarob]

This still seems to happen. In this screenshot I am hovering over form.exit - you can see that the proper type is displayed in the tool tip on hover, but under that is any. Why is any there? It's typed, so it should not be any

[BrunoQuaresma]

I have the same issue.

[Mayank1791989]

@BrunoQuaresma Are you talking about pizza-r0b issue?

[BrunoQuaresma]

@Mayank1791989 yeap.

[Mayank1791989]

I think any is coming from typescript plugin not from this plugin.

[qhkm]

@greeze answer worked for me:

import { type Foo, type Bar } from './types'

People still experience this issue?

This works for me

[campbellgoe]

@seanyesmunt answer worked for me. I am using flow-typed. This was solved by moving my types exports into the flow-typed folder (in my case flow-types/types/GeometryTypes.js), changing export to declare, and finally removing import.

[lportanel]

What worked for me was:
// @flow
import { type Foo, type Bar } from './types'

And very important: don't forget to add // @flow to the file where you're exporting your types.