How to use better-sqlite3 with electron-react-boilerplate - reactjs

Consider this example created by using the following steps:
git clone --depth=1 https://github.com/electron-react-boilerplate/electron-react-boilerplate.git better-sqlite3-test
cd better-sqlite3-test
yarn
cd ./release/app
yarn add better-sqlite3
cd ../..
yarn add -D #types/better-sqlite3
Now, as soon as I start using the database.js like this:
class B3SqliteDB {
constructor() {
let db = null;
}
startDB = () => {
const Database = require('better-sqlite3');
this.db = new Database('upStore.db', { verbose: console.log });
const createTable =
"CREATE TABLE IF NOT EXISTS newTable ('id' VARCHAR(10) NOT NULL, 'name' VARCHAR(50) NOT NULL);";
this.db.exec(createTable);
};
}
export default new B3SqliteDB;
I am getting the error:
Uncaught TypeError: Database is not a constructor
at B3SqliteDB.startDB (renderer.dev.js:65346)
at renderer.dev.js:65285
Can someone please help to figure this out! TYA

This worked for me
Downgrade electron to 13.6
Install better-sqlite3 in root
Rebuild the package
Test
yarn remove electron
yarn add electron#13.6.1
yarn add better-sqlite3;
cd node_modules/better-sqlite3;
../.bin/electron-rebuild
cd ../..
npm run start
enter image description here
Note
You can try other desktop options (Electron Alternatives) that support integration ReactJS | VueJS just fine
Wails (Golang)
https://github.com/wailsapp/wails
Lorka (Golang)
https://github.com/zserge/lorca
Tauri (Rust)
https://github.com/tauri-apps/tauri
Flutter Desktop (Dart)
https://flutter.dev/desktop
What I love is that the app size is just 10 - 20 times smaller than a sample Hello World Electron App.

Related

Uncaught TypeError: Cannot read properties of undefined (reading 'call') at Hash.CipherBase

