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

xpollen8 · 2022-10-22T04:49:17Z

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.

The text was updated successfully, but these errors were encountered:

jonniedarko · 2022-11-01T08:48:27Z

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 · 2022-11-04T09:42:06Z

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 · 2022-11-04T11:57:27Z

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 · 2022-11-04T12:49:13Z

That stops working with Next.js 13.0.2 though.

xpollen8 · 2022-11-05T01:09:09Z

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 · 2022-11-05T08:40:14Z

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 · 2023-02-16T22:57:22Z

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;

Co-authored-by: Vladimír Gorej <[email protected]> Refs #7970 Refs #8245

char0n · 2023-08-22T12:30:02Z

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

char0n · 2023-08-22T15:00:28Z

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.

conner-cross · 2023-08-23T18:46:46Z

I tried running the project in the POC repo and ran into the same error that I am seeing in my own project. The only steps I took were to clone, npm install, and npm run dev, and I can't load the homepage.

- error Class extends value undefined is not a constructor or null

This might be caused by a React Class Component being rendered in a Server Component, React Class Components only works in Client Components. Read more: https://nextjs.org/docs/messages/class-component-in-server-component
    at 94001 (C:\Users\ccross\code\test-repos\swagger-ui-nextjs\node_modules\swagger-ui-react\swagger-ui-bundle.js:2:296152)
    at n (C:\Users\ccross\code\test-repos\swagger-ui-nextjs\node_modules\swagger-ui-react\swagger-ui-bundle.js:2:1321871)
    at C:\Users\ccross\code\test-repos\swagger-ui-nextjs\node_modules\swagger-ui-react\swagger-ui-bundle.js:2:1329936
    at C:\Users\ccross\code\test-repos\swagger-ui-nextjs\node_modules\swagger-ui-react\swagger-ui-bundle.js:2:1445377
    at C:\Users\ccross\code\test-repos\swagger-ui-nextjs\node_modules\swagger-ui-react\swagger-ui-bundle.js:2:1445393
    at C:\Users\ccross\code\test-repos\swagger-ui-nextjs\node_modules\swagger-ui-react\swagger-ui-bundle.js:2:81
    at Object.<anonymous> (C:\Users\ccross\code\test-repos\swagger-ui-nextjs\node_modules\swagger-ui-react\swagger-ui-bundle.js:2:211)
    at Module._compile (node:internal/modules/cjs/loader:1254:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Module._load (node:internal/modules/cjs/loader:958:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25) {
  name: 'TypeError',
  digest: undefined
}

Not sure if I am missing something obvious, but if I am it might be worth adding it to either the integration wiki or the POC repo itself.

simPod · 2023-08-24T07:27:21Z

I can second that I'm getting the same issue as @conner-cross.

TypeError: Class extends value undefined is not a constructor or null
    at 94001 (/builds/app/.yarn/__virtual__/swagger-ui-react-virtual-ec0aa86031/4/build-cache/yarn/cache/swagger-ui-react-npm-5.4.2-bcc2e31f66-10c0.zip/node_modules/swagger-ui-react/swagger-ui-bundle.js:2:296152)
    at n (/builds/app/.yarn/__virtual__/swagger-ui-react-virtual-ec0aa86031/4/build-cache/yarn/cache/swagger-ui-react-npm-5.4.2-bcc2e31f66-10c0.zip/node_modules/swagger-ui-react/swagger-ui-bundle.js:2:1321871)
    at /builds/app/.yarn/__virtual__/swagger-ui-react-virtual-ec0aa86031/4/build-cache/yarn/cache/swagger-ui-react-npm-5.4.2-bcc2e31f66-10c0.zip/node_modules/swagger-ui-react/swagger-ui-bundle.js:2:1329936
    at /builds/app/.yarn/__virtual__/swagger-ui-react-virtual-ec0aa86031/4/build-cache/yarn/cache/swagger-ui-react-npm-5.4.2-bcc2e31f66-10c0.zip/node_modules/swagger-ui-react/swagger-ui-bundle.js:2:1445377
    at /builds/app/.yarn/__virtual__/swagger-ui-react-virtual-ec0aa86031/4/build-cache/yarn/cache/swagger-ui-react-npm-5.4.2-bcc2e31f66-10c0.zip/node_modules/swagger-ui-react/swagger-ui-bundle.js:2:1445393
    at /builds/app/.yarn/__virtual__/swagger-ui-react-virtual-ec0aa86031/4/build-cache/yarn/cache/swagger-ui-react-npm-5.4.2-bcc2e31f66-10c0.zip/node_modules/swagger-ui-react/swagger-ui-bundle.js:2:81
    at Object.<anonymous> (/builds/app/.yarn/__virtual__/swagger-ui-react-virtual-ec0aa86031/4/build-cache/yarn/cache/swagger-ui-react-npm-5.4.2-bcc2e31f66-10c0.zip/node_modules/swagger-ui-react/swagger-ui-bundle.js:2:211)
    at Module._compile (node:internal/modules/cjs/loader:1275:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1329:10)
    at require$$0.Module._extensions..js (/builds/app/.pnp.cjs:31766:33)

char0n · 2023-08-24T07:52:07Z

@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 · 2023-08-24T10:03:30Z

@conner-cross, @simPod - issue is described in detail here char0n/swagger-ui-nextjs#1 and has been resolved in char0n/swagger-ui-nextjs#2

simPod · 2023-08-24T15:03:11Z

Node 20 helped. Thanks

YTG2G3 · 2023-09-06T02:39:59Z

Can't deploy to Vercel since it doesn't support Node 20. I'm using next-swagger-doc library but this dependency seems to be an issue. Any solutions?

char0n · 2023-09-06T05:42:59Z

@YTG2G3, next-swagger-doc is not a library that we maintain. You'll have to discuss the issue with library maintainers. swagger-ui and swagger-ui-react do work out of the box with Node.js >=20, and also with with earlier Node.js versions with File global object polyfill.

Vishakh-vcc · 2023-09-13T20:10:42Z

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 @xpollen8 @derek-primumco
Hi Simon / derek / xpollen

I am facing the same issue now which you have fixed, can you let me know how to resolve this dependency issue of Swagger UI.
Attached is screenshot of my code using SwaggerUI and also the error when I am building it.
My next version installed is : "next": ">=11.1.3",

char0n · 2023-09-14T05:11:30Z

@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 char0n/swagger-ui-nextjs@038e624)

