-
Notifications
You must be signed in to change notification settings - Fork 9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
swagger-ui-react "SyntaxError: Cannot use import statement outside a module" #8245
Comments
I am seeing this same issue using the sample snippet with nextjs 12.2
|
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. |
I actually solved my issue with the next dynamic import |
That stops working with Next.js 13.0.2 though. |
Added that to my |
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 |
How To Use Swagger UI React in Next.js AppsTranspiling 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 /** @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
Created a POC repo integrating |
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. |
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,
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. |
I can second that I'm getting the same issue as @conner-cross.
|
@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. |
@conner-cross, @simPod - issue is described in detail here char0n/swagger-ui-nextjs#1 and has been resolved in char0n/swagger-ui-nextjs#2 |
Node 20 helped. Thanks |
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? |
@YTG2G3, |
@simPod @xpollen8 @derek-primumco 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. |
@YTG2G3 - https://github.com/char0n/swagger-ui-nextjs uses @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:
layout.tsx:
|
@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 |
@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 |
@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 : |
@char0n can you take a look at my issue and provide any help here |
I have the same as @Vishakh-vcc |
@Vishakh-vcc related to #8245 (comment) This is not related to @Vishakh-vcc related to #8245 (comment) This looks like compatibility issue between |
This solution wasn't working until I imported the file from another lib My polyfilll.ts : import { File } from "buffer" |
Q&A (please complete the following information)
Content & configuration
Bug is unrelated to Swagger content/config.
(Also fails on node v17.9.1)
package.json
pages/index.js
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:
pages/index.js
andpackage.json
contents shown abovehttp://localhost:3000/
in browserExpected 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 this10.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: