Skip to main content
Utilities to help configure your bundler (Vite, Webpack, or Next.js) to properly resolve the jose library dependency.

​
Overview

logto-authkit uses the jose library for JWT operations. Some bundlers require special configuration to properly resolve this dependency. These utilities provide the necessary configuration for different build tools.

​
Functions

​
getBundlerConfig

Returns bundler-specific configuration for resolving the jose library. 
getBundlerConfig(bundler?: 'vite' | 'webpack' | 'nextjs'): BundlerConfig
​
bundler
'vite' | 'webpack' | 'nextjs'
default:"vite"
The bundler type to generate configuration for
Returns: BundlerConfig - Configuration object specific to the bundler

​
Pre-configured Exports

​
viteConfig

Pre-configured settings for Vite projects. 
export const viteConfig: BundlerConfig

​
webpackConfig

Pre-configured settings for Webpack projects. 
export const webpackConfig: BundlerConfig

​
nextjsConfig

Pre-configured settings for Next.js projects. 
export const nextjsConfig: BundlerConfig

​
Type Definitions

​
BundlerConfig

interface BundlerConfig {
  optimizeDeps?: {
    include: string[]
  }
  resolve?: {
    alias: Record<string, string>
  }
  alias?: Record<string, string>
}
​
optimizeDeps
{ include: string[] }
Vite-specific dependency optimization settings
​
resolve
{ alias: Record<string, string> }
Module resolution aliases
​
alias
Record<string, string>
Alternative alias format for some bundlers

​
Usage Examples

​
Vite

Add to your vite.config.ts: 
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { viteConfig } from '@ouim/logto-authkit/bundler-config'

export default defineConfig({
  plugins: [react()],
  ...viteConfig,
})
Or use the function: 
import { getBundlerConfig } from '@ouim/logto-authkit/bundler-config'

const bundlerConfig = getBundlerConfig('vite')

export default defineConfig({
  plugins: [react()],
  optimizeDeps: bundlerConfig.optimizeDeps,
  resolve: bundlerConfig.resolve,
})

​
Webpack

Add to your webpack.config.js: 
const { webpackConfig } = require('@ouim/logto-authkit/bundler-config')

module.exports = {
  // ... other webpack config
  resolve: webpackConfig.resolve,
}

​
Next.js

Add to your next.config.js: 
const { nextjsConfig } = require('@ouim/logto-authkit/bundler-config')

module.exports = {
  // ... other Next.js config
  webpack: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      ...nextjsConfig.resolve.alias,
    }
    return config
  },
}
Or in TypeScript (next.config.ts): 
import type { NextConfig } from 'next'
import { nextjsConfig } from '@ouim/logto-authkit/bundler-config'

const config: NextConfig = {
  webpack: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      ...nextjsConfig.resolve?.alias,
    }
    return config
  },
}

export default config

​
Custom Bundler

For other bundlers, use the getBundlerConfig function: 
import { getBundlerConfig } from '@ouim/logto-authkit/bundler-config'

// Get the base jose alias
const config = getBundlerConfig() // Returns { alias: { jose: 'jose/dist/node/cjs' } }

// Apply to your custom bundler configuration
customBundler.setAlias(config.alias)

​
What Does This Fix?

The jose library has different builds for different environments. These configurations ensure that:
  1. The correct CommonJS build is used (jose/dist/node/cjs)
  2. Dependencies are properly optimized for Vite
  3. Module resolution works correctly across different bundlers
Without this configuration, you may encounter errors like:
  • Cannot find module 'jose'
  • Error: Package subpath './jwt/verify' is not defined
  • Module resolution failures during build

​
Configuration Details

​
Vite Configuration

{
  optimizeDeps: {
    include: ['@logto/react', '@ouim/better-logto-react'],
  },
  resolve: {
    alias: {
      jose: 'jose/dist/node/cjs',
    },
  },
}

​
Webpack/Next.js Configuration

{
  resolve: {
    alias: {
      jose: 'jose/dist/node/cjs',
    },
  },
}