Steps I performed which solved my problem.

• Install pdfjs-dist.

• npm install pdfjs-dist

• Second step this is something you have to do, if you get below error,

op-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 2 overrides)

• It has to do with vite.config.js file.
• I found solution for that from this post. Add below code in your vite.config.js file.

build: {
    target: "es2022"
  },
  esbuild: {
    target: "es2022"
  },
  optimizeDeps:{
    esbuildOptions: {
      target: "es2022",
    }
  }

• Then you need to import file like this,

import * as pdfjsLib from "pdfjs-dist";
import * as pdfWorker from "pdfjs-dist/build/pdf.worker.mjs";

if you will not import second then you might get below error.

pdfWorker is not defined

I found out the issue was scoped CSS. Since the element renders later, the scoped CSS wasn't getting applied. Below is the imported css that needs to be in an unscoped style tag.

@import '../../node_modules/pdfjs-dist/web/pdf_viewer.css';