TypeORM with React Native - react-native

I created a new dummy app with react-native init test, and then followed the instructions to add typeorm. In my App.js I included import {getManager} from 'typeorm', and then ran react-native run-ios.
I see the following error in metro-bundler:
Error: Unable to resolve module path from /Users/amit/Code/test/node_modules/typeorm/platform/PlatformTools.js: Module path does not exist in the Haste module map
Here's a sample repository to show the problem: enter link description here
Not sure if I missed something in the setup! Any help is really welcome!

Unfortunately import from 'typeorm' module does not work because react-native projects does not use node platform excatly. Imports from 'typeorm/browser' will work. Here is a sample project.: https://github.com/typeorm/react-native-example
Make sure you create a connection object that does not use any references to project file system. Avoid using something like:
import { CountSession } from '../biopro-mobile-database/entities/count_session';
const connection = await createConnection({
name: 'liteDb_3',
type: 'react-native',
database: 'biopro_mobile.sqlite',
location: 'default',
synchronize: false,
logging: true,
entities: ["../biopro-mobile-database/entities/**/*.ts"],
})
Avoid entities: ["../biopro-mobile-database/entities//*.ts"],**
Instead use something like:
import { EquipmentCounted } from '../biopro-mobile-database/entities/equipment_counted';
import { CountSession } from '../biopro-mobile-database/entities/count_session';
const connection = await createConnection({
name: 'liteDb_3',
type: 'react-native',
database: 'biopro_mobile.sqlite',
location: 'default',
synchronize: false,
logging: true,
entities: [
CountSession,
EquipmentCounted,
],
})

Related

How can I configure metro to resolve modules outside of my project directory?

For reasons that are out of my control, I need to resolve a module that is outside of my react-native project directory. So, consider the following directory structure:
react-native-project/
├─ App.jsx
├─ babel.config.js
external-directory/
├─ Foo.jsx
I would like any import Foo from 'Foo' inside of react-native-project to resolve ../external-directory/Foo.jsx. My first attempt at this was to use babel-plugin-module-loader with the following configuration:
plugins: [
[
'module-resolver',
{
alias: {
Foo: '/absolute/path/to/external-directory/Foo',
},
},
],
],
This doesn't work, with metro emitting the following error:
error: Error: Unable to resolve module /absolute/path/to/external-directory/Foo from /absolute/path/to/react-native-project/App.jsx:
None of these files exist:
* ../external-directory/Foo(.native|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
* ../external-directory/Foo/index(.native|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
This error message is wrong: ../external-directory/Foo.jsx does exist. I've verified this numerous times. I've also set up a standalone babel package to test an identical import scenario, and babel correctly resolves the external module.
The other approach I took was to add a custom resolveRequest function in my metro.config.js:
const defaultResolver = require('metro-resolver').resolve;
module.exports = {
...
resolver: {
resolveRequest: (context, moduleName, platform, realModuleName) => {
if (moduleName === 'Foo') {
return {
filePath: '/absolute/path/to/external-directory/Foo.jsx',
type: 'sourceFile',
};
} else {
return defaultResolver(
{
...context,
resolveRequest: null,
},
moduleName,
platform,
realModuleName,
);
}
},
},
};
This also doesn't work, emitting the following error message:
error: ReferenceError: SHA-1 for file /absolute/path/to/external-directory/Foo.jsx (/absolute/path/to/external-directory/Foo.jsx) is not computed.
Potential causes:
1) You have symlinks in your project - watchman does not follow symlinks.
2) Check `blockList` in your metro.config.js and make sure it isn't excluding the file path.
The potential causes do not apply in this scenario: There are no symlinks nor does the blockList contain the external directory (I explicitly configured blockList: null to verify).
Is there any way to accomplish what I'm trying to do? Or does metro (either by design or incidentally) prevent this?
You can use a metro bundler build in option - extraNodeModules and watchFolders.
const path = require('path');
module.exports = {
resolver: {
...,
extraNodeModules: {
app: path.resolve(__dirname + '/../app')
}
},
...,
watchFolders: [
path.resolve(__dirname + '/../app')
]
};

