Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Error: import or require() statements can be added only by editing a Markdown example file #421

Closed
mtlehtin opened this issue May 22, 2019 · 23 comments
Closed

Error: import or require() statements can be added only by editing a Markdown example file #421

mtlehtin opened this issue May 22, 2019 · 23 comments
Labels
bug Something isn't working

Comments

@mtlehtin
Copy link

Hi!

I updated vue-styleguidist from 2.1.2 to 3.13.4. After the update requiring json-data for the documentation examples in the markdown does not work. The example below works on 2.1.2 but is broken on 3.13.4. I did not notice any comments related to this in the release-notes.

My markdown looks something like this:

const tableData = require('./tabledata.json')

<div>
  <my-fancy-table
    :data="tableData" />
</div>

Current behavior

Does not render the component, but it renders an error:

"Error: import or require() statements can be added only by editing a Markdown example file"

Expected behavior

Should render the component with required sample data.
@elevatebart elevatebart added bug Something isn't working need repro labels May 22, 2019
@elevatebart
Copy link
Member

Have you tried, stopping and restarting styleguidist?
The hot reloading engine might be a little stupid.

This being said, I just added an example where I test this exact feature.
Bad news for both of us, it works.

Would it be possible for you to share a repo where you reproduce this issue?
I would as well love to know what version of Node you are running and what OS you are using.
Thank you in advance

@jangarcia
Copy link

jangarcia commented May 22, 2019 •
edited

I have the same problem since updating to 3.11.0, which contains an update of the react-styleguidist dependency to 9.0.4. Our problem seems to be related to this issue, and the root cause seems to be this npm bug, see this comment. In short, the npm bug results in a wrongly hoisted acorn peer dependency. There seem to be some workarounds that are mentioned in the links and that you may want to try out, involving manually installing a specific acorn version in the root package.json or simply using yarn instead of npm.

@elevatebart
Copy link
Member

I believe if you delete your package-lock.json and you node_modules folder, then re-install the whole thing can fix it.

@mtlehtin
Copy link
Author

Hi! Thanks for the answers. I tried these:

  • deleted package-lock.json and re-install
  • updated eslint and jest which were using older acorn version
  • updated acorn@6.1.1 to my package.json

package-lock and node_modules deleted in each case. None of these helped. The problem still exists.

My project is based on VueDS.com boilerplate-project.

Original:

+-- eslint@4.19.1
| `-- espree@3.5.4
|   +-- acorn@5.7.3
|   `-- acorn-jsx@3.0.1
|     `-- acorn@3.3.0
`-- jest@23.6.0
  `-- jest-cli@23.6.0
    `-- jest-environment-jsdom@23.4.0
      `-- jsdom@11.12.0
        +-- acorn@5.7.3  deduped
        `-- acorn-globals@4.3.0
          `-- acorn@6.0.2

After jest and eslint update:

+-- eslint@5.16.0
| `-- espree@5.0.1
|   `-- acorn@6.1.1
`-- jest@24.8.0
  `-- jest-cli@24.8.0
    `-- jest-config@24.8.0
      `-- jest-environment-jsdom@24.8.0
        `-- jsdom@11.12.0
          +-- acorn@5.7.3
          `-- acorn-globals@4.3.2
            `-- acorn@6.1.1

After acorn@6.1.1 update:

+-- acorn@6.1.1
+-- eslint@4.19.1
| `-- espree@3.5.4
|   +-- acorn@5.7.3
|   `-- acorn-jsx@3.0.1
|     `-- acorn@3.3.0
+-- jest@23.6.0
| `-- jest-cli@23.6.0
|   `-- jest-environment-jsdom@23.4.0
|     `-- jsdom@11.12.0
|       +-- acorn@5.7.3
|       `-- acorn-globals@4.3.2
|         `-- acorn@6.1.1  deduped
+-- vue-styleguidist@3.13.5
| +-- acorn@6.1.1  deduped
| +-- buble@0.19.7
| | `-- acorn@6.1.1
| +-- react-styleguidist@9.1.2
| | `-- acorn@6.1.1
| `-- vue-docgen-api@3.13.5
|   `-- pug@2.0.3
|     +-- pug-code-gen@2.0.1
|     | `-- with@5.1.1
|     |   +-- acorn@3.3.0
|     |   `-- acorn-globals@3.1.0
|     |     `-- acorn@4.0.13
|     `-- pug-lexer@4.0.0
|       `-- is-expression@3.0.0
|         `-- acorn@4.0.13
+-- webpack@4.32.2
| `-- acorn@6.1.1  deduped
`-- webpack-bundle-analyzer@3.3.2
  `-- acorn@6.1.1

@elevatebart
Copy link
Member

elevatebart commented May 23, 2019 via email

@RyanHavoc
Copy link

I also have the exact same issue. Anything after version 3.10.2.

@elevatebart
Copy link
Member

@RyanHavoc Would you mind setting up a minimum reproduction repo and put the link here.
That would help a lot fixing the issue.

Bart

@RyanHavoc
Copy link

@elevatebart Sure. I've created this: https://github.com/RyanHavoc/vue-sg

Note the example in the cookbook for accessing components in markdown files: https://vue-styleguidist.github.io/docs/Cookbook.html#how-to-hide-some-components-in-style-guide-but-make-them-available-in-examples

I see this:
image

If I remove the Vue require I get the error everyones talking about here.

image

@elevatebart
Copy link
Member

I found the issue and it was easy to fix ;)
Thank you @RyanHavoc for setting up the repro

@RyanHavoc
Copy link

@elevatebart Great! When will the fix be released?

@RyanHavoc
Copy link

@elevatebart Hmm... tried updating the file you changed locally for me and now I get this error on the command line when trying to start the styleguide:

image

Same repo...

@elevatebart
Copy link
Member

This is to be expected. From the ReadMe file, AppButton.vue can't be found.

You could replace it by require('./AppButton.vue').default.

According to the doc, all components are loaded by default unless you use the magic option to only load the local one.

@elevatebart
Copy link
Member

This

const Vue = require('vue').default
const AppButton = require('AppButton').default
Vue.component('AppButton', Button)

<Card>
  <AppButton />
</Card>

becomes this

const AppButton = require('./AppButton').default
Vue.component('AppButton', AppButton)

<Card>
  <AppButton />
</Card>

should be this

<Card>
  <AppButton />
</Card>

@RyanHavoc
Copy link

This is in opposition to the documentation though?

https://vue-styleguidist.github.io/docs/Cookbook.html#how-to-hide-some-components-in-style-guide-but-make-them-available-in-examples

And If I just have:

<Card>
  <AppButton />
</Card>

I the readme, the button doesn't render:

image

@elevatebart
Copy link
Member

You are absolutely right I need to update this recipe of the cookbook.
Did step 2 make it work?

@RyanHavoc
Copy link

@elevatebart I'm afraid not. This is what I see:

image

image

image

image

image

@elevatebart
Copy link
Member

Good point, I forgot about the hiding of components.

@elevatebart
Copy link
Member

I created a new PR for it:

#428

@RyanHavoc
Copy link

Great. Thanks for you time on this. Any idea when this will be merged and available as a new version?

@elevatebart
Copy link
Member

elevatebart commented May 23, 2019 via email

@mtlehtin
Copy link
Author

Nice! Thank you guys!

@RyanHavoc
Copy link

@elevatebart What timezone are you in? Just wondering if there's an ETA on the merge.

@elevatebart
Copy link
Member

Chicago is CT, merge is incomming

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@RyanHavoc @mtlehtin @elevatebart @jangarcia