React-styleguidist: Named exports are not supported

[smashercosmo]

I don't know if it's a bug or by design, but...

Current behavior

Named component exports are not supported even with @component annotation

To reproduce

try to load component with named export in styleguidist

Expected behavior

It used to work before. And should still work, considering that named exports are gaining more popularity over default exports (https://humanwhocodes.com/blog/2019/01/stop-using-default-exports-javascript-module/)

Upd: another example of named exports becoming new default (😄): https://github.com/este/este/issues/1684

[SammyM]

I've also encountered this issue. A workaround is to import the component into each example in the markdown file like so:

import { Component } from 'components';

<Component />

But this isn't ideal, and also wouldn't work for people who use the defaultExample: true setting.

[adriankremer]

since i've updated to 9.x importing on the same module name as the Markdown file produces: SyntaxError: Identifier 'Button' has already been declared.

[korziee]

since i've updated to 9.x importing on the same module name as the Markdown file produces: SyntaxError: Identifier 'Button' has already been declared.

I'm getting the same error, without looking at the source code I'd assume that the identifier was previously set using var/let and since has been changed to const.

We've been using this method of importing the component into every readme through a named export. Has anyone had any success in mitigating this?

It would be great if we could turn off auto import by default.

[quentez]

We're also stuck on v8 because of the above.

[MattAndDev]

Hi there, stuck in a smiliar not-upgradable condition.

What we have named exports for functional components:
components/component-name.jsx

const ComponentName = () => (<p></p>)
ComponentName.propTypes = {}

This works beautifully in 8.x.x but breaks in resolving correctly the components in 9.x
I played around a bit with propsParser and resolver options, but it does not seem a react-docgen issue (it resolves the correct docs for the given named export).

With a little bit of direction (where to look) I'd be happy to contriibute back.

Amazing work 👍

[mendrew]

Possible problematic place

I've been experimenting with this and found that these lines are responsible for example code imports
https://github.com/styleguidist/react-styleguidist/blob/f43cb8ae6eab0b2b5a016bcdab2430a1f2c3b3af/src/loaders/examples-loader.js#L74-L90

And comments are valid.
First we do

// const name$0 = require(path);

and then

// const name = name$0.default || name$0;

So, for component which we export like

export function Button() {
...
}

and import in example index file is like

export { Button } from './Button';

the code will be something like this

const Button$0 = require(...);
const Button = Button$0.default || Button$0;

So, here no place for named exported Button.

Solution I tried

I've changed this loader code to this:

diff --git a/src/loaders/examples-loader.js b/src/loaders/examples-loader.js
index 54331c1..bd63ae5 100644
--- a/src/loaders/examples-loader.js
+++ b/src/loaders/examples-loader.js
@@ -82,8 +82,11 @@ export default function examplesLoader(source) {
                b.variableDeclaration('const', [
                    b.variableDeclarator(
                        b.identifier(name),
-                       b.logicalExpression('||', b.identifier(`${name}$0.default`), b.identifier(`${name}$0`))
-                   ),
+                       b.logicalExpression('||',
+                           b.logicalExpression('||', b.identifier(`${name}$0.default`), b.identifier(`${name}$0.${name}`)),
+                           b.identifier(`${name}$0`)
+                       ),
+                   )
                ]),
            ])
        )

And now it works for named export, but other example components are broken.
For example this one:
https://github.com/styleguidist/react-styleguidist/blob/f43cb8ae6eab0b2b5a016bcdab2430a1f2c3b3af/docs/Documenting.md#L254-L261

Questions

@sapegin could you please help here?
Did I find the right place for this problem?
Could you please point me to the right direction?

In the v8.0.6 this loader code looked like this https://github.com/mendrew/react-styleguidist/blob/53036832b6b9915ee93f42cf23f39ffbd6206762/loaders/examples-loader.js#L53-L60
And I don't understand why it was working...
I found this commit which introduced change here with the commit message: Refactor: Improve default/named module resolution in example

[sapegin]

const name = name$0.default || name$0; should be probably extended to const name = name$0[name] || name$0.default || name$0;. Which is probably what you were trying to do ;-) but I'm not sure why it breaks other imports. Could you make a PR with this change? I could help with debugging.

[mendrew]

Yep, will do!

[styleguidist-bot]

:tada: This issue has been resolved in version 9.1.6 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: