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.

@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.

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.