openapistack / openapi-client-axios

JavaScript client library for consuming OpenAPI-enabled APIs with axios
https://openapistack.co
MIT License
558 stars 67 forks source link

Can't get it working with Vite #110

Closed cxyb closed 1 year ago

cxyb commented 2 years ago

After injecting all node deps development version works fine but , in production, I'm getting qu.isAllowed$Ref(e.value,r) //qu is undefined as much as I've figured it is a problem with json-schema-ref-parser. Anyone else?

Papooch commented 2 years ago

Same here. The library heavily depends on node built in types (although it claims to be browser compatible) and I was unable to polyfill it correctly. I think the library is primarily intended to work in the browser, so the best course of action in my opinion would be to drop node types entirely.

Let the user feed the swagger spec to it manually, without requiring fs and other node modules. Also, I don't understand why http/https modules are required, when the lib itself has axios as peer dependency - we could just use that.

I'm willing to try and make a PR if there's market for it.

anttiviljami commented 2 years ago

@Papooch work on this would be well appreciated 👍

evolvedlight commented 2 years ago

We have this problem too, narrowed it down to the library you mentioned wanting to check the running operating system with process.platform. Would appreciate indeed this to be possible as apart from this we could move our app to vite3

cxyb commented 2 years ago

I'm using this as plugin

