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

VS Code renaming default export from styled-components

See original GitHub issue

Im using styled-components in a react app and when I try to import the default export (“styled”), my VSCode auto-import-suggestions keeps saying “styledComponents” is the default export. Even though when I open the styled-components source code in node_modules, it clearly says "export default styled". I had it working before with the right name (“styled”), but then it randomly switched to “styledComponents”. I don’t know if I changed some setting by accident? I think it’s something to do with an “alias”

image

When I hover over the import at the top it shows this:

image

Does this issue occur when all extensions are disabled?: Yes

  • VS Code Version: 1.66.2
  • OS Version: 12.3.1

Steps to Reproduce:

  1. Open a react app and install styled-components
  2. Try to import “styled” from “styled-components” and see if the auto-suggested-import is styledComponents

Issue Analytics

  • State:open
  • Created a year ago
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
nikitapryymakcommented, May 9, 2022

@andrewbranch I’m using the “Use VS Code’s Version” option, which is set to 4.6.3

1reaction
nikitapryymakcommented, May 7, 2022
Read more comments on GitHub >

github_iconTop Results From Across the Web

VS Code renaming default export from styled-components
When I hover over "styledComponents" it shows this: (alias) const styledComponents: StyledInterface import styledComponents declare const styled ...
Read more >
VS Code renaming default export from styled-components · Issue ...
Im using styled-components in a react app and when I try to import the default export ("styled"), my VSCode auto-import-suggestions keeps saying ...
Read more >
Default exports vs. named exports | by Sean Baines - Medium
With ES modules, there are 2 ways to export a module: default exports, and named exports. As a quick reminder, a default export...
Read more >
VS Code tips — Convert default export to named ... - YouTube
Today's VS Code refactoring: convert default export to named exportSafely convert between default exports and named exports in JavaScript ...
Read more >
Default Exports in JavaScript Modules Are Terrible - Reddit
This is also why I personally prefer to explicitly rename any default export like so: import { default as y } from 'x'...
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
Previous page

Reverse mapped type with a circular type param sometimes not treated as partially inferrable

Next page

Auto import from yarn workspaces using package's name in the package.json