Issue with React + Vite + SWC

[brlocky]

Hi all, I started a new ReactJS project with Vite + SWC, but i'm having some weird issues, maybe someone can help me.
I have the exact same provider in an older react project and its working fine

So this is the error message on the console

websocket-client.ts:101 Uncaught TypeError: Class extends value undefined is not a constructor or null
    at node_modules/bybit-api/lib/websocket-client.js (websocket-client.ts:101:38)
    at __require (chunk-DFKQJ226.js?v=fadb9309:8:50)
    at node_modules/bybit-api/lib/index.js (index.ts:14:1)
    at __require (chunk-DFKQJ226.js?v=fadb9309:8:50)
    at index.ts:18:1

Currently testing with provider but already tested in the component, same result

import { RestClientV5 } from 'bybit-api';
import React, { ReactNode, useContext, useState } from 'react';

// Define the API context
const ApiContext = React.createContext<RestClientV5 | null>(null);

interface IApiProviderProps {
  children: ReactNode;
}

// Create the API provider component
export const ApiProvider: React.FC<IApiProviderProps> = ({ children }: IApiProviderProps) => {
  const [apiClient, setApiClient] = useState<RestClientV5 | null>(null);

  // Initialize the API client once
  if (!apiClient) {
    // Retrieve the API key and API secret from SettingsService
    const client = new RestClientV5({ key: 'xxxxx', secret: 'xxxxxx', testnet: true });
    setApiClient(client);
  }

  return <ApiContext.Provider value={apiClient}>{children}</ApiContext.Provider>;
};

// Create a custom hook to access the API context
export const useApi = () => {
  const apiClient = useContext(ApiContext);

  if (!apiClient) {
    throw new Error('useApi must be used within an ApiProvider');
  }

  return apiClient;
};

[brlocky]

I just created another project only react without SWC, and still have the same issue.

npm create vite@latest

[brlocky]

This is a clean installation of React using Vitejs.

https://stackblitz.com/edit/vitejs-vite-mbxbcc?file=package.json,src%2FApp.tsx&terminal=dev

@tiagosiebler this is probably a issue with vitejs configuration but would be great to have it working.

[tiagosiebler]

This is a clean installation of React using Vitejs.

https://stackblitz.com/edit/vitejs-vite-mbxbcc?file=package.json,src%2FApp.tsx&terminal=dev

@tiagosiebler this is probably a issue with vitejs configuration but would be great to have it working.

This is useful, not done much experimentation with my SDKs in frontend projects but I do want to ensure it's working, so this gives me something to test with. It's probably dependencies that don't exist in the frontend, such as the event emitter. Will try to investigate this week.

[tiagosiebler]

Hey @brlocky - made some progress here:
https://stackblitz.com/edit/vitejs-vite-z7eqj9?file=package.json,vite.config.ts&terminal=dev

Using the guidance from here: #258

Currently stuck on an exception from another dependency: "bybit-api.js?v=b7e7f7cf:1439 Uncaught TypeError: Cannot read properties of undefined (reading 'from')"

bybit-api.js?v=b7e7f7cf:1439 Uncaught TypeError: Cannot read properties of undefined (reading 'from')
    at node_modules/safe-buffer/index.js (bybit-api.js?v=b7e7f7cf:1439:17)
    at __require (chunk-RSJERJUL.js?v=90874dba:3:50)
    at node_modules/randombytes/browser.js (bybit-api.js?v=b7e7f7cf:1496:19)
    at __require (chunk-RSJERJUL.js?v=90874dba:3:50)
    at node_modules/crypto-browserify/index.js (bybit-api.js?v=b7e7f7cf:37236:84)
    at __require (chunk-RSJERJUL.js?v=90874dba:3:50)
    at node_modules/bybit-api/lib/util/node-support.js (bybit-api.js?v=b7e7f7cf:37339:20)
    at __require (chunk-RSJERJUL.js?v=90874dba:3:50)
    at node_modules/bybit-api/lib/util/BaseRestClient.js (bybit-api.js?v=b7e7f7cf:37386:26)
    at __require (chunk-RSJERJUL.js?v=90874dba:3:50)

This is silly though...if I check the dependencies in this SDK for where safe-buffer is coming from, it's only dev dependencies:

