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

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.

[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

[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" />