Can't use taquito with vite

[itsnamangoyal]

Description Can't connect to a wallet in vite.

Steps To Reproduce Steps to reproduce the behavior:

1. Try to get permissions
2. See error

Expected behavior We should be able to connect to wallet without error

Screenshots

Desktop (please complete the following information):

• OS: macos 12.4
• Browser: chrome
• Version: 103.0.5060.53 (Official Build) (arm64)

Additional context It works correctly in with CRA.

[Innkst]

Thanks @itsnamangoyal Could you please check if the fix mentioned in https://github.com/ecadlabs/taquito/issues/882 works for you too

[itsnamangoyal]

Thanks @itsnamangoyal Could you please check if the fix mentioned in #882 works for you too

ty @Innkst That made the build work completely fine but it's still broken on dev

[claudebarde]

I made Taquito and the Beacon wallet work with Vite in this repo: https://github.com/claudebarde/taquito-bundlers-testing/tree/main/vitejs The main changes are in the vite.config.js and in the index.html files. You also have to install events, buffer, libsodium-wrappers and vite-compatible-readable-stream packages as dev dependencies.

[itsnamangoyal]

I made Taquito and the Beacon wallet work with Vite in this repo: https://github.com/claudebarde/taquito-bundlers-testing/tree/main/vitejs The main changes are in the vite.config.js and in the index.html files. You also have to install events, buffer, libsodium-wrappers and vite-compatible-readable-stream packages as dev dependencies.

Still not fixed, I guess this could be due to the fact your repo is using taquito 11.x while I'm trying to use 13.x

Also, I'm using react but that most probably is not the issue here

[souljorje]

@itsnamangoyal what about vite version?

[itsnamangoyal]

@itsnamangoyal what about vite version?

Sorry for late reply I'm using 2.9.5

[xsfunc]

some news?

[claudebarde]

Interestingly, I do get the libsodium was not initialized error in another dapp with Vite and Taquito, but the dapp works as expected, I managed to interact with smart contracts with that error message 😜

[xsfunc]

@claudebarde what version of taquito, beacon sdk and vite you use?

[claudebarde]

"vite": "^2.9.7",
"@airgap/beacon-sdk": "^3.1.3",
"@taquito/beacon-wallet": "^13.0.1",
"@taquito/taquito": "^13.0.1"

[xsfunc]

@claudebarde can you share vite config please?

[RohitKaushal7]

This is my vite.config.js for NOT WORKING scenario.

• build works fine. -- wallet connect popup shows up.
• same error in dev server. import_libsodium_wrappers.crypto_generichash is not a function -- wallet connect popup won't open up.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import svgrPlugin from 'vite-plugin-svgr'
import path from 'path'
import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'
import replace from 'rollup-plugin-re'

// https://vitejs.dev/config/
export default ({ command }) => {
  const isBuild = command === 'build'
  return defineConfig({
    build: {
      outDir: 'build',
      emptyOutDir: true,
    },
    plugins: [
      react(),
      svgrPlugin({ svgrOptions: { icon: true } }),
      {
        ...replace({
          include: ['node_modules/@airgap/**', 'node_modules/@taquito/**'],
          replaces: {
            ...(isBuild
              ? {
                  "import * as qrcode from 'qrcode-generator';":
                    "import qrcode from 'qrcode-generator';",
                }
              : {
                  'var libsodium_wrappers_1 = require("libsodium-wrappers")':
                    'var libsodium_wrappers_1 = require("libsodium-wrappers").default',
                }),
          },
        }),
        apply: 'build',
        enforce: 'pre',
      },
    ],
    optimizeDeps: {
      esbuildOptions: {
        define: {
          global: 'globalThis',
        },
        plugins: [
          NodeGlobalsPolyfillPlugin({
            buffer: true,
            process: true,
          }),
        ],
      },
    },
    resolve: {
      alias: [
        { find: '@', replacement: path.resolve(__dirname, 'src') },

        {
          find: '@airgap/beacon-sdk',
          replacement: path.resolve(
            __dirname,
            `./node_modules/@taquito/beacon-wallet/node_modules/@airgap/beacon-sdk/dist/${
              isBuild ? 'esm' : 'cjs'
            }/index.js`
          ),
        },
        {
          find: 'readable-stream',
          replacement: 'vite-compatible-readable-stream',
        },
        {
          find: 'stream',
          replacement: 'vite-compatible-readable-stream',
        },
      ],
    },
  })
}

[souljorje]

@RohitKaushal7 you should remove apply: 'build' in replace plugin initialisation see https://github.com/ecadlabs/taquito/issues/882#issuecomment-1178044313

[RohitKaushal7]

