Error on Nuxt 3 stable

[copostic]

I tried to use Web3Auth on a Nuxt 3.0.0 project but I cannot make it work.

As Nuxt uses Vite, I followed the instructions here and I updated my nuxt.config.ts to add these options on vite config but I still have an error

X [ERROR] No matching export in "node-modules-polyfills:crypto" for import "randomBytes"

    node_modules/rollup-plugin-node-polyfills/dist/index.mjs:3:9:
      3 │ import { randomBytes } from 'crypto';
        ╵          ~~~~~~~~~~~

Here's my nuxt.config.ts :

import { resolve } from 'path';
import svgLoader from 'vite-svg-loader';
import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill';
import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill';
import rollupNodePolyFill from 'rollup-plugin-node-polyfills';
import builtins from 'rollup-plugin-node-builtins';

const langPrefix = '/:locale(fr|en)?';

export default defineNuxtConfig({
  modules: ['nuxt-jsonld', '@nuxtjs/strapi', '@intlify/nuxt3', '@nuxtjs/tailwindcss'],
  build: {
    transpile: ['maz-ui']
  },
  plugins: [{
    src: '@/plugins/aos',
    ssr: false,
    mode: 'client'
  }],
  hooks: {
    'pages:extend': function (pages) {
      pages.push(
        {
          name: 'index',
          path: `${langPrefix}`,
          file: resolve(__dirname, 'pages/index.vue')
        }
      );
    }
  },
  intlify: {
    localeDir: 'locales',
    vueI18n: {
      legacy: false,
      globalInjection: true,
      locale: 'en',
      fallbackLocale: 'en'
    }
  },
  runtimeConfig: {
    public: {
      BASE_URL: process.env.BASE_URL,
      STRAPI_API: process.env.STRAPI_API,
      STRAPI_TOKEN: process.env.STRAPI_TOKEN,
      WEB3AUTH_CLIENT_ID: process.env.WEB3AUTH_CLIENT_ID,
      WEB3AUTH_CHAIN_NAMESPACE: process.env.WEB3AUTH_CHAIN_NAMESPACE,
      WEB3AUTH_CHAIN_ID: process.env.WEB3AUTH_CHAIN_ID,
      WEB3AUTH_RPC_TARGET: process.env.WEB3AUTH_RPC_TARGET
    },
    private: {
      WEB3AUTH_CLIENT_SECRET: process.env.WEB3AUTH_CLIENT_SECRET
    }
  },
  typescript: {
    strict: true
  },
  vite: {
    resolve: {
      alias: {
        util: 'rollup-plugin-node-polyfills/polyfills/util',
        sys: 'util',
        events: 'rollup-plugin-node-polyfills/polyfills/events',
        stream: 'rollup-plugin-node-polyfills/polyfills/stream',
        path: 'rollup-plugin-node-polyfills/polyfills/path',
        querystring: 'rollup-plugin-node-polyfills/polyfills/qs',
        punycode: 'rollup-plugin-node-polyfills/polyfills/punycode',
        url: 'rollup-plugin-node-polyfills/polyfills/url',
        http: 'rollup-plugin-node-polyfills/polyfills/http',
        https: 'rollup-plugin-node-polyfills/polyfills/http',
        os: 'rollup-plugin-node-polyfills/polyfills/os',
        assert: 'rollup-plugin-node-polyfills/polyfills/assert',
        constants: 'rollup-plugin-node-polyfills/polyfills/constants',
        _stream_duplex: 'rollup-plugin-node-polyfills/polyfills/readable-stream/duplex',
        _stream_passthrough: 'rollup-plugin-node-polyfills/polyfills/readable-stream/passthrough',
        _stream_readable: 'rollup-plugin-node-polyfills/polyfills/readable-stream/readable',
        _stream_writable: 'rollup-plugin-node-polyfills/polyfills/readable-stream/writable',
        _stream_transform: 'rollup-plugin-node-polyfills/polyfills/readable-stream/transform',
        timers: 'rollup-plugin-node-polyfills/polyfills/timers',
        console: 'rollup-plugin-node-polyfills/polyfills/console',
        vm: 'rollup-plugin-node-polyfills/polyfills/vm',
        zlib: 'rollup-plugin-node-polyfills/polyfills/zlib',
        tty: 'rollup-plugin-node-polyfills/polyfills/tty',
        domain: 'rollup-plugin-node-polyfills/polyfills/domain',
        buffer: 'rollup-plugin-node-polyfills/polyfills/buffer-es6',
        process: 'rollup-plugin-node-polyfills/polyfills/process-es6'
      }
    },
    optimizeDeps: {
      esbuildOptions: {
        target: 'es2020',
        supported: { bigint: true },
        plugins: [
          NodeGlobalsPolyfillPlugin({
            process: true,
            buffer: true
          }),
          NodeModulesPolyfillPlugin()
        ]
      }
    },
    build: {
      target: 'es2020',
      rollupOptions: {
        plugins: [
          builtins(),
          rollupNodePolyFill()
        ]
      }
    },
    plugins: [
      svgLoader({
        svgo: true,
        svgoConfig: {
          plugins: [
            {
              name: 'preset-default',
              params: {
                overrides: {
                  inlineStyles: {
                    onlyMatchedOnce: false
                  },
                  mergeStyles: false,
                  cleanupIDs: false
                }
              }
            }
          ]
        }
      })
    ]
  }
});

Any idea of the source of the bug?

[shahbaz17]

Hey @copostic

Please take a look at this example and this troubleshooting guide.

If you still see an error, please create a topic on our community forum.