Not working on Next 13

[SaadBazaz]

Describe the bug

Hey,
Would've loved this to work, but even with the best of tries, I couldn't get it to work.

After running yarn build, I get the following...

yarn run v1.22.19
$ next build
- info Loaded env from /Users/saadbazaz/Projects/omni-tools/.env
(node:12677) [DEP_WEBPACK_MODULE_UPDATE_HASH] DeprecationWarning: Module.updateHash: Use new ChunkGraph API
(Use `node --trace-deprecation ...` to show where the warning was created)
Failed to compile.

./node_modules/swagger-jsdoc/node_modules/yaml/browser/dist/index.js
Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> import { d as defaultTagPrefix, _ as _typeof, a as _createClass, b as _classCallCheck, c as _defineProperty, e as _slicedToArray, Y as YAMLSemanticError, T as Type, f as defaultTags, g as YAMLWarning, h as _createForOfIteratorHelper, i as YAMLSyntaxError, C as Char, j as YAMLReferenceError, k as YAMLError } from 'swagger-jsdoc/node_modules/yaml/browser/dist/errors-2634d01a.js';
| import { P as PlainValue, D as Document$1, p as parse$1 } from 'swagger-jsdoc/node_modules/yaml/browser/dist/parse-d1ba890f.js';
| export { p as parseCST } from 'swagger-jsdoc/node_modules/yaml/browser/dist/parse-d1ba890f.js';

Import trace for requested module:
./node_modules/swagger-jsdoc/node_modules/yaml/browser/dist/index.js
./node_modules/swagger-jsdoc/node_modules/yaml/browser/index.js
./node_modules/swagger-jsdoc/src/specification.js
./node_modules/swagger-jsdoc/src/lib.js
./node_modules/swagger-jsdoc/index.js
./node_modules/next-swagger-doc/dist/index.js
./src/lib/swagger.ts
./src/app/api-doc/page.tsx


> Build failed because of webpack errors
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Reproduction

Install latest version of Next, and latest version of this lib.

System Info

System:
    OS: macOS 13.5.2
    CPU: (10) arm64 Apple M2 Pro
    Memory: 157.84 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 19.8.1 - ~/.nvm/versions/node/v19.8.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v19.8.1/bin/yarn
    npm: 9.7.2 - ~/.nvm/versions/node/v19.8.1/bin/npm
    pnpm: 8.8.0 - ~/.nvm/versions/node/v19.8.1/bin/pnpm
  Browsers:
    Chrome: 118.0.5993.70
    Safari: 16.6


My Package JSON:

    "jsdoc": "^4.0.2",
    "next": "13.4.19",
    "next-swagger-doc": "^0.4.0",
    "swagger-ui-react": "^5.9.0",

### Used Package Manager

yarn

### Validations

- [X] Follow our [Code of Conduct](https://github.com/antfu/.github/blob/main/CODE_OF_CONDUCT.md)
- [X] Read the [Contributing Guide](https://github.com/antfu/contribute).
- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- [X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
- [X] The provided reproduction is a [minimal reproducible](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.

[jellydn]

Have you tried with example apps on this repo? Let me know if you have the same issue.

[AdaoBJr]

I have the same issue.

[MartinJohannesNilsen]

I have managed to get it running locally by doing this index.tsx:

import ErrorPage from "next/error";
import { GetStaticProps, InferGetStaticPropsType } from "next";
import dynamic from "next/dynamic";
import "swagger-ui-react/swagger-ui.css";
import { createdApiDocSpec } from "../../lib/swagger";
import useAuthorized from "../../components/AuthorizationHook/useAuthorized";
// import SwaggerUI from "swagger-ui-react";

export const getStaticProps: GetStaticProps = async () => {
  const spec: Record<string, any> = createdApiDocSpec;
  return {
    props: {
      spec,
    },
  };
};

const SwaggerUI = dynamic<{
  spec: any;
  url?: string;
  layout?: string;
  plugins?: any;
  persistAuthorization?: boolean;
}>(import("swagger-ui-react"), { ssr: false });

function ApiDoc({ spec }: InferGetStaticPropsType<typeof getStaticProps>) {
    return <SwaggerUI spec={spec} persistAuthorization={true} />;
}
export default ApiDoc;

where my lib/swagger.ts file looks like this:

import { createSwaggerSpec } from "next-swagger-doc";
export const createdApiDocSpec = createSwaggerSpec({...});

Both the dynamic import way, and the direct one seem to work for me locally. However, when trying to deploy to vercel, I get either an error with Jest (not using that myself, so dependency issue there) or value undefined:

// Dynamic import error while building in Vercel
Error: Jest worker encountered 4 child process exceptions, exceeding retry limit
    at ChildProcessWorker.initialize (/vercel/path0/node_modules/next/dist/compiled/jest-worker/index.js:1:11580)
    at ChildProcessWorker._onExit (/vercel/path0/node_modules/next/dist/compiled/jest-worker/index.js:1:12545)
    at ChildProcess.emit (node:events:514:28)
    at ChildProcess.emit (node:domain:489:12)
    at ChildProcess._handle.onexit (node:internal/child_process:291:12) {
  type: 'WorkerError'

// Direct import of SwaggerUI
TypeError: Class extends value undefined is not a constructor or null
    at /vercel/path0/node_modules/swagger-ui-react/swagger-ui-bundle.js:2:809860
    at /vercel/path0/node_modules/swagger-ui-react/swagger-ui-bundle.js:2:1398989
    at /vercel/path0/node_modules/swagger-ui-react/swagger-ui-bundle.js:2:1399005
    at webpackUniversalModuleDefinition (/vercel/path0/node_modules/swagger-ui-react/swagger-ui-bundle.js:2:114)
    at Object.<anonymous> (/vercel/path0/node_modules/swagger-ui-react/swagger-ui-bundle.js:2:244)
    at Module._compile (node:internal/modules/cjs/loader:1256:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
    at Module.load (node:internal/modules/cjs/loader:1119:32)
    at Module._load (node:internal/modules/cjs/loader:960:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)

I don't know if this is better or worse, but I can at least work locally for now

[MartinJohannesNilsen]

I got it working now using the direct import of SwaggerUI. The error was fixed by upgrading node to latest version (20.5.0+ I believe), and for me it did work locally but not in production as Vercel was using Node 18. Upgrading node and using the static import seemed to do the trick @SaadBazaz @AdaoBJr

[SaadBazaz]

I've switched to Next REST Framework for now, but will surely give this a go in the future.