Trying to get my head around getting a dialog.showMessageBox() in the render process using preload. I'm trying const {dialog} = require( 'electron') but it's returning undefined. What am I missing?

main.js:

    const consoleWindow = new BrowserWindow({
        title: 'TakServer | Console',
        width: DEBUG ? 1000 : 800,
        height: 600,
        resizable: true,
        alwaysOnTop: true,
        show: false,
        webPreferences: {
            nodeIntegration: false, 
            contextIsolation: true, n
            enableRemoteModule: false, 
            preload: path.join(__dirname, "preload.js") 
        }
    })

preload.js:

const { contextBridge, dialog } = require("electron");

console.log( "dialog", dialog ) // !!  undefined

contextBridge.exposeInMainWorld( 'api',
    {
        test: ( x ) => {
            const {fs} = require( 'fs' )

            console.log( "gubbmins", fs  )
            dialog.showMessageBox( { 
                type: "info", 
                message: "stuff" 
            })  
        }
    }
)