We Keep Coding

Electron-Prisma Error: can not find module '.prisma/client'

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_common' 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: com.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"
}
}

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 compared 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

Webpack#5 + angularJS + babel: Module parse failed: Unexpected token (2115:9), no loaders are configured to process this file

Until today, builds were succesfull without any errors, only warning about build size (I am using socket.io-client and some other packages without issues). I have made many succesfull builds with my simple config.
I am not using typescript, it's a simple single page website, the site is live and running with production build scripts from yesterday.
But today, after running npm update (which updated nothing), I can't make any changes because the build fails no matter what I try to fix it.
Any help is appreciated.
I am getting the following error:
ERROR in ./node_modules/angular/angular.js 2115:9
Module parse failed: Unexpected token (2115:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| * throw error if the argument is falsy.
| */
> function assertArg(arg, name, reason) {
| if (!arg) {
| throw ngMinErr('areq', 'Argument \'{0}\' is {1}', (name || '?'), (reason || 'required'));
# ./node_modules/angular/index.js 1:0-20
# ./resources/assets/app/index.js 15:14-32
webpack 5.45.0 compiled with 1 error and 1 warning in 38636 ms
The error is generated by the babel-loader, using version 8.2.2:
"node_modules/babel-loader": {
"version": "8.2.2",
"resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.2.tgz",
"integrity": "sha512-JvTd0/D889PQBtUXJ2PXaKU/pjZDMtHA9V2ecm+eNRmmBCMR09a+fmpGTNwnJtFmFl5Ei7Vy47LjBb+L0wQ99g==",
"dev": true,
"dependencies": {
"find-cache-dir": "^3.3.1",
"loader-utils": "^1.4.0",
"make-dir": "^3.1.0",
"schema-utils": "^2.6.5"
},
"engines": {
"node": ">= 8.9"
},
"peerDependencies": {
"#babel/core": "^7.0.0",
"webpack": ">=2"
}
},
My webpack.common.js:
const config = {
resolve: {
modules: [path.resolve(__dirname, 'resources/assets'), 'node_modules'],
},
entry: {
app: './resources/assets/app/index.js',
},
output: {
// ...
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
]
},
plugins: [
new MiniCssExtractPlugin(), new WebpackBuildNotifierPlugin(
{
title: "Build Complete!",
sound: true,
}
),
],
optimization: {
sideEffects: true,
usedExports: false,
removeEmptyChunks: true,
concatenateModules: true,
mangleExports: 'size',
}
};
module.exports = config;
Then I use that config in my webpack.dev.js:
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge( common, {
mode: 'development',
devtool: 'inline-source-map',
});
Running dev build with:
webpack --mode development --watch --config webpack.dev.js
According to package-lock.json my angular version is 1.8.2:
"node_modules/angular": {
"version": "1.8.2",
"resolved": "https://registry.npmjs.org/angular/-/angular-1.8.2.tgz",
"integrity": "sha512-IauMOej2xEe7/7Ennahkbb5qd/HFADiNuLSESz9Q27inmi32zB0lnAsFeLEWcox3Gd1F6YhNd1CP7/9IukJ0Gw=="
},
My npm and node versions:
$ npm -v
7.19.1
$ node -v
v16.5.0

Finally solved the issue. In the end I removed node_modules folder, removed all unnecessary packages from package.json, did a clean npm install and build are working now. I made no changes to the webpack configs.
So I really don't know what was the problem, it might be some module acting up.

Brunch doesn't compile uikit js files

I am trying to compile my code using brunch, but the line js/components.js doesn't compile.
I tried changing the path from regex to a normal link, but nothing seems to make my components.js to be written.
Running brunch build -d doesn't give me any info about any of those files.
// package.json
"dependencies": {
"babel-brunch": "^7.0.1",
"brunch": "^2.10.17",
"clean-css-brunch": "^2.10.0",
"javascript-brunch": "^2.10.0",
"sass-brunch": "^2.10.8",
"uglify-js-brunch": "^2.10.0"
}
// brunch-config.js
module.exports = {
paths: {
'public': 'web',
'watched': ['app/Resources']
},
files: {
javascripts: {
joinTo: {
'js/app.js': /^app/,
// the next line is where my problem is
'js/components.js': /^bower_components\/uikit\/dist\/js\/components/
}
},
stylesheets: {
joinTo: {
'css/style.css': /style.scss/
}
}
}
};
I expect the file components.js to be written in my web/js/ directory, but nothing ever happens.

Grunt watch: livereload reloads 1 step behind…

here's my gruntfile:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
hologram: {
generate: {
options: {
config: 'config.yml'
}
}
},
libsass: {
files: {
src: 'src/scss/style.scss',
dest: 'templates/static/css/style.css'
}
},
connect: {
server: {
options: {
port: 8000,
hostname: 'localhost',
base: 'docs/',
livereload: 35729
}
}
},
watch: {
scss: {
files: ['src/scss/**/*.scss', 'templates/static/css/*.css'],
tasks: ['libsass','hologram'],
options: {
livereload: true
}
}
}
});
// Load plugins.
grunt.loadNpmTasks('grunt-libsass');
grunt.loadNpmTasks('grunt-hologram');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-watch');
// Default task(s).
grunt.registerTask('default', ['connect','libsass','hologram','watch']);
};
And here's my package file:
{
"name": "...",
"version": "1.0.0",
"description": "...",
"dependencies": {
"grunt": "^0.4.5"
},
"devDependencies": {
"connect-livereload": "^0.5.2",
"grunt": "^0.4.5",
"grunt-contrib-connect": "^0.9.0",
"grunt-contrib-watch": "^0.6.1",
"grunt-hologram": "0.0.4",
"grunt-libsass": "^0.2.0"
},
"repository": {
"type": "git",
"url": "..."
},
"author": "Yann Bettremieux",
"homepage": "..."
}
Everything seems to be working fine. When I go to http://localhost:8000/ I see my site and when I save my watched files the page reloads etc. But it doesn't actually reloads the previous changes. Meaning, the first time I edit a SCSS file to say color: blue, I see in the inspector that some CSS livereload files are loaded but there is no change on the page. If I change the CSS to color: red the page reload but show everything in blue… If I change it to green, it reloads and shows me the everything in red, etc. etc.
I tried tu use the chrome livereload extension insrtead but it didn't change anything.
I tried grunt-sass instead of libsass. Same behavior.
Not sure what else to try to resolve this issue. Any pointer in thr right direction much appreciated!

