swagger-ui: 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:

npx create-next-app@latest bugger && cd bugger
paste the pages/index.js and package.json contents shown above
npm i
npm run dev
load http://localhost:3000/ in browser
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.

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 26 (13 by maintainers)

Commits related to this issue

docs(swagger-ui-react): hint on usage with Next.js (#8696) Co-authored-by: Vladimír Gorej <vladimir.gorej@gmail.com> Refs #7970 Refs #8245 — committed to swagger-api/swagger-ui by eigenmannmartin a year ago

Most upvoted comments

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;

derek-primumco on Feb 16, 2023

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

simPod on Nov 5, 2022

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

jonniedarko on Nov 1, 2022

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.

simPod on Nov 4, 2022

@YTG2G3 - https://github.com/char0n/swagger-ui-nextjs uses File object polyfill to work in Node.js >=16. Check out the repo to see how to set it up (this commit is particulary what you’re looking for https://github.com/char0n/swagger-ui-nextjs/commit/038e624ba7338467a8ed6c498e467b030e3f6d37)

@Vishakh-vcc if you use latest version of SwaggerUI (5.7.0) and next@13, you shoudn’t see this error. Here is a POC: https://github.com/char0n/swagger-ui-nextjs

char0n on Sep 14, 2023

@conner-cross, @simPod looks like the key is to use Node.js>=20. At this point not sure why, but I’ll make a note about it in the repo.

char0n on Aug 24, 2023

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.

char0n on Aug 22, 2023