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

Similar to https://github.com/swagger-api/swagger-ui/issues/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

[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

[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