Can't use taquito with vite #1729

itsnamangoyal · 2022-07-05T19:32:32Z

Description
Can't connect to a wallet in vite.

Steps To Reproduce
Steps to reproduce the behavior:

Try to get permissions
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 · 2022-07-07T21:16:45Z

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

itsnamangoyal · 2022-07-07T22:54:35Z

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 · 2022-07-08T07:16:30Z

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 · 2022-07-08T07:50:28Z

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 · 2022-07-12T10:55:09Z

@itsnamangoyal what about vite version?

itsnamangoyal · 2022-07-13T22:30:12Z

@itsnamangoyal what about vite version?

Sorry for late reply
I'm using 2.9.5

xsfunc · 2022-08-09T13:07:00Z

some news?

claudebarde · 2022-08-09T14:03:08Z

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 · 2022-08-09T16:24:32Z

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

claudebarde · 2022-08-09T16:26:08Z

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

xsfunc · 2022-08-09T16:48:48Z

@claudebarde can you share vite config please?

RohitKaushal7 · 2022-08-09T20:45:50Z

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 · 2022-08-10T10:31:25Z

@RohitKaushal7 you should remove apply: 'build' in replace plugin initialisation
see #882 (comment)

RohitKaushal7 · 2022-08-10T12:05:20Z

@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 · 2022-08-11T10:08:52Z

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

RohitKaushal7 · 2022-08-11T12:23:17Z

@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 · 2022-08-11T13:05:02Z

@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 · 2022-08-11T13:46:24Z

@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 · 2022-08-28T06:54:08Z

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

claudebarde · 2022-08-28T09:33:28Z

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

souljorje · 2022-08-30T08:28:39Z

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

xsfunc · 2022-09-18T14:48:19Z

@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 · 2023-03-26T17:08:14Z

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 · 2023-04-05T18:20:29Z

Thre is nothing here to be fixed

itsnamangoyal added the bug Something isn't working label Jul 5, 2022

Innkst added the waiting_for_info Waiting on further information label Jul 7, 2022

itsnamangoyal mentioned this issue Jul 8, 2022

sodium.randombytes_buf is not a function #882

Closed

michaelkernaghan closed this as completed Apr 5, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Can't use taquito with vite #1729

Can't use taquito with vite #1729

itsnamangoyal commented Jul 5, 2022

Innkst commented Jul 7, 2022

itsnamangoyal commented Jul 7, 2022

claudebarde commented Jul 8, 2022

itsnamangoyal commented Jul 8, 2022 •

edited

Loading

souljorje commented Jul 12, 2022

itsnamangoyal commented Jul 13, 2022

xsfunc commented Aug 9, 2022

claudebarde commented Aug 9, 2022

xsfunc commented Aug 9, 2022

claudebarde commented Aug 9, 2022

xsfunc commented Aug 9, 2022 •

edited

Loading

RohitKaushal7 commented Aug 9, 2022

souljorje commented Aug 10, 2022 •

edited

Loading

RohitKaushal7 commented Aug 10, 2022

souljorje commented Aug 11, 2022

RohitKaushal7 commented Aug 11, 2022 •

edited

Loading

RohitKaushal7 commented Aug 11, 2022 •

edited

Loading

souljorje commented Aug 11, 2022

xsfunc commented Aug 28, 2022

claudebarde commented Aug 28, 2022

souljorje commented Aug 30, 2022

xsfunc commented Sep 18, 2022 •

edited

Loading

RohitKaushal7 commented Mar 26, 2023 •

edited

Loading

michaelkernaghan commented Apr 5, 2023

Can't use taquito with vite #1729

Can't use taquito with vite #1729

Comments

itsnamangoyal commented Jul 5, 2022

Innkst commented Jul 7, 2022

itsnamangoyal commented Jul 7, 2022

claudebarde commented Jul 8, 2022

itsnamangoyal commented Jul 8, 2022 • edited Loading

souljorje commented Jul 12, 2022

itsnamangoyal commented Jul 13, 2022

xsfunc commented Aug 9, 2022

claudebarde commented Aug 9, 2022

xsfunc commented Aug 9, 2022

claudebarde commented Aug 9, 2022

xsfunc commented Aug 9, 2022 • edited Loading

RohitKaushal7 commented Aug 9, 2022

souljorje commented Aug 10, 2022 • edited Loading

RohitKaushal7 commented Aug 10, 2022

souljorje commented Aug 11, 2022

RohitKaushal7 commented Aug 11, 2022 • edited Loading

RohitKaushal7 commented Aug 11, 2022 • edited Loading

souljorje commented Aug 11, 2022

xsfunc commented Aug 28, 2022

claudebarde commented Aug 28, 2022

souljorje commented Aug 30, 2022

xsfunc commented Sep 18, 2022 • edited Loading

RohitKaushal7 commented Mar 26, 2023 • edited Loading

michaelkernaghan commented Apr 5, 2023

itsnamangoyal commented Jul 8, 2022 •

edited

Loading

xsfunc commented Aug 9, 2022 •

edited

Loading

souljorje commented Aug 10, 2022 •

edited

Loading

RohitKaushal7 commented Aug 11, 2022 •

edited

Loading

RohitKaushal7 commented Aug 11, 2022 •

edited

Loading

xsfunc commented Sep 18, 2022 •

edited

Loading

RohitKaushal7 commented Mar 26, 2023 •

edited

Loading