GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Sign in
  • ActionsCI/CD and automation
  • CodespacesCloud development environments
  • All Features
  • Documentation
  • Training
  • Certifications
  • Build with Copilot
  • Customize Copilot
  • Integrations
  • Trending repos
  • GitHub Sponsors
  • Developer articles
  • Enterprises

This view

  • Original page
  • New address

GeezerVison is showing github.com — Full support for CommonJS auto-imports in JS by andrewbranch · Pull Request #37027 · microsoft/TypeScript

Conversation

@andrewbranch

@andrewbranch Andrew Branch (andrewbranch) commented Feb 25, 2020

Copy link
Copy Markdown
Member

In #32684, I added the ability for auto-imports to write a require variable declaration in JS files. However, it didn’t work for named or default exports, and under default project settings, would never be triggered from completions; it was only reachable by code fix. This is particularly problematic for JS, because unless the user has explicitly enabled type checking JS through VS Code settings, a tsconfig or jsconfig file, or // @ts-check, you can’t get code fixes because you don’t get errors.

This PR removes those limitations, and also recognizes members of object literals assigned to module.exports as importable symbols.

How do we choose between import and require for a JS file?

Rules are evaluated in order (highest priority first).

  1. If the imported identifier could be added to an existing import, add it there.
  2. If the imported identifier could be added to an existing require, add it there.
  3. If the importing file contains any ES2015+ import/export syntax, use import.
  4. If the importing file contains any CommonJS syntax, use require.
  5. If the compiler options indicate a module target of ES2015+, use import.
  6. Use require.

How are require variable declarations written for different kinds of exports?

  • const { foo } = require('./foo') maps to named ES exports and CommonJS exported object literal members (module.exports = { foo }).
  • const { default: foo } = require('./foo') maps to default ES exports (hopefully people aren’t actually doing this).
  • const foo = require('./foo') maps to everything else.

Fixes #20292
Fixes #30549

Related:

  • No auto imports in new JavaScript file #36611
  • import fix / autocomplete requires type checking JS/JSX #36134

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

nykula, florian-milky, peterblazejewicz, avevlad, bbugh, and JonathanLee-LX reacted with thumbs up emoji bbugh reacted with hooray emoji bbugh reacted with heart emoji
All reactions
  • 👍 6 reactions
  • 🎉 1 reaction
  • ❤️ 1 reaction
Andrew Branch (andrewbranch) added 4 commits February 24, 2020 11:51
@andrewbranch
Support add new requires
7c1f98b
@andrewbranch
Always use destructuring for requiring default exports
6d2aa57
@andrewbranch
Add more tests
3902e89
@andrewbranch
Merge branch 'master' into feature/js-auto-imports
b93742f
@typescript-bot TypeScript Bot (typescript-bot) assigned Andrew Branch (andrewbranch) Feb 25, 2020
@typescript-bot TypeScript Bot (typescript-bot) added the Author: Team label Feb 25, 2020
andrewbranch
Andrew Branch (andrewbranch) commented Feb 25, 2020
View reviewed changes
Comment thread src/compiler/checker.ts Resolved

Uh oh!

There was an error while loading. Please reload this page.

andrewbranch
Andrew Branch (andrewbranch) commented Feb 25, 2020
View reviewed changes
Comment thread src/services/codefixes/importFixes.ts
Comment on lines -173 to +177
Equals,
ConstEquals
CommonJS,

@andrewbranch Andrew Branch (andrewbranch) Feb 25, 2020 •
edited
Loading

Uh oh!

There was an error while loading. Please reload this page.

Copy link
Copy Markdown
Member Author

There was a problem hiding this comment.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the fundamental conceptual change in this file, and everything else is basically just implementation details. This enum used to represent final syntax; now it’s more a representation of where the symbol can be found in the module. Whether or not to use JS is then calculated and stored elsewhere, so that

  • CommonJS can mean import foo = require('mod') or const foo = require('mod')
  • Namespace can mean import * as foo from 'mod' or const foo = require('mod')
  • Default can mean import foo from 'mod' or const { default: foo } = require('mod')
  • Named can mean import { foo } from 'mod' or const { foo } = require('mod')

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