How to split Prisma Model into separate file?

I'm learning Prisma ORM from video tutorials and official docs. They are explain and write All model code in one file called schema.prisma. It's ok but, when application grow it became messy. So, how should I separate my Model definition into separate file?
At this point in time Prisma doesn't support file segmentation. I can recommend 3 solutions though.
Option 1: Prismix
Prismix utilizes models and enums to create relations across files for your Prisma schema via a prismix configuration file.
{
"mixers": [
{
"input": [
"base.prisma",
"./modules/auth/auth.prisma",
"./modules/posts/posts.prisma",
],
"output": "prisma/schema.prisma"
}
]
}
Placing this inside of a prismix.config.json file which will define how you'd like to merge your Prisma segmentations.
Option 2: Schemix
Schemix Utilizes Typescript configurations to handle schema segmenting.
For example:
// _schema.ts
import { createSchema } from "schemix";
export const PrismaSchema = createSchema({
datasource: {
provider: "postgresql",
url: {
env: "DATABASE_URL"
},
},
generator: {
provider: "prisma-client-js",
},
});
export const UserModel = PrismaSchema.createModel("User");
import "./models/User.model";
PrismaSchema.export("./", "schema");
Inside of User.model
// models/User.model.ts
import { UserModel, PostModel, PostTypeEnum } from "../_schema";
UserModel
.string("id", { id: true, default: { uuid: true } })
.int("registrantNumber", { default: { autoincrement: true } })
.boolean("isBanned", { default: false })
.relation("posts", PostModel, { list: true })
.raw('##map("service_user")');
This will then generate your prisma/schema.prisma containing your full schema. I used only one database as an example (taken from documentation) but you should get the point.
Option 3: Cat -> Generate
Segmenting your schema into chunk part filenames and run:
cat *.part.prisma > schema.prisma
yarn prisma generate
Most of these if not all of them are referenced here in the currently Open issue regarding support for Prisma schema file segmentation https://github.com/prisma/prisma/issues/2377
This is not yet possible with Prisma. See this outstanding issue for possible workarounds https://github.com/prisma/prisma/issues/2377.
There is a library called Prismix that allows you to write as many schema files as you'd like, here you go the link

TypeORM Migration: File must contain a TypeScript / JavaScript code and export a DataSource instance

