swagger-ui-react "SyntaxError: Cannot use import statement outside a module"

[xpollen8]

Q&A (please complete the following information)

• OS: MacOS 10.13.6
• Browser: All (Firefox, Brave)
• Version:
• Method of installation: npm
• Swagger-UI version: 4.15.0
• Swagger/OpenAPI version: OpenAPI 3.0.1

Content & configuration

Bug is unrelated to Swagger content/config.

node -v
v14.19.0

(Also fails on node v17.9.1)

npm -v
8.19.2

package.json

{ 
  "name": "bugger",
  "version": "0.1.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "12.3.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "swagger-ui-react": "^4.15.0"
  }
}

pages/index.js

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

const spec = {
  "openapi": "3.0.1",
  "info": {
    "title": "title",
    "description": `description`,
    version: 'version'
  },
  "paths": {
     // valid paths..
  }
};

export default () => <SwaggerUI spec={spec} />;

Describe the bug you're encountering

Following your example code, in a minimum next-app installation, swagger ALWAYS throws this error:

SyntaxError: Cannot use import statement outside a module

/node_modules/swagger-ui-react/commonjs.js:10:53

Caused by this line import SwaggerUI from 'swagger-ui-react';

Even when converted to older style const SwaggerUI = require('swagger-ui-react');, the error is thrown.

To reproduce...

Steps to reproduce the behavior:

1. npx create-next-app@latest bugger && cd bugger
2. paste the pages/index.js and package.json contents shown above
3. npm i
4. npm run dev
5. load http://localhost:3000/ in browser
6. See error

Expected behavior

Expecting not to see SyntaxError: Cannot use import statement outside a module

Additional context or thoughts

The same error occurs during Vercel deployments.

I've successfully used SwaggerUI on macOS more modern that this 10.13.6 machine.

Even though both macOS are otherwise using identical versions of node/nextjs/react, etc.

[jonniedarko]

I am seeing this same issue using the sample snippet with nextjs 12.2

import SwaggerUI from "swagger-ui-react"
import "swagger-ui-react/swagger-ui.css"

export default App = () => <SwaggerUI url="https://petstore.swagger.io/v2/swagger.json" />

[simPod]

I fixed it with

const withTM = require('next-transpile-modules')([
  'react-syntax-highlighter',
  'swagger-client',
  'swagger-ui-react',
]);

module.exports = withTM({});

(https://github.com/martpie/next-transpile-modules)

but I'd rather see the swagger-ui work out of the box. There's rather too many issues with including it in apps.

[jonniedarko]

I am seeing this same issue using the sample snippet with nextjs 12.2

import SwaggerUI from "swagger-ui-react"
import "swagger-ui-react/swagger-ui.css"

export default App = () => <SwaggerUI url="https://petstore.swagger.io/v2/swagger.json" />

I actually solved my issue with the next dynamic import

[simPod]

That stops working with Next.js 13.0.2 though.

[xpollen8]

I fixed it with

const withTM = require('next-transpile-modules')([
  'react-syntax-highlighter',
  'swagger-client',
  'swagger-ui-react',
]);

module.exports = withTM({});

(https://github.com/martpie/next-transpile-modules)

but I'd rather see the swagger-ui work out of the box. There's rather too many issues with including it in apps.

Added that to my next.config.js and it did the trick.

[simPod]

I have found even better way now with

const nextConfig = {
  experimental: {
    transpilePackages: ['react-syntax-highlighter', 'swagger-client', 'swagger-ui-react'],
  },

The previous had some issues

[derek-primumco]

How To Use Swagger UI React in Next.js Apps

Transpiling packages in the configuration file is now stable as of Next 13.1, so this code fixed the error "Cannot use import statement outside a module" in swagger-ui-react for me.

/** @type {import('next').NextConfig} */
const nextConfig = {
  // Transpile Swagger UI React. https://github.com/swagger-api/swagger-ui/issues/8245
  transpilePackages: ['react-syntax-highlighter', 'swagger-client', 'swagger-ui-react'],
};

module.exports = nextConfig;

[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