0

I have checked this question regarding the difference between importing with/without curly braces.

In my case, I have a class:

class PathResolver extends Component {
//content
}
export default connect()(PathResolver);

If I use
import { PathResolver } from '/path';
rather than
import PathResolver from '/path';
It will complain: Attempted import error: 'PathResolver' is not exported from '/path'.

These two import statements should be the same when the class name is "PathResolver", but it seems that the importing statement with curly braces cannot find the connected "PathResolver", why?

PhoenixPan
  • 536
  • 7
  • 19

1 Answers1

1

you can do it if you export the class as well.

export class PathResolver extends Component {
//content
}

As currently your component is wrapped around redux you will not be able to access it

Taj
  • 1,718
  • 1
  • 12
  • 16
  • You mean `export class PathResolver`? In that case, the one with curly braces (`import { PathResolver } from '/path';`) will have problems with redux-related feature, such as `this.props.dispatch() is not defined`. It seems it's importing the pure class rather than the connected class. – PhoenixPan Apr 23 '19 at 00:49
  • 1
    @PhoenixPan, It will export the pure component, not the redux based feature. It is basically done for unit testing. Can you please explain your use case. – Taj Apr 23 '19 at 00:51
  • Yeah, I hope to keep the store connection and exported the connected component...it seems that I can't use `import { PathResolver } from '/path'` for connected component, but I don't know why... – PhoenixPan Apr 23 '19 at 01:00
  • buddy it is a weird way of doing it but you can assign your connected component to a variable then do 2 exports – Taj Apr 23 '19 at 01:05
  • Haha, I should simply do `import PathResolver from '/path'` with `default` keyword in the component. Just curious is it possible to explicitly import the connected component :p `import { connect()(PathResolver) } from '/path';` is definitely wrong... – PhoenixPan Apr 23 '19 at 01:16
  • @PhoenixPan by 2 exports you can use it both way export default PathResolver ; export { PathResolver } – Taj Apr 23 '19 at 01:27
  • but not the connected PathResolver? Well, I think I will just stay with default export for connected components, doesn't make sense to really figure out a way to import them explicitly using curly braces...Thanks! – PhoenixPan Apr 23 '19 at 01:30