I am using create-hash package (https://github.com/crypto-browserify/createHash) in my code of ionic react application.
I have installed the package using npm install create-hash
I am using the function as following:
const hash = createHash('sha256')
.update("entropyBuffer")
.digest();
However, it throws the following error in the browser:
When I change the algorithm to the following: 'md5', 'rmd160' and 'ripemd160', it works fine. I don't understand what is the problem?
I have looked at the similar queries online but nothing was helpful.
https://github.com/crypto-browserify/cipher-base/issues/11
How to generate a Mnemonic in Angular (with npm package bip39 for Solana)
Referring to the original answer here - Link
patch-package helped me:
npm i patch-package
in the package.json add this line:
"scripts": {
"postinstall": "patch-package",
}
opend the problem file and correct it. In my case:
node_modules/cipher-base/index.js
var Buffer = require('safe-buffer').Buffer
var Transform = require('readable-stream').Transform // replacing instead of "stream"
var StringDecoder = require('string_decoder').StringDecoder
var inherits = require('inherits')
function CipherBase (hashMode) {
...
run the command from a root dir of your project:
npx patch-package cipher-base
it'll create a new folder patches in the root dir and add there this fix. That's all. Commit changes. It'll automaticaly replace code in the node_modules after reinstalling packages

ERROR TS6054: File '~lib/#tensorflow/tfjs-node.ts' not found

I'm trying to use AssemblyScript to build a WebAssembly inference engine for a TensorFlow.js model that I have.
I started with essentially the quickstart AssemblyScript app (which works great) and then simply added #tensorflow/tfjs to my dependencies:
$ npm install --save #tensorflow/tfjs
and added an import to assembly/index.ts:
import * as tf from "#tensorflow/tfjs";
Full code here on Github
This results in an error when I build it:
$ npm run asbuild
> test-assemblyscript#1.0.0 asbuild
> npm run asbuild:untouched && npm run asbuild:optimized
> test-assemblyscript#1.0.0 asbuild:untouched
> asc assembly/index.ts --target debug
ERROR TS6054: File '~lib/#tensorflow/tfjs.ts' not found.
import * as tf from "#tensorflow/tfjs";
~~~~~~~~~~~~~~~~~~
in assembly/index.ts(1,21)
FAILURE 1 parse error(s)
Am I misunderstanding the import syntax? I am puzzled why it would be looking in ~lib for this versus node_modules.
If you are sure the module you are trying to import is assemblyscript files, you can import with something like this ./node_modules/#tenderflow/tfjs.
I am not sure if #tensorflow has assembly files built, but I did that on assemblyscript-json for assemblyscript#0.19.8 (0.25.2 doesn't have that problem).
For example
assemblyscript-json has exported assemblyscript files from its package, so I can do this (ref)
import { JSON } from './node_modules/assemblyscript-json/assembly';
export function formatJsonString(jsonString: string): string {
const jsonObj: JSON.Obj = <JSON.Obj>JSON.parse(jsonString);
return jsonObj.stringify();
}

workerize-loader failed to work after compiling (react typescript)

I created a rust-wasm module and use workerize-loader to load it:
export const getQRCode = async (
arg: string,
width: number,
height: number
) => {
const { qrcode } = await import('uranus-qrcode');
return qrcode(arg, width, height);
};
and then I use the worker as such:
// #ts-ignore
// eslint-disable-next-line import/no-webpack-loader-syntax
import qrCodeWorker from 'workerize-loader!workers/qrCodeWorker';
...
const workerizeQRLoader = async () => {
try {
const instance = qrCodeWorker();
const qr = await instance.getQRCode(href, 150, 150);
setQRCode({
__html: qr
});
} catch (e) {
console.warn(e);
}
};
...
useEffect(() => {
workerizeQRLoader();
// qrLoader();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
...
The above works in dev mode, but after compiling it says:
TypeError: a.getQRCode is not a function
at 8.a2ac9b2e.chunk.js:1
at l (0.69608c56.chunk.js:2)
at Generator._invoke (0.69608c56.chunk.js:2)
at Generator.forEach.e.<computed> [as next] (0.69608c56.chunk.js:2)
at r (0.69608c56.chunk.js:2)
at s (0.69608c56.chunk.js:2)
at 0.69608c56.chunk.js:2
at new Promise (<anonymous>)
at 0.69608c56.chunk.js:2
at 8.a2ac9b2e.chunk.js:1
If I import the rust-wasm module directly into the main thread it works:
...
const qrLoader = async () => {
const { qrcode: render } = await import('uranus-qrcode');
const qr = await render(href, 150, 150);
setQRCode({
__html: qr
});
};
useEffect(() => {
// workerizeQRLoader();
qrLoader();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
...
Basically I try to get React (Webpack & TypeScript flavor) to load WebAssembly modules (aka wasm, created via Rust-Wasmbindgen) through web workers. I've tried workerize-loader + wasm-loader, and it works pretty well in the dev mode but once it is compiled, the prototype will not be added to the worker (suspecting it's a bug in workerize-loader because all workerized modules behave the same). I also tried to work with worker-loader + comlink, but the worker-loader doesn't seem to work with wasm-loader (would not be able to import wasm into the worker). The only way to get this to work is to load wasm into the main thread via wasm-loader and just give up the multi-threads setup which is basically a shame...so does anyone have successfully use a WebAssembly module loaded through a web worker in a React TypeScript project? What's your setup?
I also created a starter project: https://github.com/aeroxy/react-typescript-webassembly-starter.git
You can checkout the "workerize" branch and see how it works in dev mode but after compiling, it throws "not a function" error.
This is a bit much for a comment but I got some bad and good news. Executed the following commands using node v12.16.1 and yarn 1.22.4:
git clone https://github.com/aeroxy/react-typescript-webassembly-starter.git
cd react-typescript-webassembly-starter
yarn # some warnings that packages need to be updated to later version
yarn start # dev version works
yarn build
cd build
npx serve
When opening the build version in Google Chrome 81.0.4044.113 (Official Build) (64-bit) on my Fedora 31 I can see the qr code, no errors in console.
That means that there is no fault in the project (good news) but something maybe wrong in settings on your machine (bad news), the os you are using or some other machine specific difference.
You could try a to clone the project again and run the commands exactly like I did to see if that's working. Older npm could have some problems with cached packages but that's been fixed for a while now. A while ago you needed to change the repository for npm or use vpn because it was blocked, this could also be causing you trouble.
This is a duplicate of my original answer but got deleted for some odd reason by a moderator without leaving a reason.
Now the workerize method works!
I've originally tried workerize-loader + wasm-loader, and it works pretty well in the dev mode but once it is compiled, the prototype will not be added to the worker (suspecting it's a bug in workerize-loader because all workerized modules behave the same). This indeed turns out to be a bug in workerize-loader (see workerize-loader failed to work after compiling and Version 1.2.0 does not export function on worker instance in production mode). After upgrading to the workerize-loader 1.2.1, it works in both dev and prod code.
I have updated the Master repo: https://github.com/aeroxy/react-typescript-webassembly-starter.git

Reactnative - 'React/RCTBridgeModule.h' file not found

I am trying to use react-native-linea in my react native app and during build I am getting React/RCTBridgeModule.h' file not found error.
Steps I tried -
1. react-native init ScannerApp
2. cd ScannerApp/
3. npm i react-native-linea --save
4. react-native link react-native-linea
5.Drag and drop the InfineaSDK Framework into the General > Embedded Binaries section of your Project. The framework will also display the Linked Frameworks and Libraries.
a. Verify that Copy Items if needed is checked.
6.Add the following to General > Linked Frameworks and Libraries:
• CoreLocation.framework
• ExternalAccessory.framework
• Foundation.framework
7.Add a new Run Script phase.
At the end of your project’s Build phase(s), add new running scripts to set up InfineaSDK.
FRAMEWORKS="${BUILT_PRODUCTS_DIR}/${FRAMEWORKS_FOLDER_PATH}" "${FRAMEWORKS}/InfineaSDK.framework/SDKSetup"
8.react-native run-ios
****Error*****
simulator/react-native-linea.build/Objects-normal/x86_64/RCTLinea.o
In file included from /Users/****/reactnative/ScannerApp/node_modules/react-native-linea/react-native-linea/RCTLinea.m:9:
/Users/****/reactnative/ScannerApp/node_modules/react-native-linea/react-native-linea/RCTLinea.h:9:9: fatal error: 'React/RCTBridgeModule.h' file not found
#import <React/RCTBridgeModule.h>
^~~~~~~~~~~~~~~~~~~~~~~~~
1 error generated.
** BUILD FAILED **
Solution 1: Adding podspec
Prerequisite: You will need to setup React as cocoapod dependency for this to work. Also, before you try this make sure you have package react-native-linea available in node_modules.
In this solution you need to create a podspec file for the linea. You can choose to keep it in your ScannerApp project or fork the original repo and add the podspec file to it. If you fork, please modify the git urls in the podspec to your repo url and add the react-native-linea package from your repo. Here's the podspec that worked for me,
require 'json'
package = JSON.parse(File.read(File.join(__dir__, '../node_modules/react-native-linea/package.json')))
Pod::Spec.new do |s|
s.name = 'LineaPro'
s.version = package['version']
s.summary = package['description']
s.license = package['license']
s.homepage = 'https://github.com/pablo-coco/react-native-linea'
s.authors = 'pablo-coco'
s.source = { :git => 'https://github.com/pablo-coco/react-native-linea.git', :tag => s.version }
s.source_files = '*.{h,m}','react-native-linea/*.{h,m}'
s.requires_arc = true
s.platforms = { :ios => "9.0" }
s.vendored_libraries = 'libdtdev.a'
s.frameworks = 'ExternalAccessory', 'CoreLocation'
s.dependency 'React'
end
Now you need to add this as cocoapod dependency in your ScannerApp podfile. If you add podspec file locally, make sure to specify its path as below,
pod 'LineaPro', :path => '../node_modules/react-native-linea', :podspec => '../ios/LineaPro.podspec'
If you created fork and added podspec to repo then skip the :podspec part.
Solution 2: Add source files directly
This is fairly simple solution and i'd recommend this. You can clone the react-native-linea repo locally on your machine.
Copy DTDevices.h, RCTLinea.h, RCTLinea.m source files to ios project
Copy LineaPro.js, NativeBridges.js to js project
Copy libdtdev.a static lib to project
Link ExternalAccessory, CoreLocation frameworks and libdtdev.a to your target
Compile and write js code to initialize LineaPro module.

How to add sourcemap in React Native for Production?

I received error log like the following while the app crashed:
Fatal Exception: com.facebook.react.modules.core.JavascriptException:
onSelect index.android.bundle:20:7148 onPress
index.android.bundle:20:2435
But it's not really helpful for me to trouble shoot. How could I enable source map so that I could track down where the issue is ?
UPDATE 2018
https://docs.expo.io/versions/latest/guides/using-sentry.html Looks promising !
For source mapping here is the way I go about it:
In my bundle command for my production build I tell it to generate a source map:
iOS:
react-native bundle --platform ios --entry-file index.ios.js --dev false --bundle-output ./ios/main.jsbundle --assets-dest ./ios --sourcemap-output ./sourcemap.js
Android - I had to actually modify the android/app/react.gradle file to get source maps generating on release compile. There might be an easier way but basically you find where it builds up the bundle command in the bundleReleaseJsAndAssets method and add the source map bit to it:
if (Os.isFamily(Os.FAMILY_WINDOWS)) {
commandLine "cmd","/c", "react-native", "bundle", "--platform", "android", "--dev", "false", "--entry-file",
entryFile, "--bundle-output", jsBundleFileRelease, "--assets-dest", resourcesDirRelease, "--sourcemap-output", file("$buildDir/../../../sourcemap.js")
} else {
commandLine "react-native", "bundle", "--platform", "android", "--dev", "false", "--entry-file",
entryFile, "--bundle-output", jsBundleFileRelease, "--assets-dest", resourcesDirRelease, "--sourcemap-output", file("$buildDir/../../../sourcemap.js")
}
The output path looks a bit odd but that puts it at your root level (same spot as iOS. I wanted it that way. You can obviously put it anywhere).
Then once you have an error with the line number that means nothing you run it through the "source-map" NPM package. You could probably get very elaborate with your approach but I simply went with:
var sourceMap = require('source-map');
var fs = require('fs');
fs.readFile('./sourcemap.js', 'utf8', function (err, data) {
var smc = new sourceMap.SourceMapConsumer(data);
console.log(smc.originalPositionFor({
line: 16,
column: 29356
}));
});
Where line and column should be replaced withe line and column number from your example output above.
This obviously works best if you have the source maps stored somewhere as the line and column numbers change from build to build as your code changes. It should get pretty close though if you can use you source control setup of choice to go back to the commit that was used to build the app in question and re-generate the bundle with the additional bits to the command to generate the source map.
Android inspired by #chetstone's answer
Starting on v0.32 for android, you can modify your android/app/build.gradle to accomplish this.
Look for the line
apply from: "../../node_modules/react-native/react.gradle"
Just above this, you will see something like:
project.ext.react = [
entryFile: "index.js",
]
Modify it to match the following
project.ext.react = [
entryFile: "index.js",
extraPackagerArgs: ["--sourcemap-output", file("$buildDir/../../../sourcemap.android.js")]
]
On iOS
Go to your build phases in Xcode for the "Bundle React Native code and images" phase and add:
export EXTRA_PACKAGER_ARGS="--sourcemap-output sourcemap.ios.js"
As noted, there's no obvious way to generate the sourcemap file for React Native on iOS. The bundle command is called from react-native-xcode.sh, and there's no provision to add parameters to the bundle command line. But I found a clean way to do it.
react-native-xcode.sh uses the environment variable BUNDLE_CONFIG to specify a config file. If you create an empty config file it has no effect, and then you can add additional CLI parameters.
Create an empty config file.
touch null_config
Set BUNDLE_CONFIG with your config file, and piggyback the --sourcemap-output parameter.
export BUNDLE_CONFIG="null_config --sourcemap-output ./sourcemap.js.map"
When you build, the file sourcemap.js.map will be created.
This is only for iOS.
step 1: Generate sourcemap.js file by using following command.
add this line in package.json file
"bundle:ios": "mkdir -p ios/{Bundle,source-map}; react-native bundle --platform ios --entry-file index.js --dev false --bundle-output ios/Bundle/main.jsbundle --assets-dest ios/Bundle --sourcemap-output ios/source-map/sourcemap.js"
Run this command, it will create sourcemap.js file under $PROJECT_DIR/ios/source-map/ folder
$ yarn bundle:ios
Step 2: Create a file sourcemap-decoder.js under $PROJECT_DIR/ios/source-map/
$ cd ios/source-map/
$ touch sourcemap-decoder.js
Content of sourcemap-decoder.js is
const sourceMap = require('source-map'); //(install- npm i source-map)
const fs = require('fs');
const path = require('path');
fs.readFile(path.resolve(__dirname, 'sourcemap.js'), 'utf8', async (err, data) => {
if (err) {
console.log('err', err,);
}
const consumer = await new sourceMap.SourceMapConsumer(JSON.parse(data));
console.log(consumer.originalPositionFor({
line: 1408,
column: 7762
}));
});
Step 3: execute the script for decoding
$ node ios/source-map/sourcemap-decoder.js

Resources