Importing named exports from an index.js file which exports defaults doesn't work properly?

Avatar
Michael
Created

Sorry for the weird title, it's a bit hard to explain without repeating "export" and "import" all over the place.

In my React application, I am using absolute imports in my "jsconfig.json" file. It looks like this:

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

The "components/" directory is at the root of the "src/" directory, so I can import using it directly.

Maybe I'm misunderstanding how importing and exporting works in JavaScript/JSX, but my understanding is that if I have a file which does this:

const Button = () => <button>My button component</button>;

export default Button;

And I have an "index.js" file in the same directory which does this:

export {default as Button} from './Button';

I'm supposed to be able to import the Button component by using the following line:

import {Button} from 'components';

Since the "index.js" file that is inside the "components/" directory makes the component available for import.

The issue is that Webstorm doesn't add curly braces around the component when auto-importing.

It does this:

import Button from 'components';

When I expect it to do this:

import {Button} from 'components';

This causes problems, because what Webstorm adds doesn't work ("Button" is not a default export, it's a named export, so this crashed the React application).

Right now, I can work around it by not exporting my Button component as a default from its own file, and then removing the "default as" part from my "index.js" file as such:

const Button = () => <button>My button component</button>;
export {Button};
export {Button} from './Button';

Webstorm will then properly add curly braces around the "Button" import.

I'm not a big fan of this workaround, since this means that I essentially need to make my components not use default exports, which is kind of silly when all I'm doing is exporting a single component per component file, but maybe I'm misunderstanding how imports/exports are supposed to be done, and this is intentional?

Is this just a bug in Webstorm or am I doing something wrong here?

Votes

0

Share

7 comments
Avatar
Elena Pogorelova
Created

works fine for me when using similar settings and code

Please share a test project the issue can be repeated with

0
Avatar
Michael
Created

I've uploaded a demo project to GitHub with the ".idea" directory still intact (without "workspace.xml").

Here's a link to the repo:

https://github.com/micka190/webstorm-broken-import-demo 

0
Avatar
Elena Pogorelova
Created

Can't reproduce using your project - the IDE auto-imports a component as

import {MyComponent} from "./components";

 

 

Please share a screenshot of Settings | Editor | Code Style | JavaScript | Imports page

0
Avatar
Michael
Created

There's a screenshot of it on the repo, along with a video of it happening.

Here's a copy of the screenshot, though:

0
Avatar
Elena Pogorelova
Created

Could you check if disabling Use paths relative to the project, resource or sources roots (and re-opening the project) makes things any better?

0
Avatar
Michael
Created

Doing that kind of fixes the issue, but it breaks other stuff.

It "kind of" fixes the issue because now it properly imports the component as:

import {MyComponent} from 'components';

But every time I want to auto import, it asks me to specify which path I want to import it from ("components" or "./components/MyComponent"), which is why I had the setting enabled in the first place. This means if I'm in a nested directory, I'll get options like "../../../components/MyComponent" instead of just automatically importing from "components".

It also breaks importing things like classes. So, if I have a "MyClass" import, doing this:

new MyClass();

Imports it like this:

import {MyClass} from '../../some-directory/MyClass';

Without even asking me if I want to use a relative path or an alias path. Manually changing the import path to something like "some-directory" (which exports the class from an "index.js" file) still works, though (it's what it would've used if the setting is enabled).

So while it does fix importing components, but makes it annoying because I have to choose the path manually every time and the paths that are relative to the current file are always first (i.e. "../../components/"), it breaks importing things that aren't components.

If this is just supposed to work, then maybe I should just do a clean install at this point?

0
Avatar
Elena Pogorelova
Created

Submitted to developers as https://youtrack.jetbrains.com/issue/WEB-51842, please follow it for updates

0

Please sign in to leave a comment.