@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

YTG2G3 · 2023-09-14T05:49:15Z

@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 char0n/swagger-ui-nextjs@038e624)

@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

Got it working perfectly!

polyfill.ts:

const f = require('next/dist/compiled/undici');
globalThis.File = globalThis.File ?? f.File;

layout.tsx:

import '@/lib/polyfill';

char0n · 2023-09-14T08:52:34Z

@YTG2G3 I wouldn't include the polyfill directly to bundle. You just have to polyfill the Node.js runtime to properly process SwggerUI using next.js.

https://github.com/char0n/swagger-ui-nextjs/blob/main/package.json#L5

Vishakh-vcc · 2023-09-14T17:32:38Z

@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 char0n/swagger-ui-nextjs@038e624)
@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

Got it working perfectly!

polyfill.ts:
const f = require('next/dist/compiled/undici');
globalThis.File = globalThis.File ?? f.File;
layout.tsx:
import '@/lib/polyfill';

@char0n I tried to use this POC https://github.com/char0n/swagger-ui-nextjs but I am facing this error when I execute "npm run dev"

C:\APIM\Developer_Portal\Swagg\swagger-ui-nextjs\node_modules.bin\next:2
basedir=$(dirname "$(echo "$0" | sed -e 's,\,/,g')")
^^^^^^^
SyntaxError: missing ) after argument list
at Object.compileFunction (node:vm:360:18)
at wrapSafe (node:internal/modules/cjs/loader:1126:15)
at Module._compile (node:internal/modules/cjs/loader:1162:27)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1252:10)
at Module.load (node:internal/modules/cjs/loader:1076:32)
at Function.Module._load (node:internal/modules/cjs/loader:911:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
at node:internal/main/run_main_module:22:47

Vishakh-vcc · 2023-09-14T17:36:32Z

@char0n , also when I am trying to run my sources in azure pipeline , I am getting below error , kindly help me here what can be fixed :
here also issue is with swagger-ui-react only similar to my above mentioned issue of "Cannot use import statement outside a module"
Everywhere swagger-ui-react is creating issues for me - one issue in azure pipeline and other one in github pipeline

Vishakh-vcc · 2023-09-15T07:35:30Z

@char0n can you take a look at my issue and provide any help here

lbennett-stacki · 2023-11-21T22:32:36Z

I have the same as @Vishakh-vcc

char0n · 2023-11-22T08:44:50Z

@Vishakh-vcc related to #8245 (comment)

This is not related to swagger-ui-react. The error is comming from next.js code. I've only tested this on Linux. Not sure how Next.js behave on Windows.

@Vishakh-vcc related to #8245 (comment)

This looks like compatibility issue between swagger-ui-react and swagger-client. I don't know what version you're using, but if you update to latest swagger-ui-react@5 and regenerate your package.json (so that latest swagger-client will install) you shouldn't see this issue anymore.

play-station · 2024-01-29T20:34:45Z

const f = require('next/dist/compiled/undici');

This solution wasn't working until I imported the file from another lib

My polyfilll.ts :

import { File } from "buffer"
globalThis.File = globalThis.File ?? File

louislefebvre mentioned this issue Dec 15, 2022

Remix: SyntaxError: Cannot use import statement outside a module #8321

Open

celinehaddad mentioned this issue Apr 22, 2023

"Unable to render this definition" error solutions not working #8587

Closed

This was referenced May 23, 2023

docs(swagger-ui-react): hint on usage with nextjs eigenmannmartin/swagger-ui#1

Open

docs(swagger-ui-react): hint on usage with nextjs #8696

Merged

char0n pushed a commit that referenced this issue May 24, 2023

docs(swagger-ui-react): hint on usage with Next.js (#8696)

51385fe

Co-authored-by: Vladimír Gorej <[email protected]> Refs #7970 Refs #8245

char0n self-assigned this Aug 22, 2023

char0n added type: support version: 5.x labels Aug 22, 2023

char0n closed this as completed Aug 22, 2023

jeremygordillo mentioned this issue Dec 1, 2023

[DEV-1040] Rendering component OpenAPI Gitbook pagopa/developer-portal#353

Merged

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

xpollen8 commented Oct 22, 2022 •

edited

Loading

jonniedarko commented Nov 1, 2022

simPod commented Nov 4, 2022 •

edited

Loading

jonniedarko commented Nov 4, 2022

simPod commented Nov 4, 2022

xpollen8 commented Nov 5, 2022

simPod commented Nov 5, 2022

derek-primumco commented Feb 16, 2023 •

edited

Loading

char0n commented Aug 22, 2023

char0n commented Aug 22, 2023

conner-cross commented Aug 23, 2023 •

edited

Loading

simPod commented Aug 24, 2023 •

edited

Loading

char0n commented Aug 24, 2023

char0n commented Aug 24, 2023

simPod commented Aug 24, 2023

YTG2G3 commented Sep 6, 2023

char0n commented Sep 6, 2023

Vishakh-vcc commented Sep 13, 2023 •

edited

Loading

char0n commented Sep 14, 2023

YTG2G3 commented Sep 14, 2023

char0n commented Sep 14, 2023

Vishakh-vcc commented Sep 14, 2023

Vishakh-vcc commented Sep 14, 2023

Vishakh-vcc commented Sep 15, 2023

lbennett-stacki commented Nov 21, 2023

char0n commented Nov 22, 2023

play-station commented Jan 29, 2024

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

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

Comments

xpollen8 commented Oct 22, 2022 • edited Loading

Q&A (please complete the following information)

Content & configuration

Describe the bug you're encountering

To reproduce...

Expected behavior

Additional context or thoughts

jonniedarko commented Nov 1, 2022

simPod commented Nov 4, 2022 • edited Loading

jonniedarko commented Nov 4, 2022

simPod commented Nov 4, 2022

xpollen8 commented Nov 5, 2022

simPod commented Nov 5, 2022

derek-primumco commented Feb 16, 2023 • edited Loading

How To Use Swagger UI React in Next.js Apps

char0n commented Aug 22, 2023

char0n commented Aug 22, 2023

conner-cross commented Aug 23, 2023 • edited Loading

simPod commented Aug 24, 2023 • edited Loading

char0n commented Aug 24, 2023

char0n commented Aug 24, 2023

simPod commented Aug 24, 2023

YTG2G3 commented Sep 6, 2023

char0n commented Sep 6, 2023

Vishakh-vcc commented Sep 13, 2023 • edited Loading

char0n commented Sep 14, 2023

YTG2G3 commented Sep 14, 2023

char0n commented Sep 14, 2023

Vishakh-vcc commented Sep 14, 2023

Vishakh-vcc commented Sep 14, 2023

Vishakh-vcc commented Sep 15, 2023

lbennett-stacki commented Nov 21, 2023

char0n commented Nov 22, 2023

play-station commented Jan 29, 2024

xpollen8 commented Oct 22, 2022 •

edited

Loading

simPod commented Nov 4, 2022 •

edited

Loading

derek-primumco commented Feb 16, 2023 •

edited

Loading

conner-cross commented Aug 23, 2023 •

edited

Loading

simPod commented Aug 24, 2023 •

edited

Loading

Vishakh-vcc commented Sep 13, 2023 •

edited

Loading