Trying to use the simplest example, getting react-dom.development.js:22839 Uncaught TypeError: off is not a function error.
Below the code, error and vite.config.ts.
import './App.css'
import {Wheel} from "./components/Wheel.tsx";
import {Table} from "./components/Table.tsx";
import {useMemo} from 'react';
import {ConnectionProvider, WalletProvider} from '@solana/wallet-adapter-react';
import {WalletAdapterNetwork} from '@solana/wallet-adapter-base';
import {
WalletModalProvider,
WalletDisconnectButton,
WalletMultiButton
} from '@solana/wallet-adapter-react-ui';
import {clusterApiUrl} from '@solana/web3.js';
// Default styles that can be overridden by your app
// import('@solana/wallet-adapter-react-ui/styles.css');
function App() {
const network = WalletAdapterNetwork.Devnet;
const endpoint = useMemo(() => clusterApiUrl(network), [network]);
const wallets = useMemo(
() => [],
// eslint-disable-next-line react-hooks/exhaustive-deps
[network]
);
return (
<>
<ConnectionProvider endpoint={endpoint}>
<WalletProvider wallets={wallets}>
<WalletModalProvider>
<WalletMultiButton/>
<WalletDisconnectButton/>
<div className={"bg-gray-700 p-3"}>
<Wheel/>
<Table/>
</div>
</WalletModalProvider>
</WalletProvider>
</ConnectionProvider>
</>
);
}
export default App
react-dom.development.js:22839 Uncaught TypeError: off is not a function
at StandardWalletAdapter.destroy (adapter.ts:125:13)
at useStandardWalletAdapters.ts:40:73
at Array.forEach (<anonymous>)
at useStandardWalletAdapters.ts:40:44
at safelyCallDestroy (react-dom.development.js:22932:5)
at commitHookEffectListUnmount (react-dom.development.js:23100:11)
at invokePassiveEffectUnmountInDEV (react-dom.development.js:25207:13)
at invokeEffectsInDev (react-dom.development.js:27351:11)
at commitDoubleInvokeEffectsInDEV (react-dom.development.js:27324:7)
at flushPassiveEffectsImpl (react-dom.development.js:27056:5)
destroy @ adapter.ts:125
(anonymous) @ useStandardWalletAdapters.ts:40
(anonymous) @ useStandardWalletAdapters.ts:40
safelyCallDestroy @ react-dom.development.js:22932
commitHookEffectListUnmount @ react-dom.development.js:23100
invokePassiveEffectUnmountInDEV @ react-dom.development.js:25207
invokeEffectsInDev @ react-dom.development.js:27351
commitDoubleInvokeEffectsInDEV @ react-dom.development.js:27324
flushPassiveEffectsImpl @ react-dom.development.js:27056
flushPassiveEffects @ react-dom.development.js:26984
(anonymous) @ react-dom.development.js:26769
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
Show 14 more frames
Show less
react-dom.development.js:18687 The above error occurred in the <WalletProvider> component:
at WalletProvider (http://localhost:5173/node_modules/.vite/deps/chunk-VGC3ZBUC.js?v=92d76a06:2382:27)
at ConnectionProvider (http://localhost:5173/node_modules/.vite/deps/chunk-VGC3ZBUC.js?v=92d76a06:222:29)
at App (http://localhost:5173/src/App.tsx?t=1697008814030:29:20)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:18687
update.callback @ react-dom.development.js:18720
callCallback @ react-dom.development.js:13923
commitUpdateQueue @ react-dom.development.js:13944
commitLayoutEffectOnFiber @ react-dom.development.js:23391
commitLayoutMountEffects_complete @ react-dom.development.js:24688
commitLayoutEffects_begin @ react-dom.development.js:24674
commitLayoutEffects @ react-dom.development.js:24612
commitRootImpl @ react-dom.development.js:26823
commitRoot @ react-dom.development.js:26682
performSyncWorkOnRoot @ react-dom.development.js:26117
flushSyncCallbacks @ react-dom.development.js:12042
flushPassiveEffectsImpl @ react-dom.development.js:27060
flushPassiveEffects @ react-dom.development.js:26984
(anonymous) @ react-dom.development.js:26769
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
Show 18 more frames
Show less
react-dom.development.js:12056 Uncaught TypeError: off is not a function
at StandardWalletAdapter.destroy (adapter.ts:125:13)
at useStandardWalletAdapters.ts:40:73
at Array.forEach (<anonymous>)
at useStandardWalletAdapters.ts:40:44
at safelyCallDestroy (react-dom.development.js:22932:5)
at commitHookEffectListUnmount (react-dom.development.js:23100:11)
at invokePassiveEffectUnmountInDEV (react-dom.development.js:25207:13)
at invokeEffectsInDev (react-dom.development.js:27351:11)
at commitDoubleInvokeEffectsInDEV (react-dom.development.js:27324:7)
at flushPassiveEffectsImpl (react-dom.development.js:27056:5)
import {defineConfig} from 'vite'
import react from '@vitejs/plugin-react'
import {NodeGlobalsPolyfillPlugin} from "@esbuild-plugins/node-globals-polyfill";
import {NodeModulesPolyfillPlugin} from "@esbuild-plugins/node-modules-polyfill";
import rollupNodePolyFill from "rollup-plugin-node-polyfills";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
optimizeDeps: {
esbuildOptions: {
// Node.js global to browser globalThis
define: {
global: "globalThis",
},
// Enable esbuild polyfill plugins
plugins: [
NodeGlobalsPolyfillPlugin({
process: true,
buffer: true,
}),
NodeModulesPolyfillPlugin(),
],
},
},
build: {
rollupOptions: {
plugins: [
// Enable rollup polyfills plugin
// used during production bundling
rollupNodePolyFill(),
],
},
},
})