@souljorje I tried removing apply: "build" still same. also making it apply: "serve" has no effect for me. build works fine in this case also, and dev has same error. I also added

optimizeDeps: {
      include: [
        '@airgap/beacon-sdk',
        '@taquito/beacon-wallet',
        '@taquito/taquito',
      ],
}

tried clearing cache. rm -rf node_modules/.vite/

but same problem still persists.

[souljorje]

@RohitKaushal7 what is you vite versions? did you provide a full vite.config.js?

[RohitKaushal7]

@souljorje

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import svgrPlugin from 'vite-plugin-svgr'
import path from 'path'
import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'
import replace from 'rollup-plugin-re'

// https://vitejs.dev/config/
export default ({ command }) => {
  const isBuild = command === 'build'
  return defineConfig({
    build: {
      outDir: 'build',
      emptyOutDir: true,
    },
    plugins: [
      react(),
      svgrPlugin({ svgrOptions: { icon: true } }),
      {
        ...replace({
          include: ['node_modules/@airgap/**', 'node_modules/@taquito/**'],
          replaces: {
            ...(isBuild
              ? {
                  "import * as qrcode from 'qrcode-generator';":
                    "import qrcode from 'qrcode-generator';",
                }
              : {
                  'var libsodium_wrappers_1 = require("libsodium-wrappers")':
                    'var libsodium_wrappers_1 = require("libsodium-wrappers").default',
                }),
          },
        }),
        enforce: 'pre',
      },
    ],
    optimizeDeps: {
      include: [
        '@airgap/beacon-sdk',
        '@taquito/beacon-wallet',
        '@taquito/taquito',
      ],
      esbuildOptions: {
        define: {
          global: 'globalThis',
        },
        plugins: [
          NodeGlobalsPolyfillPlugin({
            buffer: true,
            process: true,
          }),
        ],
      },
    },
    resolve: {
      alias: [
        { find: '@', replacement: path.resolve(__dirname, 'src') },

        {
          find: '@airgap/beacon-sdk',
          replacement: path.resolve(
            __dirname,
            `./node_modules/@airgap/beacon-sdk/dist/${
              isBuild ? 'esm' : 'cjs'
            }/index.js`
          ),
        },
        {
          find: 'readable-stream',
          replacement: 'vite-compatible-readable-stream',
        },
        {
          find: 'stream',
          replacement: 'vite-compatible-readable-stream',
        },
      ],
    },
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@use "./src/styles/common.scss" as *;`,
        },
      },
    },
  })
}

package.json

    "vite": "^2.7.2", // 2.9.5
    "@airgap/beacon-sdk": "^3.0.0",  // 3.0.0
    "@taquito/beacon-wallet": "^13", // 13.0.1
    "@taquito/taquito": "^12",  // 12.0.3 ,  13.0.1

[RohitKaushal7]

@souljorje do you know what is wrong with the package, can I manually fix it by changing the code in the node module itself using patch-package? I don't wanna migrate the whole project to CRA 😢

[souljorje]

@RohitKaushal7 busy to explain right now and actually I kinda forgot what's wrong, will try answer later, for now I can say that this setup works on dev and on prod:

"@airgap/beacon-sdk": "^3.1.3",
"@taquito/beacon-wallet": "^13.0.1",
"@taquito/taquito": "^13.0.1",
"vite": "^2.9.8",

Also we have some diffs in vite.config.js, mine also includes:

build: {
  target: 'esnext',
  commonjsOptions: {
    transformMixedEsModules: true,
  },
},
optimizeDeps: {
  esbuildOptions: {
    target: 'es2021',
  },
},

[xsfunc]

@souljorje can you create template with vite that works with airgab/taquito?

[claudebarde]

@xsfunc I'll post a template tomorrow for Vite + Taquito/Beacon as I have a working dapp with that configuration

[souljorje]

@xsfunc in case if @claudebarde's template won't work, I'll post mine

[xsfunc]

@claudebarde where I can see your template?

taquito@14 [email protected] [email protected]

Still not working for me. If I use only beacon sdk with DappClient, it works, wallet connected. But if I use BeaconWallet form taquito, wallet doesn't connect. libsodium error in console.

upd: I solved my problem, I use beacon-sdk package instead beacond-dapp, and my config don't replace beacon-dapp in vite config. So I get error with BeaconWallet.

[RohitKaushal7]

If someone is getting error -

Cannot read properties of undefined (reading 'call') ...

while connecting to beacon wallet after building the app.

add dependency events

pnpm add events

in the end ... You should at least have events, buffer and vite-compatible-readable-stream

[michaelkernaghan]

Thre is nothing here to be fixed