When trying to autogenerate migrations I get the following error.
File must contain a TypeScript / JavaScript code and export a DataSource instance
This is the command that I am running:
typeorm migration:generate projects/core/migrations/user -d db_config.ts -o
And my db_config.ts file looks like this:
import { DataSource } from "typeorm";
const AppDataSource = new DataSource({
type: "postgres",
host: process.env.PGHOST,
port: 5432,
username: process.env.PGUSER,
password: process.env.PGPASSWORD,
database: process.env.PGDATABASE,
entities: ["./projects/**/entities/*.ts"],
migrations: ["./projects/**/migrations/**.js"],
synchronize: true,
logging: false,
});
export default AppDataSource
My current file structure looks like this:
back_end
-- projects
--- index.ts
--- db_config.ts
And my index.ts file looks like this:
import express from "express";
import { AppDataSource } from "./data-source";
import budget_app from "./projects/budget_app/routes";
export const app = express();
const port = 3000;
AppDataSource.initialize()
.then(() => {
console.log("Data Source has been initialized!");
})
.catch((err) => {
console.error("Error during Data Source initialization", err);
});
// export default AppDataSource;
app.get("/", (req, res) => {
res.send("Hello World!!!!");
});
app.use("/budget_app", budget_app);
app.listen(port, () => {
console.log(`Example app listening on port ${port}`);
});
I am also running this in a docker container along with my postgres database. I have confirmed that the connection works because if I do synchronize=true it will create the table just fine. I just can't create the migration.
So I'm confused and don't know where to go from here to fix the issue. Thanks for your help in advance!
I had trouble with migrations in typeorm, and finally found a solution that will work consistently.
For me, build and then using js datasource didn't work, So i provide my solution for those who steel have struggle with typeorm-migrations.
Here is my step by step solution:
create your datasource config in some file like datasource.config.ts,
mine is like this:
import * as mysqlDriver from 'mysql2';
import {DataSourceOptions} from 'typeorm';
import dotenv from 'dotenv';
dotenv.config();
export function getConfig() {
return {
driver: mysqlDriver,
type: 'mysql',
host: process.env.MYSQL_HOST,
port: parseInt(process.env.MYSQL_PORT, 10),
username: process.env.MYSQL_USER,
password: process.env.MYSQL_PASSWORD,
database: process.env.MYSQL_DB,
synchronize: false,
migrations: [__dirname + '/../../typeorm-migrations/*.{ts,js}'],
entities: [__dirname + '/../**/entity/*.{ts,js}'],
} as DataSourceOptions;
}
create a file with name like migration.config.ts
the implementation is like this:
const datasource = new DataSource(getConfig()); // config is one that is defined in datasource.config.ts file
datasource.initialize();
export default datasource;
now you can define your migration commands in package.json file
"migration:up": "./node_modules/.bin/ts-node ./node_modules/.bin/typeorm migration:run -d config/migration.config.ts",
"migration:down": "./node_modules/.bin/ts-node ./node_modules/.bin/typeorm migration:revert -d config/migration.config.ts"
with running yarn run migration:up you will be able to run your defined migrations in typeorm-migrations folder
I was running into the same issues (typeorm 0.3.4). I was just using npx typeorm migration:show -d ./src/data-source.ts and getting the same error as above (File must contain a TypeScript / JavaScript code and export a DataSource instance), while generating the migration file itself worked somehow, but not running/showing the migrations themselves.
My datasource looks like this
export const AppDataSource = new DataSource({
type: 'postgres',
url: process.env.DATABASE_URL,
logging: true,
entities: ['dist/entities/*.js'],
migrations: ['dist/migrations/*.js'],
});
because my tsc output lives in /dist. So based on the comments above I started using the datasource file that was generated from TypeScript and the error message changed:
npx typeorm migration:run -d ./dist/appDataSource.js
CannotExecuteNotConnectedError: Cannot execute operation on "default" connection because connection is not yet established.
So I looked into the database logs and realized it wanted to connect to postgres with the standard unix user, it wasn't honoring the connection strings in the datasource code. I had to supply all environment variables to the command as well and it worked:
DATABASE_URL=postgresql://postgres:postgres#localhost:5432/tsgraphqlserver npx typeorm migration:run -d ./dist/appDataSource.js
I had the same issue when using a .env file (if you don't have a .env file, this answer probably is irrelevant for you).
It seems, that the CLI does not pick environment variables from dotenv, so you have to load them yourself. E.g., using dotenv library, put this on top of your data-source file:
import * as dotenv from 'dotenv';
dotenv.config();
// export const AppDataSource = new DataSource()...
Alternatively, provide real environment variables when running the script:
PGHOST=... PGUSER=... PGDATABASE=... PGPASSWORD=... typeorm migration:generate ...
I am actually running into the same issue.
I was able to resolve it by using *.js instead of *.ts
Please try something like this:
tsc && typeorm migration:generate -d db_config.ts projects/core/migrations/user
My tsconfig.json looks like this.
{
"compilerOptions": {
"target": "esnext",
"module": "CommonJS",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"outDir": "./build",
"removeComments": false,
"resolveJsonModule": true,
"esModuleInterop": true,
}
}
I recommend you open an issue on the typeorm github repo, I think it might be a bug.
Add the following to package.json scripts section:
"typeorm": "typeorm-ts-node-commonjs",
"migration:run": "ts-node ./node_modules/typeorm/cli.js migration:run -d ./src/data-source.ts",
"schema:sync": "npm run typeorm schema:sync -- -d src/data-source.ts",
"migration:show": "npm run typeorm migration:show -- -d src/data-source.ts",
"migration:generate": "npm run typeorm migration:generate -- -d src/data-source.ts",
"migration:create": "npm run typeorm migration:create"
You can then use npm run migration:create -- src/migration for example

How to use dotenv in SvelteKit project?

I'm trying to use dotenv.config() in a SvelteKit project.
I can run npm run build successfully. But when I try to start the server (using node build), it throws Error: Dynamic require of "fs" is not supported.
I tried to comment out the dotenv part in src/routes/test.js and build again, and this time the server started without any errors. (I created the project with npm init svelte#next without typescript, and except for the codes here, nothing else is changed)
How should I use dotenv here to load environment variables at runtime?
svelte.config.js
import node from '#sveltejs/adapter-node';
const config = {
kit: {
adapter: node(),
target: '#svelte'
}
};
export default config;
/src/routes/test.js
import dotenv from 'dotenv';
dotenv.config();
export function get() {
return {
body: {
test: process.env.TEST
}
}
}
.env
TEST=123
No need to explicitly load dotenv.
Vite uses dotenv
https://vitejs.dev/guide/env-and-mode.html#env-files
You can access your variable via import.meta.env.VITE_MY_VAR
Important is that your env variables must be prefixed with VITE_ in order to get them exposed. And if you are already running npm run dev, quit it and start again.
That worked for me.
Since a few weeks SvelteKit has a built-in way to handle environment variables:
https://kit.svelte.dev/docs/modules#$env-dynamic-private
I solved the problem with env-cmd (https://www.npmjs.com/package/env-cmd) by adding env-cmd to the beginning of svelte-kit dev, svelte-kit preview and node build.
Also, use process.env['TEST'] instead of process.env.TEST since process.env.TEST is replaced with ({}) by vite. (https://github.com/vitejs/vite/issues/3176)
This is what I did:
vite has a special config option for server port.
// import adapter from '#sveltejs/adapter-static';
import adapter from '#sveltejs/adapter-node';
import preprocess from 'svelte-preprocess';
import path from 'path';
import dotenv from 'dotenv-flow';
dotenv.config();
/** #type {import('#sveltejs/kit').Config} */
const config = {
// Consult https://github.com/sveltejs/svelte-preprocess
// for more information about preprocessors
preprocess: preprocess(),
kit: {
// hydrate the <div id="svelte"> element in src/app.html
// target: '#svelte',
/*
adapter: adapter({
// default options are shown
pages: 'build',
assets: 'build',
fallback: 'index.html'
}),
*/
adapter: adapter({
out: './build',
precompress: true
}),
vite: {
resolve: {
alias: {
$components: path.resolve('./src/components'),
$stores: path.resolve('./src/stores'),
$api: path.resolve('./src/api')
}
},
build: {
minify: true
},
server: {
port: process.env.PORT || 3000
}
}
}
};
export default config;
I have .env for defaults (dev etc) and .env.local that is ignored in .gitignore for production (keys, etc).
When .env.local is present it uses that port.
edit: this does not work with node-adapter in production. I think we need to declare PORT some other way. it only works with npm run dev

how to solve the error "Require statement not part of import statement" in using storybook?

I'm using storybook in vue.js.
I tried to import my component but it was failed, because Sass which imported in my component made error.
(component which is not importing Sass can imported and displayed.)
so, I check official description and created a .storybook/main.js file to add Sass support.
But i faced a unexpected error, "Require statement not part of import statement" in using storybook" at const path = require('path').
I couldn't find example of this error related storybook, so i'm confusing.
how to solve this error?
I just started using storybook, so i don't know which file info is needed to solve this.
if need other file info, I'll add it.
My main.js
const path = require('path');
// Export a function. Accept the base config as the only param.
module.exports = {
webpackFinal: async ( config ) => {
// Make whatever fine-grained changes you need
config.module.rules.push({
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
include: path.resolve(__dirname, '../'),
});
// Return the altered config
return config;
},
};
official description of using scss in storybook