#Help getting the Docs plugin to work

35 messages · Page 1 of 1 (latest)

fluid patio
#

I'm trying to add the storybook plugin docs, and it wanted me to add '../src/*/.mdx'
but it looks like your template already had that, all good, but when I try to view it and see if I have the docs tab, I get the following error.

[vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. You may need to install appropriate plugins to handle the .mdx file format, or if it's an asset, add "**/*.mdx" to assetsInclude in your configuration.
Plugin: vite:import-analysis
File: /path/to/directory/src/Configure.mdx:32:7

This is the template I started using and I haven't really done much to it.
https://github.com/winkerVSbecks/storybook-html-templates-demo/

My main.ts is unchanged from the template and already had ../src/**/*.mdx
any idea why that's happening?

The documentation here:
https://github.com/storybookjs/storybook/tree/next/code/addons/docs/web-components#installation

Shows I should have a custom-elements.json manufest, but I don't have that anywhere. I saw some examples out there but I don't know what is supposed to go into it or if that is the problem here.

brazen spire
fluid patio
#

@brazen spire right now it's on a closed repo, but I can publish it to github later today, thank you for looking into it!
The starting docs is really confusing, at least for HTML, because it just has a button and it uses JS to generate the button and other JS to act on the button, so then to figure out how to make a dropdown, or checkbox, or just some different, or a text input, I didn't know where to start, so @jolly gull was nice enough to modify the stories to use a template literal and I could just pass values in there.
If you just download that template and run the two yarns to install docs and react and then make this change, you would be where i was at. If there was another step then I missed it

image.png
fluid patio
#

But yeah, yesterday I tried adding in the code change in this image as well as the two yarn installs in a brand spankin' new HTML distro of storybook and it was still having issues. Is there some other piece I am missing? I get the HTML version is community and isn't fully supported, but we aren't using a framework in our site, it's a C# based CMS (umbraco) so all our code examples are vanilla CSS and HTML

brazen spire
#

Ah okay I see what's going on here. Maybe.
You have addon-essentials, which is a collection of addons, including addon-docs. So you've had it all along.
Adding it a second time should produce another warning though.

fluid patio
#

Hi @brazen spire , not sure what happened there, but yea, I saw the 7.5 version and the alpha. It could be a dozen things that I may have done to it so I forked a new version of the template and just started over.
Here is a more pure version:
https://github.com/shellwe/storybook-html-templates-demo/tree/adding-addon-docs
All I did was fork @jolly gull's version, added in the jackspeak, because for some reason it needed that to run yarn storybook and then I checked to see if storybook/addon-docs was in package.json and made sure it wasn't (it wasn't) and then I ran the two commands to get on docs and another to get on react (which I think it already had that but I ran it anyway) and then here I am with the error I had before.
It's all in one single commit and was pretty quick, and it still gives the error.

image.png
GitHub
GitHub - shellwe/storybook-html-templates-demo at adding-addon-docs

Storybook from Varun using template literals. Contribute to shellwe/storybook-html-templates-demo development by creating an account on GitHub.

brazen spire
#

Okay, two things are happening here:

  1. this is a very common error, as you have also seen in the link. you say that you're on the latest yarn, but you're not, as you can see at the very top of your screenshot it says yarn run v1.22.19, and yarn v1 is exactly the broken version. you probably want to run yarn set version stable in the project to install yarn v3, which should fix that specific error - you might need to delete the lock file.

  2. your broken commit adds addon-docs, and my previous message was probably confusing. What I mean is, is that you already have addon-essentials, which contains addon-docs internally, so you don't need to add anything more. You don't need to install the dependency, you don't need to add addon-docs to your list of addons, it's already there within addon-essentials. addon-essentials is just a collection of default addons we recommend, including addon-docs. so you can remove addon-docs again.

if you do those two things, it should hopefully start working

fluid patio
#

@brazen spire ah! Yes, I saw that it needed Yarn 3 so I went and checked my version of yarn and thought it was strange it was 1.x since i downloaded it just a couple weeks ago (never really used Yarn much) and even checked out this page:
https://www.npmjs.com/package/yarn
Which said current version 1.22.19, guess I didn't notice that it was published a year ago, I'm guessing that's abandoned.
I didn't realize addon-essentials already had it, if it has it already I won't touch anything else.
Thanks!

brazen spire
#

(I'd really recommend pnpm or even npm over yarn at this point)

fluid patio
#

Good to know!

#

I thought yarn was newer and better and more secure

#

and coudl download files simultaniously

#

honestly just googled it yesterday, I know very little about yarn

#

my coworker wants to stay on npm so one of my projects is moving from yarn to npm

#

I'm guessing that would just be changing my packages.json files, change the yarn commands to npm commands

brazen spire
#

that was the case a few years ago when it came out, but npm has caught up to all of that, an pnpm is even faster in that regard.

#

yeah and replacing the lock file

fluid patio
#

yeah, to replace that you just blow it away and rerun npm install right?

brazen spire
#

yup

fluid patio
#

awesome! Thanks for your help

#

This storybook stuff is so confusing

brazen spire
#

if you're using yarn 3 you probably also have a .yarn directory to delete.

#

I'm sorry you feel that way. I can understand how this setup process has been weird to you

fluid patio
#

I'm thankful for this template because the vanilla HTML version is because for the Storybook html it doesn't have some template literal where I can swap out the button for osmething else

#

it just has a create element with JS

#

it's like... I had no clue how to take that button and make an input, or a checbox, or a dropdown

#

or anything else

#

it was very unclear on what to change

#

but I get the HTML version is community, so documentation is more scarce

brazen spire
#

yeah that makes sense. there's also a disconnect between the docs site and docs in readmes, which aren't always up to date.

fluid patio
#

Yeah, I probably should just go through one of the tutorials, even though its in react or angular or whatever, just to get a better idea of what all the pieces are, there isn't any tutorials for HTML, honestly surprised it's not more popular as there are still many places that don't use a JS framework, whether it's because they use a CMS like us, or C# razor pages or whatever

#

Thanks again for taking the time to help!

storm perch
#

switch

fluid patio
#

switch?