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.

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

Everything breaks after upgrading to version 1.0.0 #456

Closed
albertodiazdorado opened this issue Nov 8, 2023 · 18 comments
Closed

Everything breaks after upgrading to version 1.0.0 #456

albertodiazdorado opened this issue Nov 8, 2023 · 18 comments
Labels
bug Something isn't working

Comments

@albertodiazdorado
Copy link

Describe the bug

yarn upgrade @asyncapi/html-template@0.28.4
yarn build # works
yarn serve # works

yarn upgrade @asyncapi/html-template@latest
yarn add react@^17.0.2 # peer dependency
yarn build # works?
yarn serve # blank page

I think that the problem is that the generated index.html looks like this (notice shema = undefined):

    <body>
      <div id="root"></div>
  
      <script src="js/asyncapi-ui.min.js" type="application/javascript"></script>
  
      <script>
        const schema = undefined;
        const config = {"show":{"sidebar":true},"sidebar":{"showOperations":"byDefault"}};
        AsyncApiStandalone.hydrate({ schema, config }, document.getElementById("root"));
      </script>
    </body>

I use the generator like this:

import Generator from "@asyncapi/generator"; // Version 1.14.1

const main = async () => {
  const generator = new Generator(
    "@asyncapi/html-template",
    path.resolve(process.cwd(), `./dist`),
  );
  const yamlFile = await fsPromises.readFile(
    path.resolve(__dirname, "./api-config.yaml"),
    "utf-8",
  );
  await generator.generate(yamlFile);
};

main();

Do you have any idea on how to fix? Or how to migrate from version 0.x to 1.x? I could not find any migration guide.

@albertodiazdorado albertodiazdorado added the bug Something isn't working label Nov 8, 2023
Copy link

github-actions bot commented Nov 8, 2023

Welcome to AsyncAPI. Thanks a lot for reporting your first issue. Please check out our contributors guide and the instructions about a basic recommended setup useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.

@Traderjoe95
Copy link

I am experiencing the same issue when calling the generator through the asyncapi CLI

@henhal
Copy link

henhal commented Nov 13, 2023

Same here. This was my first ever use of asyncapi, and it took me some time to realize that my HTML being blank wasn't due to me being an idiot. Even rendering the hello world sample resulted in a blank page.

I guess I had bad luck, getting my first impression of this tool from a completely broken version. 🤷
Works fine when I use @0.28.4.

@zschumacher
Copy link

Same for me, had to pin to 0.28.4

@jonaslagoni
Copy link
Member

Can you folks provide the AsyncAPI document (or a way for us to reproduce it) that fails to be generated to html?

@zschumacher
Copy link

I cannot because it is proprietary but I can try to give some more info.

  • async api version -> 2.6.0
  • command to install cli -> npm install -g @asyncapi/cli
  • command to generate html -> asyncapi generate fromTemplate async-api.yml @asyncapi/html-template -o async_api_docs --force-write -p singleFile=true
  • my spec includes info, channels, channels/subscribe, channels/parameters, components, components/schemas, components/messages

@henhal
Copy link

henhal commented Nov 15, 2023

@jonaslagoni I provided one in the linked issue - but even your own hello world from the docs can reproduce the issue. It's any document as far as I see.

@jonaslagoni
Copy link
Member

jonaslagoni commented Nov 15, 2023

What version of the CLI/generator do you folks use?

With CLI 0.60.1 and even 0.59.0 with the following AsyncAPI document: https://github.com/asyncapi/html-template/blob/master/test/spec/asyncapi_v2.yml It correctly generates the docs for me.

image

I tried with both local template and remote template, here is the commands I ran:

$ asyncapi generate fromTemplate ./test/spec/asyncapi_v2.yml ./ -o test/output --force-write
$ asyncapi generate fromTemplate ./test/spec/asyncapi_v2.yml @asyncapi/html-template -o test/output --force-write
$ asyncapi generate fromTemplate ./html-template/test/spec/asyncapi_v2.yml @asyncapi/html-template -o ./html-template/output --force-write

$ asyncapi --help
All in one CLI for all AsyncAPI tools

VERSION
  @asyncapi/cli/0.59.0 darwin-x64 node-v18.17.0

USAGE
  $ asyncapi [COMMAND]

TOPICS
  config    CLI config settings
  generate  Generate models and template
  new       Creates a new asyncapi file
  start     Start asyncapi studio

