Error when importing component in Markdown file

[myles-sigsci]

Current behavior

Hello, I am attempting to import a JSX component into a Markdown documentation file. I'm creating an alias for these styleguide-only view components in my styleguide.config.js:

module.exports = {
  ...  
  webpackConfig: {
    resolve: {
      alias: {
        styleguideComponents: path.resolve(STYLEGUIDE_PATH, './components')
      }
    }
  }
}

console.log'ing the path shows it to be as expected, and when I import a component in my Markdown file, it throws no errors:

```jsx noeditor
import { Do } from 'styleguideComponents';

<Do>
  You should do this thing.
</Do>

Here is the <Do /> component, for reference:

import React from 'react'

const Do = ({ children }) => (
  <div className='Do'>
    { children }
  </div>
)

export default Do

However, when I load the styleguide, I get a red error saying "SyntaxError: Missing initializer in const declaration". I am using the latest react-styleguidist version.

Any advice is much appreciated :)

[sapegin]

I was trying to setup similar aliases recently and had issues too. I don't remember if it was the same error or a different one, but I couldn't find the reason.

SyntaxError: Missing initializer in const declaration

This sounds like some issues with our imports compilation. Worth adding some console.logs there to see the output.

[tonyjmartinez]

I think your problem is how you're importing/exporting.

In the Do component you're doing a default export. export default Do

But in your Markdown file you're doing a named import. import { Do } from 'styleguideComponents';

Default Import So you can try switching the Markdown file to: import Do from 'styleguideComponents';

Named Export Or change your Do component to: export const Do = props => <div className="Do">{props.children}</div>;

So that you stick with either default imports or named imports.

Also, the way you're importing styleguideComponents expects there to be an index.js file in the src/components folder.

So if it's actually a Do.js file, the correct import line would be: `import Do from 'styleguideComponents/Do'

[tonyjmartinez]

@sapegin I think you can close this issue

[ksvirsky]

Hello. I have strange issue in styleguidist. My example file (Readme.md) renders a component. But it started to show the error: SyntaxError: Missing initializer in const declaration

I could figured out that the issue is caused by the line of code:

MyComponent.displayName = "my compo nent";

I need to set custom display name so I use the line of text similar to the one above. Once I remove the 3rd word (or in this case make "compo nent" to be one word "component" -- everything works well.

I've updated to styleguidist 13.0.0, but the issue is this there.

Am I using the wrong prop to set custom display name for my component or there is an issue?