Typescript: Auto File Imports Inline Rather than at the Top of the File.

[mjbvz]

_From @cgen01 on September 22, 2018 10:11_

Description

There seems to be an issue with importing files. When I start to type a file to add to my component, VSCode used to import it to the top of the file. Now it imports it inline. Is there a setting for this that I'm not aware of? Or is this a bug?

Example

Information

• VSCode Version: 1.28.0-insider
• OS Version: macOS 10.13.6
• Does this issue occur when all extensions are disabled?: Yes

_Copied from original issue: Microsoft/vscode#59149_

[mjbvz]

How is EventsTable defined and exported from the other file?

[cgen01]

@mjbvz - This is the EventsTable component:

import React from 'react'
import dayjs from 'dayjs'
import {Divider, Table, Tag} from 'antd'

import {eventType} from '../types'
import {Constants} from '../../../helpers/constants'

import {NavItem} from '../../../components/Navigation'
import loader from '../../../components/Structure/Loader'

type Props = {
  events: [eventType],
  loader: {
    spinning: boolean,
  },
}

const {Column} = Table
const formatDate = date => dayjs(date).format('ddd, MMM D, YYYY')

const EventsTable = (props: Props) => {
  return props.loader.spinning ? (
    <div style={{minHeight: 500}} />
  ) : (
    <Table
      dataSource={props.events}
      pagination={Constants.TableOptions.PaginationOptions}
    >
      <Column title="Name" dataIndex="name" key="name" />

      <Column
        align="center"
        title="On Going"
        key="onGoing"
        render={(text, record) =>
          record.startDate < dayjs().valueOf() &&
          record.endDate > dayjs().valueOf() && (
            <i
              className="icon ion-md-checkmark-circle-outline"
              style={{fontSize: 15, color: 'green'}}
            />
          )
        }
      />

      <Column
        align="right"
        title="Start Date"
        dataIndex="startDate"
        key="startDate"
        render={formatDate}
      />

      <Column
        align="right"
        title="End Date"
        dataIndex="endDate"
        key="endDate"
        render={formatDate}
      />

      <Column
        title="Created By"
        dataIndex="createdBy"
        key="createdBy"
        render={name => <Tag color="blue">{name}</Tag>}
      />

      <Column
        align="right"
        title="Created Date"
        dataIndex="createdDate"
        key="createdDate"
        render={formatDate}
      />

      <Column
        align="right"
        title="Actions"
        key="action"
        render={(text, record) => (
          <span>
            <NavItem
              options={{reload: true}}
              params={{eventId: record.id}}
              routeName="events.edit"
            >
              Edit
            </NavItem>

            <Divider type="vertical" />

            <a href="#">Delete</a>
          </span>
        )}
      />
    </Table>
  )
}

export default loader(EventsTable)

It is exported just like any other file. But when trying to use VSCode to auto-import it, it seems that it doesn't import it like it used to.

[andy-ms]

@cgen01 Could you try to get a simplified repro of this?

The import("module/path").EventsTable fix should only happen when you're in a JS file and the symbol you're importing is a type. So this is curious in two ways since neither of those should be true?

• It looks like you're using TypeScript in the exporting file, so can I assume you're using TypeScript in the importing file too?
• Is another EventsTable symbol exported somewhere that is a type?

[cgen01]

@andy-ms Thank you for your response. To answer your questions, I am not using TypeScript, and there is not other symbol being exported at all.

[andy-ms]

Are you using flow? Noticed that components/EventsTable contains a type declaration.
Does this issue reproduce for you using just these two files,:the importer and the exporter?
(This seems wrong since EventsTable is not exported directly as a named export.)
Are they .js are .jsx files? Could you post the text of both files in a minimal repro that still has the error?

[lauraseidler]

I have the same issue with the same version of VS code insiders, also without using Typescript (or flow). This i.e. already happens for me with the default files included with create-react-app. Minimal example:

index.js:

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(<App />, document.getElementById('root'));

components/App.js:

import React, { Component } from 'react';

class App extends Component {
    render() {
        return <p>This is the app</p>;
    }
}

export default App;

Trying to auto import the App component in index.js results in this:

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(<import('./components/App').App />, document.getElementById('root'));

where I would expect this:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

ReactDOM.render(<App />, document.getElementById('root'));

[nnmrts]

This really is a major issue. Auto-import is de facto not working for react devs at the moment. I'm not even using Typescript or Flow or anything that's even remotely related to the import("...") syntax.

[mjbvz]

@RyanCavanaugh A lot of VS Code users are hitting this (https://github.com/Microsoft/vscode/issues/60216). I believe we need to fix this in TS 3.1.5

[soumyamishra89]

same issue after updating the vscode to September release (1.28.0). This issue didn't exist in previous version

[DanielRosenwasser]

@andy-ms can you port this change into release-3.1?

[andy-ms]

27696

[vinhnph-ibl]

I have downgraded from 1.28.1 to 1.27.2 but VSCode keep updating, regard I don't even select to Install Update. It's very inconvenient 😢

[nnmrts]

AFAIK, this is fixed now. I'm using VSCode 1.29.0-insider (07271b840e38258ee68a58af05010e275ff2be33) and everything works fine. Thank you!

[elylucas]

I just started seeing this issue again on a new angular 7 cli project using vs code 1.30.1 (and now 1.30.2) and TS 3.1.6. Trying using VS Codes TS @ 3.2.2 and same issue.

[crush83]

Seeing this currently in VSCode 1.31.0 with TypeScript 3.3.3...can't find a way to fix.

[olegwn]

can't believe this is still not fixed :(

[nicobrinkkemper]

Hello just sharing my experience with this. Make sure ts is not encountering legacy code projects or syntax somewhere, anywhere. Limit your tsconfig to just a few files and see the problem persists. Start a clean project and see if it persists. It probably doesn't. It's not much help but it may help you spot the problem with your project.

[elie222]

@nicobrinkkemper comment helped me a lot.

I found there was an issue in my components folder that stopped import working.

  "include": [
    "src/**/*",
  ],
  "exclude": [
    "node_modules",
    "src/components/**/*"
  ]

Now I just need to find the part of the components folder that has caused this issue, but import is working again :)

[olegwn]

wow and this is still not fixed :(

[DanielRosenwasser]

If you're running into a similar issue, please file a separate issue with a repro.