Livereload Readme already addresses the issue. See live-reload-with-preprocessors:
Any time a watched file is edited with the livereload option enabled,
the file will be sent to the live reload server. Some edited files you
may desire to have sent to the live reload server, such as when
preprocessing (sass, less, coffeescript, etc). As any file not
recognized will reload the entire page as opposed to just the css or
javascript.
The solution is to point a livereload watch target to your destination files.
You should enable livereload only for css files.
watch: {
scss: {
files: ['src/scss/**/*.scss'],
tasks: ['libsass','hologram']
},
css: {
files: ['templates/static/css/*.css'],
options: {
livereload: true
}
}
}

Browserify Shim Buffer core module

I'm trying to browserify my library where there are Buffer core module being use in different places.
I want to shim this core Buffer with another library that we are using.
I have tried to look into https://github.com/thlorenz/browserify-shim where I can specify my module that I want to shim but it doesn't seem to work.
I've created file called shim.js
var Buffer = require('myModule').Buffer;
module.exports = {
Buffer: { exports: Buffer }
};
in Package.json
{
...
"dependencies": {
"MD5": "^1.2.1",
"browser-request": "^0.3.1",
"browserify-shim": "^3.6.0",
...
},
"devDependencies": {
...
},
"browserify-shim": "./shims.js"
}
And in Gruntfile.js (I'm using grunt-browserify)
browserify: {
src: "./index.js",
options: {
transform: ['browserify-shim'],
browserifyOptions: {
builtins: false
},
bundleOptions: {
standalone: "mylibrary"
}
}
}
},
Right now when I grunt build the file I'm still seeing this being require in:
[function(_dereq_,module,exports){
(function (Buffer){
And in my browser is complaining about
Uncaught Error: Module name "buffer" has not been loaded yet for context: _. Use require([])