sqlite: Error: The jeep-sqlite element is not present in the DOM when trying to generate migration files via TypeOrm CLI

Describe the bug I am trying to create migration files with the TypeOrm CLI:

npx typeorm-ts-node-esm migration:generate src/database/migrations/PostRefactoring -d src/database/dataSource.ts

I got the error:

Error: The jeep-sqlite element is not present in the DOM! Please check the @capacitor-community/sqlite documentation for instructions regarding the  web platform.

I already initialize jeep-sqlite before the app created:

// Initialize jeep-sqlite for the ``Web``
applyPolyfills().then(() => {
	jeepSqlite(window);
});
// Wait for DOMContentLoaded event
window.addEventListener("DOMContentLoaded", async () => {
	// Initialize Capacitor SQLite
	const platform = Capacitor.getPlatform();
	const sqlite: SQLiteConnection = new SQLiteConnection(CapacitorSQLite);

	try {
		if (platform === "web") {
			// Create the 'jeep-sqlite' Stencil component
			const jeepSqliteElement = document.createElement("jeep-sqlite");
			document.body.appendChild(jeepSqliteElement);
			await customElements.whenDefined("jeep-sqlite");

			// Initialize the Web store
			await sqlite.initWebStore();
		}

		// Proceed with your app initialization (Use this without the ``export`` as normal)
		new App({
			target: document.getElementById("app"),
		});

	} catch (err) {
		console.log(`Error: ${err}`);
		throw new Error(`Error: ${err}`);
	}
});

Looks like when using CLI, of course the app haven’t created yet so jeep-sqlite will not ready in the dom.

How do I generate migration files using TypeOrm CLI if that is the case then?

Expected behavior Migration files generate without error.

Desktop (please complete the following information):

OS: Windows 10
Browser: Edge
Version: 120.0.2210.133 (Official build) (64-bit)

About this issue

Original URL
State: closed
Created 5 months ago
Comments: 29

Most upvoted comments

@KiddoV 👍i think i will close the issue and may come back on this If i found a solution working for all frameworks.

jepiqueau on Feb 23, 2024

@KiddoV i think you did not read the doc that i have added to the release or look at the tutorial i did for React. The answer is yes but you have to store the database in your "Documents/CapacitorSQLite/YOUR_APP_NAME. Anyhow this will not work on future releases starting 5.6.1.1

jepiqueau on Feb 23, 2024

@KiddoV If you look at the documentation TypeORM-Usage-From-5.6.0.md like at mentioned already to you you will see that

in the datasource the migrationRun must be set to false
the migration must be run after you initialize the datasource
you must add a scripts folder in your app and create the script to fix a Bug in the TypeOrm Capacitor Driver then add a postinstall script in the package.json and run it and then it should work

jepiqueau on Feb 20, 2024

@KiddoV this has been published release 5.6.0 look at TypeORM-Usage-From-5.6.0.md. I stop working for to day i will publish a react app to morrow and i will look at Svelte after but there is no reason that it should not work

jepiqueau on Feb 17, 2024

@KiddoV i will come back on this and provide a solution for generating the migrations the initial one and the subsequent ones. Before to generate the subsequent migrations, you will have to save the database from the DOM to the local disk in a specific location,Due to the restrictions of browser-fs-access in the

enum [WellKnownDirectory]{
  ["desktop","documents","downloads","music","pictures","videos"]
}

i have selected documents so the picker form will open on documents and you must go to Documents/CapacitorSQLite/YOUR_APPLICATION_NAME folder to save your database.

i have test it on Ionic7/React Vite and it works fine. Hope you will be glad of this

jepiqueau on Feb 17, 2024

@KiddoV Well , the modification i did, allows to generate the initial migration, but what happens when you want to generate a new migration by adding some columns in entities, the result, as there is no database stored after the initial migration, is that it restart from scratch so instead of altering the table it will create all the tables from scratch with the new columns. So it is not really what you are looking for. this is inherent to the typeOrm cli which must have access to the database. If i release what i did, developpers will come with a lot of questions or issues as they will forget that only valid to help for the initial migration and not for the ones later when they would like to update their databases. This is the reason why i do not want to release it. Hope you will understand. If you create a small typescript nodejs file using sql.js as driver you will get the initial migration the same way

jepiqueau on Feb 10, 2024

@KiddoV Finally i will not implementing the code as it does not work for all frameworks i test it with Angular and it does not work see error with Nodejs. Anyhow in your case "typeorm:migration:generate": "npx typeorm-ts-node-esm migration:generate src/database/migrations/PostRefactoring -d src/database/database.ts" was helping to create a 1707070065955-PostRefactoring.ts file automatically but did not do anything on the database s the database is store in the DOM and the typeOrm cli works in Nodejs ouside the DOM so any other typeOrm Cli will never work. Hope this is clear enough. So basically you must create those migration’s files by hand.

jepiqueau on Feb 8, 2024