$ npm ls safe-buffer
bybit-api@3.7.0 /Volumes/Repositories/Public/Trading/exchanges/bybit-api
+-- ts-jest@27.1.5
| `-- @babel/core@7.14.6
|   `-- convert-source-map@1.8.0
|     `-- safe-buffer@5.1.2
+-- ts-loader@8.0.14
| `-- enhanced-resolve@4.3.0
|   `-- memory-fs@0.5.0
|     `-- readable-stream@2.3.7
|       +-- safe-buffer@5.1.2
|       `-- string_decoder@1.1.1
|         `-- safe-buffer@5.1.2 deduped
`-- webpack@5.76.0
  `-- terser-webpack-plugin@5.3.9
    `-- serialize-javascript@6.0.1
      `-- randombytes@2.1.0
        `-- safe-buffer@5.2.1

Why is vite trying to build dev dependencies into the frontend module?

[brlocky]

Hey @brlocky - made some progress here: https://stackblitz.com/edit/vitejs-vite-z7eqj9?file=package.json,vite.config.ts&terminal=dev

Using the guidance from here: #258

Currently stuck on an exception from another dependency: "bybit-api.js?v=b7e7f7cf:1439 Uncaught TypeError: Cannot read properties of undefined (reading 'from')"

bybit-api.js?v=b7e7f7cf:1439 Uncaught TypeError: Cannot read properties of undefined (reading 'from')
    at node_modules/safe-buffer/index.js (bybit-api.js?v=b7e7f7cf:1439:17)
    at __require (chunk-RSJERJUL.js?v=90874dba:3:50)
    at node_modules/randombytes/browser.js (bybit-api.js?v=b7e7f7cf:1496:19)
    at __require (chunk-RSJERJUL.js?v=90874dba:3:50)
    at node_modules/crypto-browserify/index.js (bybit-api.js?v=b7e7f7cf:37236:84)
    at __require (chunk-RSJERJUL.js?v=90874dba:3:50)
    at node_modules/bybit-api/lib/util/node-support.js (bybit-api.js?v=b7e7f7cf:37339:20)
    at __require (chunk-RSJERJUL.js?v=90874dba:3:50)
    at node_modules/bybit-api/lib/util/BaseRestClient.js (bybit-api.js?v=b7e7f7cf:37386:26)
    at __require (chunk-RSJERJUL.js?v=90874dba:3:50)

This is silly though...if I check the dependencies in this SDK for where safe-buffer is coming from, it's only dev dependencies:

$ npm ls safe-buffer
bybit-api@3.7.0 /Volumes/Repositories/Public/Trading/exchanges/bybit-api
+-- ts-jest@27.1.5
| `-- @babel/core@7.14.6
|   `-- convert-source-map@1.8.0
|     `-- safe-buffer@5.1.2
+-- ts-loader@8.0.14
| `-- enhanced-resolve@4.3.0
|   `-- memory-fs@0.5.0
|     `-- readable-stream@2.3.7
|       +-- safe-buffer@5.1.2
|       `-- string_decoder@1.1.1
|         `-- safe-buffer@5.1.2 deduped
`-- webpack@5.76.0
  `-- terser-webpack-plugin@5.3.9
    `-- serialize-javascript@6.0.1
      `-- randombytes@2.1.0
        `-- safe-buffer@5.2.1

Why is vite trying to build dev dependencies into the frontend module?

that "from" smells buffer !

Thank you for your super investigation, I'll dig into other projects where i did had to add some alias, and now that i saw your test, i remembered to be something with crypto and buffers, I'll have a look latter on !

[tiagosiebler]

Interesting, I think I should start including the ts files with the published package. Seems when importing the ts resources directly, there's more control over what dependencies are pulled in and what modules are swapped for browser usage.

Looks like I've gotten it working - let me publish a beta release of this SDK which includes the src/*ts files, and then we can see what else needs to be done to get this working properly with full type support!

[tiagosiebler]

@brlocky this seems to work:
https://stackblitz.com/edit/vitejs-vite-z7eqj9?file=package.json,vite.config.ts,src%2FApp.tsx&terminal=dev

I've had to include src/*ts in the beta version of the package. However, I'm not sure if this is the correct approach to properly support modern frontend projects and I'm sure there's a lot to improve (perhaps also in the way the package.json is configured for the SDK). Would love some help here, as I'm less experienced in the frontend space.

[tiagosiebler]

