Signature verification failed -When using vite-react

Developers
2

The first thing that comes to mind for me when switching between Webpack and Vite is that the enviornment variables are not working correctly. My guess is that maybe the root key is being fetched from the wrong network.

On a side note, agent.fetchRootKey() is extremely dangerous code to use on mainnet. Please put it behind a condition so that it only runs locally. This API call will fetch a root key for verification of update calls from a single replica, so it’s possible for that replica to respond with a malicious key. A verified mainnet root key is already embedded into agent-js, so this only needs to be called on your local replica, which will have a different key from mainnet that agent-js does not know ahead of time.

My working vite config looks like this, you can cross reference that with yours to see if there’s anything missing:

import { defineConfig } from 'vitest/config';
import react from '@vitejs/plugin-react';
import checker from 'vite-plugin-checker';
import { viteStaticCopy } from 'vite-plugin-static-copy';
import tsconfigPaths from 'vite-tsconfig-paths';
import { resolve } from 'path';
import dotenv from 'dotenv';

dotenv.config({
  path: resolve(process.cwd(), '..', '..', '.env'),
});

const UI_ENV_VARS = ['DFX_NETWORK', 'BACKEND_CANISTER_ID'];

process.env = {
  ...process.env,
  ...UI_ENV_VARS.reduce(
    (accum, entry) => ({
      ...accum,
      [`VITE_${entry}`]: process.env[entry],
    }),
    {},
  ),
};

export default defineConfig({
  plugins: [
    react(),
    checker({ typescript: true }),
    tsconfigPaths(),
    viteStaticCopy({
      targets: [
        {
          src: 'src/.ic-assets.json',
          dest: '.',
        },
      ],
    }),
  ],
  build: {
    rollupOptions: {
      output: {
        manualChunks: id => {
          if (id.includes('@dfinity')) {
            return 'dfinity-vendor';
          }

          if (id.includes('@mui')) {
            return 'mui-vendor';
          }
        },
      },
    },
  },
  worker: {
    format: 'es',
  },
  test: {
    globals: true,
    environment: 'happy-dom',
    setupFiles: './src/test-setup',
    coverage: {
      provider: 'v8',
      all: true,
      include: ['src/**/*'],
    },
  },
  optimizeDeps: {
    esbuildOptions: {
      define: {
        global: 'globalThis',
      },
    },
  },
  define: {
    'process.env': {
      DFX_NETWORK: process.env.DFX_NETWORK,
      BACKEND_CANISTER_ID: process.env.BACKEND_CANISTER_ID,
    },
  },
  server: {
    proxy: {
      '/api': 'http://127.0.0.1:8080',
    },
  },
});
1 Like