Version 4.10.3 causes next.js app to fail run due to a SyntaxError

[simPod]

Similar to #7944 but for next.js

Q&A (please complete the following information)

• OS: macos/linux
• Method of installation: npm
• Swagger-UI version: 4.10.3

Content & configuration

{
  "compilerOptions": {
    "target": "ES6",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,

Describe the bug you're encountering

In next.js app build crashes on

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1027:15)
    at Module._compile (node:internal/modules/cjs/loader:1063:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:999:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/path/node_modules/swagger-ui-react/commonjs.js:10:53)
    at Module._compile (node:internal/modules/cjs/loader:1099:14) {
  type: 'SyntaxError'
}

To reproduce...

• Require swagger react
• import SwaggerUI from 'swagger-ui-react';

Expected behavior

No err

Additional context or thoughts

It worked ok on 4.2.1

[motechFR]

I've also run into this issue with Next.js

Workaround for now is to downgrade to swagger-ui-react 4.6.1

[mustaphaturhan]

I've also run into same issue with Next.js@12.1.4.

I though downgrading swagger-ui-react to 4.8.1 can solve this problem but it was breaking my application after build. It was showing an error in UI Application error: a client-side exception has occurred (see the browser console for more information). and TypeError: batch is not a function in console.

This error is happening if you are using new swc minifier. I removed swcMinify: true from my next.config.js file as a workaround.

[TannicArturo98]

I'm using Next.js@11.0.1 and this error appear only with swagger-ui-react v4.9.0 and above.

Using v4.8.1 it builds without errors but, when i try to build for production on Vercel, it returns me the same error:

[Xhale1]

Can confirm that this error exist for v4.9.0 and up on a fresh next.js installation.

[DjVreditel]

It worked for me:

import dynamic from "next/dynamic";

const SwaggerUI = dynamic(import('swagger-ui-react'), {ssr: false})

const Test = () => <SwaggerUI spec={data}/>
export default Test

[TannicArturo98]

@DjVreditel
It works. Thanks.

[DjVreditel]

@TannicArturo98 you are welcome

[ohager]

It worked for me:

import dynamic from "next/dynamic";

const SwaggerUI = dynamic(import('swagger-ui-react'), {ssr: false})

const Test = () => <SwaggerUI spec={data}/>
export default Test

That's the solution! 🙏

[rafinskipg]

typescript will complain about spec not being a recognized property on swaggerUI with the dynamic import