Can't get it working with Vite

[cxyb]

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]

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]

@Papooch work on this would be well appreciated 👍

[evolvedlight]

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]

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]

Unfortunately I have a different error:

url.js:3 Uncaught ReferenceError: process is not defined
    at node_modules/.pnpm/@[email protected]/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/@[email protected]/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/@[email protected]/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/@[email protected]/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/@[email protected]/node_modules/@apidevtools/json-schema-ref-parser/lib/index.js (index.js:4:15)
    at __require (chunk-J43GMYXM.js?v=3ef31e1c:11:50)

[cxyb]

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]

This issue should be fixed with [email protected]. I've also added instructions in README for adding node polyfills with popular build tools

[BitHighlander]

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]

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

[anttiviljami]

Also URL is not a node package, right? 🧐