Drizzle Team•4d ago

Drizzle alongside Electron, Vite and Nuxt

Hey! Recently decided to go for Drizzle on my Manga reading app I'm making with electron and nuxtjs (vue framework). However when I compile my code through vite, nuxt-electron and vite-plugin-electron, I get this fatal error: (other message since discord's limit..) It ain't the first time it happened to someone: https://stackoverflow.com/questions/78614985/could-not-dynamically-require But no relevant answer as the only one wanted us to use better-sqlite3.. If you need any other info, please ping me. Thanks in advance, Adam

Stack Overflow

Could not dynamically require

I write electron applications using typescript, vite and react. I also want to use sqlite (the application should run locally). I found a great ORM (Drizzle), but I have a problem with the libSQL d...

11 Replies

AdamOP•4d ago

Error: Could not dynamically require "@libsql/win32-x64-msvc". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.
    at _c (D:\Utilisateurs\Adam\Documents\dev\TypeScript\nekoview\dist-electron\main.js:1:13090)
    at n (D:\Utilisateurs\Adam\Documents\dev\TypeScript\nekoview\dist-electron\main.js:1:18344)
    at Fh (D:\Utilisateurs\Adam\Documents\dev\TypeScript\nekoview\dist-electron\main.js:1:18801)
    at Object.<anonymous> (D:\Utilisateurs\Adam\Documents\dev\TypeScript\nekoview\dist-electron\main.js:1:23177)
    at Module._compile (node:internal/modules/cjs/loader:1484:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1564:10)
    at Module.load (node:internal/modules/cjs/loader:1295:32)
    at Module._load (node:internal/modules/cjs/loader:1111:12)
    at c._load (node:electron/js2c/node_init:2:16955)
    at cjsLoader (node:internal/modules/esm/translators:350:17)

Error: Could not dynamically require "@libsql/win32-x64-msvc". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.
    at _c (D:\Utilisateurs\Adam\Documents\dev\TypeScript\nekoview\dist-electron\main.js:1:13090)
    at n (D:\Utilisateurs\Adam\Documents\dev\TypeScript\nekoview\dist-electron\main.js:1:18344)
    at Fh (D:\Utilisateurs\Adam\Documents\dev\TypeScript\nekoview\dist-electron\main.js:1:18801)
    at Object.<anonymous> (D:\Utilisateurs\Adam\Documents\dev\TypeScript\nekoview\dist-electron\main.js:1:23177)
    at Module._compile (node:internal/modules/cjs/loader:1484:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1564:10)
    at Module.load (node:internal/modules/cjs/loader:1295:32)
    at Module._load (node:internal/modules/cjs/loader:1111:12)
    at c._load (node:electron/js2c/node_init:2:16955)
    at cjsLoader (node:internal/modules/esm/translators:350:17)

I'm using the libsql driver, following the guide in the Get Started section under SQLite. Here is my nuxt configuration (which also includes vite's)

import path from 'node:path';

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    compatibilityDate: '2024-11-01',
    devtools: { enabled: true },
    srcDir: 'src',
    css: ['~/assets/css/main.css'],
    modules: ['nuxt-electron', 'floating-vue/nuxt', '@nuxt/image'],
    electron: {
        disableDefaultOptions: true,
        build: [
            {
                entry: 'src/electron/main.ts',
                vite: {
                    resolve: {
                        alias: {
                            '~': path.resolve(__dirname, 'src'),
                        }
                    }
                }
            },
            {
                entry: 'src/electron/preload.ts',
                onstart(args) {
                    args.reload()
                },
            },
        ],
        renderer: {},
    },
    app: {
        head: {
            meta: [
                { "http-equiv": "Content-Security-Policy", content: "script-src 'self' 'unsafe-inline'" },
            ]
        }
    },
    vite: {
        resolve: {
            alias: {
                '~': path.resolve(__dirname, 'src'),
            }
        },
        build: {
            commonjsOptions: {
                dynamicRequireTargets: ["@libsql/win32-x64-msvc"] // here I tried this solution..
            }
        }
    },
    ssr: false,
});

import path from 'node:path';

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    compatibilityDate: '2024-11-01',
    devtools: { enabled: true },
    srcDir: 'src',
    css: ['~/assets/css/main.css'],
    modules: ['nuxt-electron', 'floating-vue/nuxt', '@nuxt/image'],
    electron: {
        disableDefaultOptions: true,
        build: [
            {
                entry: 'src/electron/main.ts',
                vite: {
                    resolve: {
                        alias: {
                            '~': path.resolve(__dirname, 'src'),
                        }
                    }
                }
            },
            {
                entry: 'src/electron/preload.ts',
                onstart(args) {
                    args.reload()
                },
            },
        ],
        renderer: {},
    },
    app: {
        head: {
            meta: [
                { "http-equiv": "Content-Security-Policy", content: "script-src 'self' 'unsafe-inline'" },
            ]
        }
    },
    vite: {
        resolve: {
            alias: {
                '~': path.resolve(__dirname, 'src'),
            }
        },
        build: {
            commonjsOptions: {
                dynamicRequireTargets: ["@libsql/win32-x64-msvc"] // here I tried this solution..
            }
        }
    },
    ssr: false,
});

TOSL•4d ago

You show adding this to your nuxt config. Did you try adding it to your vite config instead? Oh, I see you say it's the same.

