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

[char0n]

Hi everybody,

Yes, v4.9.0 introduced true ESM build fragments for SwaggerUI. These new ESM build artifacts are expected to be used by bundlers and we primarily targetted webpack@5 and Create React App. We expected, there might be implications and we're trying to address those implication as they arise.

The solution outlined by @DjVreditel looks good:

import dynamic from "next/dynamic";

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

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

Anybody that's looking for a solution that don't use next/dynamic here it is:

I did a fresh installation of Next.js and installed swagger-ui-react. Then I edited pages/index.js and put a following code inside the file:

pages/index.js

import SwaggerUI from 'swagger-ui-react';
import 'swagger-ui-react/swagger-ui.css';

export default function Home() {
  return (
      <SwaggerUI url="https://petstore.swagger.io/v2/swagger.json" />
  )
}

Then I installed next-transpile-modules and modified next.config.js so that it looks like this:

next.config.js

/** @type {import('next').NextConfig} */
const withTM = require('next-transpile-modules')([
  'swagger-ui-react',
  'react-syntax-highlighter',
  'swagger-client'
]);

const nextConfig = {
  reactStrictMode: true,
}

module.exports = withTM(nextConfig);

After these small changes in next.config.js I was able to get the SwaggerUI building without issues.

---

Now these are all workarounds, the goal is to try achieve the support for Next.js without any additional configuration. Let's see if we can get there.

Note: SwaggerUI doesn't support SSR

[rbong]

Just in case anyone runs into the same issue - I tried the dynamic import solution, but still ran into the error transpiling while using babel-plugin-istanbul. @char0n 's solution using transpilation instead fixed it for me.

[char0n]

Created a POC repo integrating swagger-ui-react@5 with next@13.4.9. Looks like Next.js now work with SwaggerUI without any configuration. This is probably related to 6aa1b44

[char0n]

Created a SwaggerUI wiki page https://github.com/swagger-api/swagger-ui/wiki/Seamless-Integration-with-Bundlers-&-Test-Tools where integration with Next.js is now documented.