I'm building a Nuxt-electron-prisma app and I kinda stuck here. when I use prisma normally as guided every thing is fine on dev but on build i get this error :

A javascript error occurred in the main process
Uncaught exception:
Error: can not find module : '.prisma/client'

I tried changing prisma provider output to ../resources/prisma/client

generator client {
  provider = "prisma-client-js"
  output   = "../resources/prisma/client"
}

and in main.js of electron

const { PrismaClient } = require('../resources/prisma/client');
const prisma = new PrismaClient()

but I get error Cannot find module '_http_mon' at webpackMissingModules in both dev and build ! which by others opinion is caused when using prisma on client-side but I only use it on background.js (main.js of the my boilerplate)

I'm using Nuxtron boilerplate for Nuxt-electron which is using yml file for electron-builder config file and in it I also added prisma to files property:

appId: .example.app
productName: nuxt-electron-prisma
copyright: Copyright © 2021
nsis: 
  oneClick: false
  perMachine: true
  allowToChangeInstallationDirectory: true

directories:
  output: dist
  buildResources: resources
files:
  - "resources/prisma/database.db"
  - "node_modules/.prisma/**"
  - "node_modules/@prisma/client/**"
  - from: .
    filter:
      - package.json
      - app
publish: null

and still get errors

in my win-unpacked/resources I have this only: win-unpacked\resources\app.asar.unpacked\node_modules\@prisma\engines

and of course my package.json

{
  "private": true,
  "name": "nuxt-electron-prisma",
  "productName": "nuxt-electron-prisma",
  "description": "",
  "version": "1.0.0",
  "author": "",
  "main": "app/background.js",
  "scripts": {
    "dev": "nuxtron",
    "build": "nuxtron build"
  },
  "dependencies": {
    "electron-serve": "^1.0.0",
    "electron-store": "^6.0.1",
    "@prisma/client": "^3.0.2"
  },
  "devDependencies": {
    "@mdi/font": "^6.1.95",
    "@nuxtjs/axios": "^5.13.6",
    "@nuxtjs/device": "^2.1.0",
    "@nuxtjs/dotenv": "^1.4.1",
    "@nuxtjs/vuetify": "1.12.1",
    "core-js": "^3.15.1",
    "electron": "^10.1.5",
    "electron-builder": "^22.9.1",
    "glob": "^7.1.7",
    "noty": "^3.2.0-beta",
    "nuxt": "^2.15.7",
    "nuxtron": "^0.3.1",
    "sass": "1.32.13",
    "swiper": "^5.4.5",
    "prisma": "^3.0.2",
    "vue-awesome-swiper": "^4.1.1"
  }
}

I'm building a Nuxt-electron-prisma app and I kinda stuck here. when I use prisma normally as guided every thing is fine on dev but on build i get this error :

A javascript error occurred in the main process
Uncaught exception:
Error: can not find module : '.prisma/client'

I tried changing prisma provider output to ../resources/prisma/client

generator client {
  provider = "prisma-client-js"
  output   = "../resources/prisma/client"
}

and in main.js of electron

const { PrismaClient } = require('../resources/prisma/client');
const prisma = new PrismaClient()

but I get error Cannot find module '_http_mon' at webpackMissingModules in both dev and build ! which by others opinion is caused when using prisma on client-side but I only use it on background.js (main.js of the my boilerplate)

I'm using Nuxtron boilerplate for Nuxt-electron which is using yml file for electron-builder config file and in it I also added prisma to files property:

appId: .example.app
productName: nuxt-electron-prisma
copyright: Copyright © 2021
nsis: 
  oneClick: false
  perMachine: true
  allowToChangeInstallationDirectory: true

directories:
  output: dist
  buildResources: resources
files:
  - "resources/prisma/database.db"
  - "node_modules/.prisma/**"
  - "node_modules/@prisma/client/**"
  - from: .
    filter:
      - package.json
      - app
publish: null

and still get errors

in my win-unpacked/resources I have this only: win-unpacked\resources\app.asar.unpacked\node_modules\@prisma\engines

and of course my package.json

{
  "private": true,
  "name": "nuxt-electron-prisma",
  "productName": "nuxt-electron-prisma",
  "description": "",
  "version": "1.0.0",
  "author": "",
  "main": "app/background.js",
  "scripts": {
    "dev": "nuxtron",
    "build": "nuxtron build"
  },
  "dependencies": {
    "electron-serve": "^1.0.0",
    "electron-store": "^6.0.1",
    "@prisma/client": "^3.0.2"
  },
  "devDependencies": {
    "@mdi/font": "^6.1.95",
    "@nuxtjs/axios": "^5.13.6",
    "@nuxtjs/device": "^2.1.0",
    "@nuxtjs/dotenv": "^1.4.1",
    "@nuxtjs/vuetify": "1.12.1",
    "core-js": "^3.15.1",
    "electron": "^10.1.5",
    "electron-builder": "^22.9.1",
    "glob": "^7.1.7",
    "noty": "^3.2.0-beta",
    "nuxt": "^2.15.7",
    "nuxtron": "^0.3.1",
    "sass": "1.32.13",
    "swiper": "^5.4.5",
    "prisma": "^3.0.2",
    "vue-awesome-swiper": "^4.1.1"
  }
}

• javascript
• node.js
• electron
• nuxt.js
• prisma

2 Answers 2

The solution provided by Mojtaba Barari works but it results in @prisma packages being present in both resources/app/node_modules and resources/node_modules.

There is a better way how to do it:

{
  "build": {
    "extraResources": [
      {
        "from": "node_modules/.prisma/client/",
        "to": "app/node_modules/.prisma/client/"
      }
    ],
  }
}

In this case, the Prisma client files will be copied directly to resources/app/node_modules where other @prisma packages are already present and so you will save ~ 10 MB pared to the other solution.

EDIT:

My previous solution doesn't work if an application is packaged into an asar archive. You need to use files field instead:

{
  "build": {
    "files": [
      {
        "from": "node_modules/.prisma/client/",
        "to": "node_modules/.prisma/client/"
      }
    ],
  }
}

This is a universal solution which works even if you don't use an asar archive.

Ok, I finally solved it!! first of all no need to change client generator output direction!

//schema.prisma
datasource db {
  provider = "sqlite"
  url      = "file:../resources/database.db"
}
generator client {
  provider = "prisma-client-js"
  // output   = "../resources/prisma/client"  !! no need for this!
}

then in electron-builder config add ./prisma , @prisma and database

// my config file was a .yml
extraResources:
  - "resources/database.db"
  - "node_modules/.prisma/**/*"
  - "node_modules/@prisma/client/**/*"

// or in js
extraResources:[
  "resources/database.db"
  "node_modules/.prisma/**/*"
  "node_modules/@prisma/client/**/*"
]

this solved `Error: cannot find module : '.prisma/client'

but this alone won't read DB in built exe file!

so in main.js where importing @prisma/client should change DB reading directory:

import { join } from 'path';
const isProd = process.env.NODE_ENV === 'production';

import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient({
  datasources: {
    db: {
      url: `file:${isProd ? join(process.resourcesPath, 'resources/database.db') : join(__dirname, '../resources/database.db')}`,
    },
  },
})

with these configs I could fetch data from my sqlite DB