export default function plugin() { return { name: 'fix-swagger',

transform(src, id) {
  if (src.match(/\$Ref.isAllowed\$Ref\$/) > -1) {
    fix = src.replace(
      /\$Ref.isAllowed\$Ref\(/g,
      '$Ref && $Ref.isAllowed$Ref('
    )
    return fix
  }
},

} }

evolvedlight commented 2 years ago

Unfortunately I have a different error:

url.js:3 Uncaught ReferenceError: process is not defined
    at node_modules/.pnpm/@apidevtools+json-schema-ref-parser@9.0.9/node_modules/@apidevtools/json-schema-ref-parser/lib/util/url.js (url.js:3:29)
    at __require (chunk-J43GMYXM.js?v=3ef31e1c:11:50)
    at node_modules/.pnpm/@apidevtools+json-schema-ref-parser@9.0.9/node_modules/@apidevtools/json-schema-ref-parser/lib/pointer.js (pointer.js:6:13)
    at __require (chunk-J43GMYXM.js?v=3ef31e1c:11:50)
    at node_modules/.pnpm/@apidevtools+json-schema-ref-parser@9.0.9/node_modules/@apidevtools/json-schema-ref-parser/lib/ref.js (ref.js:5:17)
    at __require (chunk-J43GMYXM.js?v=3ef31e1c:11:50)
    at node_modules/.pnpm/@apidevtools+json-schema-ref-parser@9.0.9/node_modules/@apidevtools/json-schema-ref-parser/lib/refs.js (refs.js:4:14)
    at __require (chunk-J43GMYXM.js?v=3ef31e1c:11:50)
    at node_modules/.pnpm/@apidevtools+json-schema-ref-parser@9.0.9/node_modules/@apidevtools/json-schema-ref-parser/lib/index.js (index.js:4:15)
    at __require (chunk-J43GMYXM.js?v=3ef31e1c:11:50)
cxyb commented 2 years ago

u need to inject polyfills

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'
import rollupNodePolyFill from 'rollup-plugin-node-polyfills'
import fixSwagger from './vite-plugin-fix-swaggerparser'
// https://vitejs.dev/config/

const commitHash = require('child_process')
  .execSync('git rev-parse --short HEAD')
  .toString()

export default ({ mode }) => {
  process.env = { ...process.env, VITE_HASH: commitHash }
  return defineConfig({
    server: {
      https: true,
    },
    preview: {
      port: 3000,
    },
    plugins: [
      react({
        fastRefresh: process.env.NODE_ENV !== 'test',
      }),
      fixSwagger(),
    ],
    resolve: {
      alias: {
        './runtimeConfig': './runtimeConfig.browser',
        // This Rollup aliases are extracted from @esbuild-plugins/node-modules-polyfill,
        // see https://github.com/remorses/esbuild-plugins/blob/master/node-modules-polyfill/src/polyfills.ts
        // process and buffer are excluded because already managed
        // by node-globals-polyfill
        util: 'rollup-plugin-node-polyfills/polyfills/util',
        sys: 'util',
        events: 'rollup-plugin-node-polyfills/polyfills/events',
        stream: 'rollup-plugin-node-polyfills/polyfills/stream',
        path: 'rollup-plugin-node-polyfills/polyfills/path',
        querystring: 'rollup-plugin-node-polyfills/polyfills/qs',
        punycode: 'rollup-plugin-node-polyfills/polyfills/punycode',
        url: 'rollup-plugin-node-polyfills/polyfills/url',
        inherits: 'rollup-plugin-node-polyfills/polyfills/inherits',
        string_decoder: 'rollup-plugin-node-polyfills/polyfills/string-decoder',
        http: 'rollup-plugin-node-polyfills/polyfills/http',
        https: 'rollup-plugin-node-polyfills/polyfills/http',
        os: 'rollup-plugin-node-polyfills/polyfills/os',
        assert: 'rollup-plugin-node-polyfills/polyfills/assert',
        constants: 'rollup-plugin-node-polyfills/polyfills/constants',
        _stream_duplex:
          'rollup-plugin-node-polyfills/polyfills/readable-stream/duplex',
        _stream_passthrough:
          'rollup-plugin-node-polyfills/polyfills/readable-stream/passthrough',
        _stream_readable:
          'rollup-plugin-node-polyfills/polyfills/readable-stream/readable',
        _stream_writable:
          'rollup-plugin-node-polyfills/polyfills/readable-stream/writable',
        _stream_transform:
          'rollup-plugin-node-polyfills/polyfills/readable-stream/transform',
        timers: 'rollup-plugin-node-polyfills/polyfills/timers',
        console: 'rollup-plugin-node-polyfills/polyfills/console',
        vm: 'rollup-plugin-node-polyfills/polyfills/vm',
        zlib: 'rollup-plugin-node-polyfills/polyfills/zlib',
        tty: 'rollup-plugin-node-polyfills/polyfills/tty',
        domain: 'rollup-plugin-node-polyfills/polyfills/domain',
      },
    },
    optimizeDeps: {
      exclude: ['babel', 'jest', 'vite-jest', 'dotenv'],
      esbuildOptions: {
        // Node.js global to browser globalThis
        define: {
          global: 'globalThis',
        },
        // Enable esbuild polyfill plugins
        plugins: [
          NodeGlobalsPolyfillPlugin({
            process: true,
            buffer: true,
          }),
        ],
      },
    },
    build: {
      minify: true,
      target: 'esnext',
      rollupOptions: {
        plugins: [
          // Enable rollup polyfills plugin
          // used during production bundling
          rollupNodePolyFill(),
        ],
      },
    },
  })
}
anttiviljami commented 1 year ago

This issue should be fixed with openapi-client-axios@6.1.0. I've also added instructions in README for adding node polyfills with popular build tools

BitHighlander commented 1 year ago

What would the level of effort be to optimise this for browser? I am attempting to build a SDK that designed for many browser and this package and node bindings has been a huge pain point for me over the last few months. My goal is to convince people to use my SDK, and forcing them to use polyfills is poor form. I most likely will be attempting a fork and remove URL and other node packages and failing that will be returning to generated client side sdks that need constant updating. would love to work with some one else having these issues. Thanks

anttiviljami commented 1 year ago

@BitHighlander just upgrade to latest openapi-client-axios ! No polyfills needed anymore 😉

anttiviljami commented 1 year ago

Also URL is not a node package, right? 🧐