All reactions
@andrewbranch
Andrew Branch (andrewbranch) requested review from Orta Therox (orta), Nathan Shively-Sanders (sandersn), Sheetal Nandi (sheetalkamat) and Wesley Wigham (weswigham) February 25, 2020 22:35
Andrew Branch (andrewbranch) added 3 commits February 25, 2020 16:50
@andrewbranch
Update existing fourslash tests
d32b978
@andrewbranch
Use getExportsAndPropertiesOfModule
0a7c03f
@andrewbranch
Add UMD test
a0993d1
sandersn
Nathan Shively-Sanders (sandersn) approved these changes Feb 27, 2020
View reviewed changes

@sandersn Nathan Shively-Sanders (sandersn) left a comment

Copy link
Copy Markdown
Member

There was a problem hiding this comment.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks pretty good to me, although I wasn't previously familiar with the importFixes code.

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

All reactions
Comment thread src/compiler/types.ts Resolved

Uh oh!

There was an error while loading. Please reload this page.

Comment thread src/compiler/types.ts Resolved

Uh oh!

There was an error while loading. Please reload this page.

Comment thread src/services/codefixes/importFixes.ts Resolved

Uh oh!

There was an error while loading. Please reload this page.

andrewbranch
Andrew Branch (andrewbranch) commented Feb 27, 2020
View reviewed changes
Comment thread src/compiler/utilities.ts Resolved

Uh oh!

There was an error while loading. Please reload this page.

@andrewbranch @sandersn
Apply suggestions from code review
7344478
Fix typos

Co-Authored-By: Nathan Shively-Sanders <[email protected]>
@andrewbranch
Andrew Branch (andrewbranch) merged commit f9945f5 into microsoft:master Feb 28, 2020
@andrewbranch
Andrew Branch (andrewbranch) deleted the feature/js-auto-imports branch February 28, 2020 22:34
@andrewbranch Andrew Branch (andrewbranch) mentioned this pull request Mar 3, 2020
No auto imports in new JavaScript file #36611
Closed
@DanielRosenwasser Daniel Rosenwasser (DanielRosenwasser) mentioned this pull request Mar 4, 2020
Crash in JS constructors initialized with intermediate module.exports assignment #37194
Closed
@andrewbranch Andrew Branch (andrewbranch) mentioned this pull request Mar 24, 2020
Auto import suggestions don't work (JS/CommonJS/Node.js project) #35592
Closed
@mjbvz Matt Bierner (mjbvz) mentioned this pull request Mar 27, 2020
No auto import suggestion in JS node project microsoft/vscode#93002
Closed
@liborm85 Libor M. (liborm85) mentioned this pull request Jul 10, 2020
"export 'default' (imported as 'pdfMake') was not found in 'pdfmake/build/pdfmake' Angular 10.0.0 bpampuch/pdfmake#2009
Closed
@boaz-codota Boaz Berman (boaz-codota) mentioned this pull request Aug 4, 2020
Issues with auto-import react-typescript project in tsx files codota/tabnine-vscode#113
Closed
@github-actions github-actions Bot mentioned this pull request Aug 14, 2022
Remove span tag in title and unnecessary TOC in Ko microsoft/TypeScript-Website-Localizations#164
Merged
@microsoft Microsoft (microsoft) locked as resolved and limited conversation to collaborators Oct 21, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

@sandersn Nathan Shively-Sanders (sandersn) sandersn approved these changes
@sheetalkamat Sheetal Nandi (sheetalkamat) Awaiting requested review from sheetalkamat
@orta Orta Therox (orta) Awaiting requested review from orta
@weswigham Wesley Wigham (weswigham) Awaiting requested review from weswigham

Uh oh!

There was an error while loading. Please reload this page.

Assignees

@andrewbranch Andrew Branch (andrewbranch)

Labels

Author: Team

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Automatic imports for react function not working in js but resolved correctly in ts Use node require for auto imports?

Uh oh!

There was an error while loading. Please reload this page.

4 participants

@andrewbranch @sandersn @weswigham @typescript-bot
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.