Giter VIP home page Giter VIP logo

remix-blog's People

Contributors

brainstormbuddy avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Forkers

aaronksaunders

remix-blog's Issues

Remix: SyntaxError: Cannot use import statement outside a module

Q&A

  1. OS: Ubuntu 22.10
  2. Browser: firefox
  3. Version: 109.0b2
  4. Method of installation: pnpm add swagger-react-ui
  5. Swagger-UI version: [e.g. 3.10.0]
  6. 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/[email protected]_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/[email protected]_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 />;
}
  1. Go to localhost:3000 in your browser, and the error should be there.

Additional context or thoughts

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.