COMMANDS
  bundle    bundle one or multiple asyncapi documents and their references together.
  config    CLI config settings
  convert   Convert asyncapi documents older to newer versions
  diff      Find diff between two asyncapi files
  generate  Generate typed models or other things like clients, applications or docs using AsyncAPI Generator templates.
  new       Creates a new asyncapi file
  optimize  optimize asyncapi specification file
  start     Start asyncapi studio
  validate  validate asyncapi file

$ node -v
v18.17.0

@smoya
Copy link
Member

smoya commented Nov 16, 2023

I created a new repository that confirms something doesn't work as expected.

https://github.com/smoya/asyncapi-test-generation

Just clone the repo, run npm i && npm run start and you will have the output of both template versions in out/1.0.0 and out/0.28.4.
I confirm that opening the out/1.0.0/index.html shows a blank page. However the one from out/0.28.4 shows the documentation.

@Traderjoe95
Copy link

AsyncAPI CLI 0.60.0 on Node 21.1.0/Windows

> asyncapi --help
All in one CLI for all AsyncAPI tools

VERSION
  @asyncapi/cli/0.60.0 win32-x64 node-v21.1.0

USAGE
  $ asyncapi [COMMAND]

TOPICS
  config    CLI config settings
  generate  Generate models and template
  new       Creates a new asyncapi file
  start     Start asyncapi studio

COMMANDS
  bundle    bundle one or multiple asyncapi documents and their references together.
  config    CLI config settings
  convert   Convert asyncapi documents older to newer versions
  diff      Find diff between two asyncapi files
  generate  Generate typed models or other things like clients, applications or docs using AsyncAPI Generator templates.  new       Creates a new asyncapi file
  optimize  optimize asyncapi specification file
  start     Start asyncapi studio
  validate  validate asyncapi file

It generates an empty page for me with https://github.com/asyncapi/html-template/blob/master/test/spec/asyncapi_v2.yml. The problem remains after updating to 0.60.1.

@derberg
Copy link
Member

derberg commented Nov 16, 2023

@jonaslagoni when you run generation (you are the only one where it works) can you do it with debug flag, it will clarify what html template version you're using in generation process

@hntirgeam
Copy link

hntirgeam commented Nov 16, 2023

Same behavior here even on 0.28.4

ag <...>.yaml /app/html-template -o <...> --force-write --debug

Remember that your local template must have its own node_modules installed first, "npm install" is not triggered by the generator.
Template sources taken from /app/html-template.
Version of used template is 0.28.4.
[BABEL] Note: The code generator has deoptimised the styling of <...>/asyncapi-ui.min.js as it exceeds the max of 500KB.
File <...>/index.html.js couldn't be found. Error: ENOENT: no such file or directory, stat '<...>/index.html.js'


Done! ✨
Check out your shiny new generated files at <...>

And then:

    <script>
      const schema = undefined;
      const config = {"show":{"sidebar":true},"sidebar":{"showOperations":"byDefault"}};
      AsyncApiStandalone.hydrate({ schema, config }, document.getElementById("root"));
    </script>
  </body>
</html>

generator version:

ag --version
1.14.1

@jonaslagoni
Copy link
Member

jonaslagoni commented Nov 16, 2023

Yeah, gonna try to reproduce it on a clean slate.

Pretty sure I know the cause, but why it's the cause I don't understand 😅 Last time this happened during development it was a mismatch between parser versions...

Gonna see if I can dig it up.

@jonaslagoni
Copy link
Member

So yeah, this was a multitude of bugs... But the TL;DR; is that it's a parser dependency mismatch that caused it, more specifically after asyncapi/parser-js#892 was introduced the dependencies and implementation started to drift across implementations because it was a breaking change and was introduced on a pre-release branch meaning all dependant libraries started using it...

I could hot-fix it here as well, but does not make much sense to introduce as each fix elsewhere will break it again... Here is the list of PRs that need to be merged before it is fully fixed:

Sorry for the inconvenience folks... 🙃

@derberg
Copy link
Member

derberg commented Dec 18, 2023

Can anyone confirm if issue is still there?

From @jonaslagoni list of issues I see all are merged

@albertodiazdorado
Copy link
Author

@derberg works like a charm, I can confirm. I am closing this issue :D

@albertodiazdorado
Copy link
Author

Thanks @jonaslagoni

@nilkanth987
Copy link

@jonaslagoni , This is still happing for me.
Here is my configs

node: 17.8.0
"@asyncapi/generator": "^1.17.4",
"@asyncapi/html-template": "^2.1.5",
Screenshot 2024-02-02 at 3 48 34 PM

Can anyone tell me how to fix it?

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

No branches or pull requests

9 participants