Also note, I've had to add a buffer polyfill, but this seems weird as the only dependencies using buffer are dev dependencies from the SDK (such as ts-jest), which absolutely should not be included in the browser bundle. Also haven't tested websockets as I suspect that will need more changes for browser support (especially since EventEmitter is another nodejs package)

[brlocky]

I have it working locally, only changing the import,
import { RestClientV5 } from 'bybit-api/lib/rest-client-v5';

with version
"bybit-api": "^3.7.0",

without need to change the Vite setup.

https://stackblitz.com/edit/vitejs-vite-qybfvu?file=vite.config.ts,package.json,src%2FApp.tsx.

[brlocky]

Also note, I've had to add a buffer polyfill, but this seems weird as the only dependencies using buffer are dev dependencies from the SDK (such as ts-jest), which absolutely should not be included in the browser bundle. Also haven't tested websockets as I suspect that will need more changes for browser support (especially since EventEmitter is another nodejs package)

I would think theres somehow a issue in the build, where js and ts are not having same exports. I spent sometime tweaking your build, but without success.

[tiagosiebler]

I have it working locally, only changing the import, import { RestClientV5 } from 'bybit-api/lib/rest-client-v5';

with version "bybit-api": "^3.7.0",

without need to change the Vite setup.

https://stackblitz.com/edit/vitejs-vite-qybfvu?file=vite.config.ts,package.json,src%2FApp.tsx.

oh interesting, so including the ts resources isn't necessary after all?

[brlocky]

I have it working locally, only changing the import, import { RestClientV5 } from 'bybit-api/lib/rest-client-v5';
with version "bybit-api": "^3.7.0",
without need to change the Vite setup.
https://stackblitz.com/edit/vitejs-vite-qybfvu?file=vite.config.ts,package.json,src%2FApp.tsx.

oh interesting, so including the ts resources isn't necessary after all?

Yup, I deleted node_modules a few times to ensure i was having the right result, but looks to be working fine only changing the import

[loul42]

Hi!

Thanks for your investigation @brlocky @tiagosiebler . Changing the import solves indeed the issue for RestClientV5 but not WebsocketClient ..

Here is RestClientV5 working (same as you) :
import { RestClientV5 } from 'bybit-api/lib/rest-client-v5';
https://stackblitz.com/edit/vitejs-vite-bz4zxl?file=vite.config.ts,src%2Findex.css,src%2FApp.tsx

> working fine

Here is the exact same but with
import { WebsocketClient } from 'bybit-api/lib/websocket-client';
https://stackblitz.com/edit/vitejs-vite-nmbh2z?file=vite.config.ts,src%2Findex.css,src%2FApp.tsx

we have this error again :

Uncaught TypeError: Class extends value undefined is not a constructor or null
    at node_modules/bybit-api/lib/websocket-client.js (chunk-JBAS62RK.js?v=c98416ad:5320:50)
    at __require (chunk-RSJERJUL.js?v=c98416ad:3:50)
    at bybit-api_lib_websocket-client.js?v=c98416ad:5:16
    

I don't know at all how to fix if you can help...

[stylustrader]

Hi!

Thanks for your investigation @brlocky @tiagosiebler . Changing the import solves indeed the issue for RestClientV5 but not WebsocketClient ..

Here is RestClientV5 working (same as you) : import { RestClientV5 } from 'bybit-api/lib/rest-client-v5'; https://stackblitz.com/edit/vitejs-vite-bz4zxl?file=vite.config.ts,src%2Findex.css,src%2FApp.tsx

> working fine

Here is the exact same but with import { WebsocketClient } from 'bybit-api/lib/websocket-client'; https://stackblitz.com/edit/vitejs-vite-nmbh2z?file=vite.config.ts,src%2Findex.css,src%2FApp.tsx

we have this error again :

Uncaught TypeError: Class extends value undefined is not a constructor or null
    at node_modules/bybit-api/lib/websocket-client.js (chunk-JBAS62RK.js?v=c98416ad:5320:50)
    at __require (chunk-RSJERJUL.js?v=c98416ad:3:50)
    at bybit-api_lib_websocket-client.js?v=c98416ad:5:16
    

I don't know at all how to fix if you can help...

for production, you have to do npm i events
and move that events folder to your local bybit-api/node_modules/ directory
for dev, just use webpack bundle