AdamOP•4d ago

yea the vite section on nuxt's config is simply vite's defineConfig thingy I might have found an issue, forgot there was a vite section for each electron builds too, might try adding the dynamicRequireTargets there well now I have a different error about protocols

build: [
            {
                entry: 'src/electron/main.ts',
                vite: {
                    resolve: {
                        alias: {
                            '~': path.resolve(__dirname, 'src'),
                        }
                    },
                    build: {
                        commonjsOptions: {
                            dynamicRequireTargets: ["@libsql/win32-x64-msvc"]
                        },
                        rollupOptions: {
                            external: ["@libsql/client", "@libsql/win32-x64-msvc"],
                        }
                    }
                }
            },
            {
                entry: 'src/electron/preload.ts',
                onstart(args) {
                    args.reload()
                },
            },
        ],

build: [
            {
                entry: 'src/electron/main.ts',
                vite: {
                    resolve: {
                        alias: {
                            '~': path.resolve(__dirname, 'src'),
                        }
                    },
                    build: {
                        commonjsOptions: {
                            dynamicRequireTargets: ["@libsql/win32-x64-msvc"]
                        },
                        rollupOptions: {
                            external: ["@libsql/client", "@libsql/win32-x64-msvc"],
                        }
                    }
                }
            },
            {
                entry: 'src/electron/preload.ts',
                onstart(args) {
                    args.reload()
                },
            },
        ],

TOSL•4d ago

this repo uses prisma not drizzle but maybe the config can shed light on your issue? https://github.com/gurvancampion/nuxt-electron-trpc-prisma/blob/master/nuxt.config.ts

GitHub

nuxt-electron-trpc-prisma/nuxt.config.ts at master · gurvancampion...

Contribute to gurvancampion/nuxt-electron-trpc-prisma development by creating an account on GitHub.

AdamOP•4d ago

LibsqlError: URL_SCHEME_NOT_SUPPORTED: The client supports only "libsql:", "wss:", "ws:", "https:", "http:" and "file:" URLs, got "C:". For more information, please read https://github.com/libsql/libsql-client-ts#supported-urls
    at expandConfig (D:\Utilisateurs\Adam\Documents\dev\TypeScript\nekoview\node_modules\@libsql\core\lib-cjs\config.js:98:15)
    at Object.createClient (D:\Utilisateurs\Adam\Documents\dev\TypeScript\nekoview\node_modules\@libsql\client\lib-cjs\node.js:28:52)
    at we (D:\Utilisateurs\Adam\Documents\dev\TypeScript\nekoview\dist-electron\main.js:13:24149)
    at new jr (D:\Utilisateurs\Adam\Documents\dev\TypeScript\nekoview\dist-electron\main.js:13:24553)
    at new Pr (D:\Utilisateurs\Adam\Documents\dev\TypeScript\nekoview\dist-electron\main.js:13:25173)
    at Object.<anonymous> (D:\Utilisateurs\Adam\Documents\dev\TypeScript\nekoview\dist-electron\main.js:13:26690)
    at Module._compile (node:internal/modules/cjs/loader:1484:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1564:10)
    at Module.load (node:internal/modules/cjs/loader:1295:32)
    at Module._load (node:internal/modules/cjs/loader:1111:12)

LibsqlError: URL_SCHEME_NOT_SUPPORTED: The client supports only "libsql:", "wss:", "ws:", "https:", "http:" and "file:" URLs, got "C:". For more information, please read https://github.com/libsql/libsql-client-ts#supported-urls
    at expandConfig (D:\Utilisateurs\Adam\Documents\dev\TypeScript\nekoview\node_modules\@libsql\core\lib-cjs\config.js:98:15)
    at Object.createClient (D:\Utilisateurs\Adam\Documents\dev\TypeScript\nekoview\node_modules\@libsql\client\lib-cjs\node.js:28:52)
    at we (D:\Utilisateurs\Adam\Documents\dev\TypeScript\nekoview\dist-electron\main.js:13:24149)
    at new jr (D:\Utilisateurs\Adam\Documents\dev\TypeScript\nekoview\dist-electron\main.js:13:24553)
    at new Pr (D:\Utilisateurs\Adam\Documents\dev\TypeScript\nekoview\dist-electron\main.js:13:25173)
    at Object.<anonymous> (D:\Utilisateurs\Adam\Documents\dev\TypeScript\nekoview\dist-electron\main.js:13:26690)
    at Module._compile (node:internal/modules/cjs/loader:1484:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1564:10)
    at Module.load (node:internal/modules/cjs/loader:1295:32)
    at Module._load (node:internal/modules/cjs/loader:1111:12)

yea might try their dependencies external thingy welp still protocl issue holdon i know why my bad

TOSL•4d ago

Okay protocl is progress though not a build issue anymore

AdamOP•4d ago

forgot the "file:" before in drizzle initialization

TOSL•4d ago

Awesome! So working now?

AdamOP•4d ago

well doing every dependency in the rollup ,options got the error back I fixed it by going back to my "manual" rollup options, only including libsql stuff this one here and now it works well I can give an answer to the dude on stackoverflow eheh

TOSL•4d ago

That's great. Good luck with your project

AdamOP•4d ago

thanks for your time man!

Gaming

Programming

Drizzle alongside Electron, Vite and Nuxt

Did you find this page helpful?