question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Migrate to named exports

See original GitHub issue

Background

The JavaScript and TypeScript style guides specifically prohibit default exports for ES/TS Modules:

// Do not use default exports:
export default class Foo { ... } // BAD!

// Use named exports:
export class Foo { ... }

// Alternate style named exports:
class Foo { ... }
export {Foo};

For goog.module modules, the JavaScript style guide does not specifically prohibit default exports (exports = MyClass;), but it gives only examples of named exports. (It does give examples of goog.requireing the default export, however.)

Proposal

Migrate all modules which have a default export to use only named exports, so

const MyClass = function(...) {...};
exports = MyClass

becomes

const MyClass = function(...) {...};
exports.MyClass = MyClass;

and the corresponding import is (simultaneously) changed from

const MyClass = goog.require('MyClass');

to

const {MyClass} = goog.require('MyClass');

Discussion

There’s nothing wrong with default exports in the short term, but this is something we will want to fix eventually as we continue the migration from goog.provide -> goog.module -> ES modules -> TypeScript. Issue #5073 records a number of cases where we will probably decide to fix this sooner rather than later. This bug is to ensure that “later” arrives eventually.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:1
  • Comments:7 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
moniikacommented, Jul 28, 2021

But I believe this catch all the cases where we do non-destructuring imports, even the ones where there wasn’t a default export:

# Change all the default imports to named imports
grep -rlE "^const \w+ = goog\.require" core | xargs sed -i -E "s/^const (\w+) = goog\.require/const \{\1\} = goog\.require/"

I see. Good catch! I think we could still write a short temporary script to do this, but we would need something a tad more complex. Something that would save matches of module names that match the first step and use those in the second step. We’d need to save the

1reaction
moniikacommented, Jul 23, 2021

When the time comes, we can automate changing all this with the following commands (swapping out core for each directory we want to fix):

# Change all the default exports to named exports
grep -rlE "^exports = \w+" core | xargs sed -i -E "s/^exports = (\w+)/exports = \{\1\}/"
# Change all the default imports to named imports
grep -rlE "^const \w+ = goog\.require" core | xargs sed -i -E "s/^const (\w+) = goog\.require/const \{\1\} = goog\.require/"
Read more comments on GitHub >

github_iconTop Results From Across the Web

How to migrate default export to named export? - Stack Overflow
This exports React.memo(MyComponent) as default. How can I instead turn this into a named export? javascript · reactjs · typescript.
Read more >
Use Named Exports over Default Exports in JavaScript
Named exports allow us to share multiple objects, functions or variables from a single file and were introduced with the release of ES2015....
Read more >
export - JavaScript - MDN Web Docs
This re-exports all named exports from mod as the named exports of the current module, but the default export of mod is not...
Read more >
Named Export vs Default Export in ES6 - Medium
ES6 provides two ways to export a module from a file: named export and default export. With named exports, one can have multiple...
Read more >
The Difference Between Named and Default Export
With named export, one can have multiple named export per file. And then when you want to import a named component, you use...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found