I'm having trouble importing sqlite3 and knex-js into my Electron React application

Whenever I try to import sqlite3 to test my database connection, I encounter an error. Upon inspecting the development tools, I came across the following error message:

Uncaught ReferenceError: require is not defined
    at Object.path (external "path":1)
    at __webpack_require__ (bootstrap:789)
    at fn (bootstrap:100)
    at Object../node_modules/sqlite3/lib/sqlite3.js (sqlite3.js:1)
    at __webpack_require__ (bootstrap:789)
    at fn (bootstrap:100)
    at Object.<anonymous> (App.tsx:3)
    at Object../src/App.tsx (App.tsx:22)
    at __webpack_require__ (bootstrap:789)
    at fn (bootstrap:100)
path    @   external "path":1
__webpack_require__ @   bootstrap:789
fn  @   bootstrap:100
./node_modules/sqlite3/lib/sqlite3.js   @   sqlite3.js:1
__webpack_require__ @   bootstrap:789
fn  @   bootstrap:100
(anonymous) @   App.tsx:3
./src/App.tsx   @   App.tsx:22
__webpack_require__ @   bootstrap:789
fn  @   bootstrap:100
./src/renderer.tsx  @   renderer.tsx:4
__webpack_require__ @   bootstrap:789
fn  @   bootstrap:100
0   @   renderer.tsx:6
__webpack_require__ @   bootstrap:789
(anonymous) @   bootstrap:856
(anonymous)

This is the code snippet I have written:

import { hot } from "react-hot-loader";
import React, { useEffect } from "react";
import sqlite3 from "sqlite3";

const App = () => {
  useEffect(() => {
    let db = new sqlite3.Database("./database.sqlite", (err: any) => {
      if (err) {
        return console.error(err.message);
      }
      console.log("Connected to database");
    });
  });
  return (
    <div>
      <h1>Testing</h1>
      <h2>sdfsdfs </h2>
    </div>
  );
};

export default hot(module)(App);

The technologies I am using are Electron, React, and Typescript.

Answer №1

Avoid linking sqlite directly to React components. Instead, establish a standalone application core and interface with the frontend through Electron IPC.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Toggling javascript functionality based on media queries

On one of my slides, I want to display images that are specific to different devices like iPhone, iPad, and desktop. I am looking for a way to filter these images based on the device. Using display:none won't work as it's JavaScript, but here is ...

The mssql node is experiencing an issue where it is unable to accept work due to the pool being

Recently, I encountered an issue with my node js app that utilizes the npm mssql module. Despite purchasing a cloud Windows 2012 server, I faced an error when trying to execute a stored procedure. The error is thrown at ps.prepare("exec usp_Get_Cars @para ...

Difficulty redirecting Ajax call to a timed-out, CAS-protected server

Our website's login system utilizes CAS for single sign-on. The CAS server is operating the JASIG CAS server at , while our web server runs on Rails at . Due to security reasons, the Rails server has a relatively short session timeout, resulting in o ...

Nextjs build: The specified property is not found in the type 'PrismaClient'

I have a NextJS app (TypeScript) using Prisma on Netlify. Recently, I introduced a new model named Trade in the Prisma schema file: generator client { provider = "prisma-client-js" } datasource db { provider = "postgresql" url ...

Div Randomly Transforms Its Vertical Position

After successfully creating a VS Code Extension for code completion, I decided to develop a website as a landing page where users can sign up and customize their extension settings. The editor I built pops up first on the page seemed to be working fine in ...

Carrying over additions in arrays using only Javascript

I'd like to implement a basic array addition with carryover. Additionally, I need to display the carryover and result values. For instance: e.g var input = [[0,0,9],[0,9,9]]; var carryover = []; var result = []; Thank you! ...

Having trouble with javascript regex for date validation?

I am facing an issue with using JavaScript regex to validate date inputs. It is identifying valid dates as invalid, and I'm not sure what the problem is: /^([0-9]d{2})+(\.|-|\/)+([0-9]d{2})+(\.|-|\/)+([0-9]d{4})+$/ The date forma ...

Updating the initialState in your application while employing the useState function with React Hooks

I'm currently facing an issue with updating the image value in the local state. Everything works fine initially, but once I return to the same page, the initialState seems to retain the previous value. To resolve this, I find myself having to assign t ...

Issue: Encounter an Error with Status Code 401 using Axios in React.js

For my login page, I am utilizing a combination of Laravel API and ReactJS frontend. In my ReactJS code, I am using Axios to handle the parsing of the username (email) and password. The login API endpoint is specified as http://127.0.0.1:8000/api/login, wh ...

Can a JavaScript class have a property that returns an array?

To those more experienced in node red development, this may be obvious, but I'll ask anyway. Within my node red flow, I have a function node containing a javascript class that only exposes static members. Here's an example: class MeasurementsLis ...

What is the reason behind Typescript not narrowing generic union type components when they are eliminated by type guards?

Consider the following scenario where type definitions and function implementations are provided: interface WithNumber { foo: number; } interface WithString { bar: string; } type MyType = WithNumber | WithString; interface Parameter<C extends My ...

Make sure to update the package.json file at multiple locations following the execution of the "npm i" command

My goal is to automatically detect any newly installed packages based on my package.json file. This way, whenever I run "npm i", the new package will be added not only to the usual "dependencies" section but also to a custom section called "extDependenci ...

Experiencing issues with ng-repeat in AngularJs?

I am currently facing an issue with two tables that are rendering data through AngularJS from two separate C# methods. Both tables have almost identical structures, with the first one being used as a search field and the second one to display names. The pr ...

Issue with the close button on ngb-alert not functioning properly

As I develop my website, I have incorporated an ngb-alert component to display an alert message to users upon login. While the alert itself is functioning properly, I have encountered an issue with the close button being misaligned, and I am struggling to ...

tips for selecting various API requests based on the selected drop down menu choice

Hey there! I'm looking to enhance my login page by adding a feature that allows users to select from a dropdown menu with different options. Each option will be linked to a specific API, and based on the API response, the user's ability to log in ...

Get back a variety of substitutions

I have a variety of different text strings that I need to swap out on the client side. For example, let's say I need to replace "Red Apple" with "Orange Orange" and "Sad Cat" with "Happy Dog". I've been working on enhancing this particular ques ...

Prevent the form from refreshing while still allowing for submission

I'm currently working on a radio website that features a player and several banners that can be clicked on to play different radios. In my opinion, the ideal behavior would be that when I click on a button to play a radio, it should smoothly transiti ...

The React task list updates the todo items on change, rather than on submission

As a newcomer to React, I have embarked on the classic journey of building a todo app to learn the ropes. Everything seems to be functioning smoothly except for one minor hiccup: When I input a new todo and hit "submit", it does get added to my array but d ...

What is the best way to showcase all tab content within a single tab menu labeled "ALL"?

I have created a tab menu example below. When you click on the button ALL, it will display all the tabcontent. Each tab content has its own tab menu. Thanks in advance! function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = doc ...

JavaScript code failed to run

I am currently attempting to invoke a JavaScript script to export a chart from the PrimeFaces chart component. The issue I am facing is that the base64str variable appears to be null, and the script responsible for populating this value is not being called ...