Remix: SyntaxError: Cannot use import statement outside a module

Q&A

• OS: Ubuntu 22.10
• Browser: firefox
• Version: 109.0b2
• Method of installation: pnpm add swagger-react-ui
• Swagger-UI version: [e.g. 3.10.0]
• Swagger/OpenAPI version: [e.g. Swagger 2.0, OpenAPI 3.0]

Content & configuration

I am using React Remix framework: https://remix.run

import SwaggerUI from "swagger-ui-react";

const Example = () => {
  return <SwaggerUI url="https://petstore.swagger.io/v2/swagger.json" />;
};

export default Example;

The upper code throws this error:

/home/louis/Dev/remix/node_modules/.pnpm/swagger-ui-react@4.15.5_biqbaboplfbrettd7655fr4n2y/node_modules/swagger-ui-react/swagger-ui-es-bundle-core.js:2
import*as e from"react-immutable-pure-component";import*as t from"remarkable/linkify";import*as r from"dompurify";import*as a from"zenscroll";import*as n from"lodash/reduce";import*as l from"@babel/runtime-corejs3/core-js-stable/instance/repeat";import*as s from"@babel/runtime-corejs3/core-js-stable/instance/fill";
[...]
(h.specActions.updateUrl(r.url),h.specActions.download(r.url))),r.domNode)h.render(r.domNode,"App");else if(r.dom_id){let e=document.querySelector(r.dom_id);h.render(e,"App")}else null===r.dom_id||null===r.domNode||console.error("Skipped rendering: no `dom_id` or `domNode` was specified");return h},g=i.config||c.configUrl;return g&&h.specActions&&h.specActions.getConfigByUrl?(h.specActions.getConfigByUrl({url:g,loadRemoteConfig:!0,requestInterceptor:c.requestInterceptor,responseInterceptor:c.responseInterceptor},m),h):m()}Wr.presets={apis:Ur},Wr.plugins=Vr.default;const Hr=Wr})();var Ye=Ze.Z;export{Ye as default};
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1088:15)
    at Module._compile (node:internal/modules/cjs/loader:1123:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Function.Module._load (node:internal/modules/cjs/loader:878:12)
    at Module.require (node:internal/modules/cjs/loader:1061:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.<anonymous> (/home/louis/Dev/remix/node_modules/.pnpm/swagger-ui-react@4.15.5_biqbaboplfbrettd7655fr4n2y/node_modules/swagger-ui-react/commonjs.js:7:53)
    at Module._compile (node:internal/modules/cjs/loader:1159:14)

To reproduce

1. npx create-remix@latest then follow the cli instructions
2. npm i --save swagger-ui-react
3. npm i --save-dev @types/swagger-ui-react
4. In app/routes/index.tsx, remove the content and replace it with:

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

export default function App() {
  return <SwaggerUI />;
}

5. Go to localhost:3000 in your browser, and the error should be there.

Additional context or thoughts

I have seen other issues such as https://github.com/swagger-api/swagger-ui/issues/8245 and https://github.com/swagger-api/swagger-ui/issues/7970, however the fix is only for NextJS framework.

In Remix discord server, people had the same issue with SyntaxError: Cannot use import statement outside a module, and it was advised to use serverDependenciesToBundle (https://remix.run/docs/en/v1/file-conventions/remix-config#serverdependenciestobundle), however it did not fix the issue on my side:

remix.config.js

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  ignoredRouteFiles: ["**/.*"],
  // appDirectory: "app",
  // assetsBuildDirectory: "public/build",
  // serverBuildPath: "build/index.js",
  // publicPath: "/build/",
serverDependenciesToBundle: ["swagger-ui-react"],
};

Note: The SyntaxError is still there, but the underlined import is different.

/home/louis/Dev/my-remix-app/node_modules/swagger-client/es/resolver.js:1
import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1088:15)
    at Module._compile (node:internal/modules/cjs/loader:1123:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Function.Module._load (node:internal/modules/cjs/loader:878:12)
    at Module.require (node:internal/modules/cjs/loader:1061:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.<anonymous> (/home/louis/Dev/my-remix-app/build/index.js:195:758)
    at Module._compile (node:internal/modules/cjs/loader:1159:14)

Reproduce the failure with a new Remix app and the example in app/routes/index.tsx, then inspect swagger-ui-react/commonjs.js, swagger-ui-es-bundle-core.js, and the swagger-client/es/resolver.js entry shown in the traces. Check how serverDependenciesToBundle affects these modules; done means the Remix app builds and loads without the SyntaxError.