error with dependencies // jsdevtools

[binarykiwi]

Hi all,
I've got a system up an running using Vue.js 3.0.5 and Vite as a build system.
As I need to use a Swagger API in my project I thought it might be a good deal using this openapi-client-axios.
Actually I get an error as soon as I import the client:

import OpenAPIClientAxios from 'openapi-client-axios'
const api = new OpenAPIClientAxios({ definition: 'api.json' })
api.init()

These lines occur the error message:

[vite] new dependencies found: openapi-client-axios, updating...
 > node_modules/@jsdevtools/ono/esm/types.js: error: No matching export for import "inspect"
    1 │ import { inspect } from "util";
      ╵          ~~~~~~~

[vite] error while updating dependencies:
Error: Build failed with 1 error:
node_modules/@jsdevtools/ono/esm/types.js:1:9: error: No matching export for import "inspect"

Is it possible that some of the dependencies or this entire project are not ready for Vue 3 or what am I doing wrong?
Thanks a lot.

[anttiviljami]

Looks like you are missing a polyfill for the node.js util core package.

Try npm install --save util

[binarykiwi]

Thanks so much for the response 👍
It seams this fixes the error explained above.
I don't know why my node (15.8.0) didn't have this module. Normally node does this by default I thought.

One step further. Now it ends in the browser console:

Uncaught ReferenceError: process is not defined
    at util.js:109

Do you have a good solution for this problem as well?

[anttiviljami]

Sorry, haven't dug that deep into vue but for whatever reason it seems like util is not being included by vue. Installing the util package doesn't work because process is not defined in the browser.

You might be able to work around that error by manually setting window.process = { env: {} };, but it's a hack.

I'd look into your vue bundler config to see if there is a way to properly include the util in your browser bundle.

I'd highly appreciate you report back your findings for other Vue users!

[binarykiwi]

Thanks for trying to help. Your mentioned hack with manually setting does not work either.
I'm pretty new to Vite so I have a hard time understanding what's going on there. I will post a solution when I come up with one :)
As soon as I remove the import of openapi-client-axios my project continues working.
For me openapi-client-axios does not work with Vue3+Vite at the moment, I guess because of dependencies to other projects like util.

[PetrPy]

Similar issue with Vue3 + Quasar2, after installing utils package, the following issues remain outstanding:

App •  ERROR  •  UI  in ./node_modules/@apidevtools/json-schema-ref-parser/lib/resolvers/http.js

Module not found: Can't resolve imported dependency "http"
Did you forget to install it? You can run: npm install --save http

 App •  ERROR  •  UI  in ./node_modules/@apidevtools/json-schema-ref-parser/lib/resolvers/http.js

Module not found: Can't resolve imported dependency "https"
Did you forget to install it? You can run: npm install --save https

Installing those two packages does not work.

[anttiviljami]

You’ll need to provide polyfills for these native nodejs dependencies in your bundler.

See https://cli.vuejs.org/guide/browser-compatibility.html#polyfills for more details

[anttiviljami]

You’ll need to expand your webpack config and add fallbacks for the missing node dependencies.

https://cli.vuejs.org/guide/webpack.html#simple-configuration

Also see https://stackoverflow.com/questions/64557638/how-to-polyfill-node-core-modules-in-webpack-5

Hope this gets you on the right track! 😊

[PetrPy]

You’ll need to expand your webpack config and add fallbacks for the missing node dependencies.

https://cli.vuejs.org/guide/webpack.html#simple-configuration

Also see https://stackoverflow.com/questions/64557638/how-to-polyfill-node-core-modules-in-webpack-5

Hope this gets you on the right track! 😊

Well, thanks, but it actually did not help. After spending 3 hours trying to work it out, I gave up... There does not seem to be a straightforward way for Vue.js developers to use openapi-client-axios.

[npdev453]

Yeah, looks like Vite doesn't love "node.js" modules, so, I found one dirty solution:

0. Add into vite.config.ts an define

export default defineConfig({
  define: {
    'process.browser': 'true',
  },
})

1. Put into your index.html one fake-polyfill for Buffer (before main script src section)

    <script>
      Buffer = {isBuffer: () => {return false} }
    </script>

2. Then install one required module npm install url

3. And at last make some magic

import axios from 'axios';

import OpenAPIClientAxios from 'openapi-client-axios';
import { Client as PetStoreClient } from './types';

async function getClient() {
    // (!) Download scheme by yourself or read from file
    // because when you pass in OACA an url, 
    // it make some calls using fns from node native `http` and `https` libs
    const definition = (await axios.get('http://127.0.0.1:3000/docs/json')).data
    
    // Pass it into OACA
    const api = new OpenAPIClientAxios({ 
        withServer: {url:'http://127.0.0.1:3000'},
        definition: definition
    });

    // Voila!
    const client = await api.init<PetStoreClient>();
    const result = await client.createDog(undefined, {name:'test'})
    console.log('result', result.data)
}

@anttiviljami, also I think that we can help someone with this, if will be building ESM or .min version, where all node-core-pollyfills will be already included.

(I can't found for Vite any adequate node-core polyfill plugin too)

[sign0]

Same issue, solved by adding this into vue.config.js :

const NodePolyfillPlugin = require( 'node-polyfill-webpack-plugin' );

module.exports = {
  configureWebpack: {
    plugins: [
      new NodePolyfillPlugin(),
    ],
  },
};

[anttiviljami]

This issue should be fixed with [email protected]