I started learning about how to create our own npm package and i created one. Now in this package, i want to create a dialog box for react native apps using typescript. Here are my files;
Package.json
{
"name": "rn-dialog",
"version": "1.0.0",
"description": "This is a simple dialog box package for react native app",
"main": "lib/index.js",
"types": "lib/index.d.ts",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "tsc"
},
"keywords": [
"react-native",
"react-native-dialog",
"rn-dialog",
"rn-dialog-box",
"react",
"react-native-dialog-box",
"popup"
],
"author": "Irfanwani <irfanwani347#gmail.com>",
"license": "ISC",
"files": [
"lib"
],
"peerDependencies": {
"react": ">=18.0.0",
"react-native": ">=0.69.6"
},
"devDependencies": {
"#types/react": "^18.0.21",
"#types/react-native": "^0.70.4",
"typescript": "^4.8.4"
}
}
tsconfig.json
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext",
"jsx": "react-native",
"lib": ["dom", "ESNext"],
"declaration": true,
"sourceMap": true,
"outDir": "./lib",
"removeComments": true,
"strict": true,
"noImplicitAny": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"strictPropertyInitialization": true,
"noImplicitThis": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"esModuleInterop": true,
},
"exclude": ["node_modules"],
"include": ["./src/**/*.tsx", "./src/**/*.ts"]
}
index.tsx (inside the src folder)
import React from "react";
import { Text, View } from "react-native";
const Dialog = () => {
return (
<View>
<Text>This is from Dialog</Text>
<Text>Hope it works, inshaallah!!!</Text>
</View>
);
};
export default Dialog;
As you can see my devDependencies to build this component and after installing them, i also get react and react native installed with latest versions.
So when i try to pull this package locally into my project (expo project), it gives an error;
React Native version mismatch.
JavaScript version: 0.70.2 Native version: 0.69.0
I tried to run npm install --production on my package but it didn't work.
Any help will be appretiated!
You may want to change your devDependencies to:
"devDependencies": {
"#types/react": "^18.0.0",
"#types/react-native": "^0.69",
"typescript": "^4.8.4"
}
After searching a lot, i came across this answer and this helped.
We only need a package called install-local which installs local packages as other remote packages.
Related
I create an typeorm ESM project by running the command
npx typeorm init --name MyProject --database sqlite--module esm
as explained on https://typeorm.io. Running the project, everything works fine.
Then I create a nuxt 3 project: "npx nuxi init nuxt-project". Then I supplement the contents of the package.json and tsconfig.json files in the nuxt project with the appropriate typeorm values.
package.json:
{
"private": true,
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare",
"start": "node --loader ts-node/esm src/index.ts",
"typeorm": "typeorm-ts-node-esm"
},
"devDependencies": {
"#types/node": "^18.11.17",
"nuxt": "3.0.0",
"ts-node": "10.9.1",
"typescript": "4.9.4"
},
"dependencies": {
"#npmcli/fs": "^3.1.0",
"reflect-metadata": "^0.1.13",
"sqlite3": "^5.1.4",
"typeorm": "^0.3.11"
}
}
tsconfig.json:
{
// https://nuxt.com/docs/guide/concepts/typescript
"extends": "./.nuxt/tsconfig.json",
"compilerOptions": {
"lib": [
"es2021"
],
"target": "es2021",
"module": "es2022",
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"outDir": "./build",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"sourceMap": true
}
}
I copy the entity, the configured data-source, the base and add code to the App.vue.
<script setup lang="ts">
import "reflect-metadata"
import { User } from "./db/entity/User.js"
import { AppDataSource } from "./db/data-source";
AppDataSource.initialize().then(async () => {
const user = new User()
user.firstName = "Timber"
user.lastName = "Saw"
user.age = 25
await AppDataSource.manager.save(user)
const users = await AppDataSource.manager.find(User)
console.log("Loaded users: ", users)
}).catch(error => console.log(error))
</script>
<template>
<div>
<NuxtWelcome />
</div>
</template>
I run a nuxt project and get an error:
[nuxt] [request error] [unhandled] [500] Column type for
User#firstName is not defined and cannot be guessed. Make sure you
have turned on an "emitDecoratorMetadata": true option in
tsconfig.json. Also make sure you have imported "reflect-metadata" on
top of the main entry file in your application (before any entity
imported).If you are using JavaScript instead of TypeScript you must
explicitly provide a column type.
Just in case, I add import reflect-metadata before the entity, but the error doesn't go away. I wonder if there is a good wizard who will guide me to the right path?
By the way, before that I tried to work with Sequelize, and also failed. It didn't fail on reflect-metadata, but:
Could not resolve "pg-hstore": const hstore = require("pg-hstore")
Any orm will work for me (that allows working with oracle, so Prisma is unfortunately out of the question). Any advice or an example?
Add to the User entity: #Column('text',{nullable:true}).
I did everything according to guide https://nativescript-vue.org/en/docs/getting-started/installation. I installed a testing app and try to change the message on Home component, but i see that only css reloads on the fly. No errors, no issues or notes, just my android emulator reacts only on css changing, but not on js changing. At the same time, after every code changing (css or js) in console, I see JS: [HMR][31d47f755865bfccabe9] success | Successfully applied update.
Knowing all previous problem with HRM that native-script vue used to have, do these problems still exist?
My package.json:
{
"name": "example-app",
"main": "app/app.ts",
"version": "1.0.0",
"private": true,
"dependencies": {
"#nativescript/core": "~8.3.0",
"#nativescript/theme": "~3.0.2",
"nativescript-vue": "~2.9.0"
},
"devDependencies": {
"#nativescript/android": "8.3.1",
"#nativescript/preview-cli": "1.0.1",
"#nativescript/types": "~8.3.0",
"#nativescript/webpack": "~5.0.6",
"#types/node": "~17.0.21",
"nativescript-vue-template-compiler": "~2.9.0",
"typescript": "~4.5.5",
"vue": "~2.6.12"
}
}
My webpack.config.js
const webpack = require("#nativescript/webpack");
module.exports = (env) => {
webpack.init(env);
// Learn how to customize:
// https://docs.nativescript.org/webpack
return webpack.resolveConfig();
};
My tsconfig.json
{
"compilerOptions": {
"strict": true,
"target": "es2017",
"module": "esnext",
"moduleResolution": "node",
"lib": ["dom", "es2017"],
"sourceMap": true,
"noEmitHelpers": true,
"importHelpers": true,
"baseUrl": ".",
"paths": {
"~/*": ["app/*"],
"#/*": ["app/*"]
},
"typeRoots": ["types"],
"types": ["node"],
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"skipLibCheck": true
},
"include": ["app", "types"],
"exclude": ["node_modules", "platforms"],
}
I stopped using NativeScript hmr years ago. It's always given me issues. I've connected with people from the core NativeScript team who said they do the same.
I run my builds with --no-hmr and just use the full app reload.
I'm following a tutorial for how to set up Codemirror with react. I download the package with - npm install #uiw/react-codemirror
This works, as it allows me to:
import CodeMirror from "#uiw/react-codemirror"
When I try to import themes or keymaps, however, I'm given an error:
Module not found: Error: Package path ./theme/monokai.css is not exported from package path/to/node_modules/codemirror
import "codemirror/theme/monokai.css"
Both #codemirror and codemirror are available in node_modules, however codemirror doesn't contain a themes directory.
The package.json for the codemirror directory:
{
"name": "codemirror",
"version": "6.0.1",
"description": "Basic configuration for the CodeMirror code editor",
"scripts": {
"test": "cm-runtests",
"prepare": "cm-buildhelper src/codemirror.ts"
},
"keywords": [
"editor",
"code"
],
"author": {
"name": "Marijn Haverbeke",
"email": "marijnh#gmail.com",
"url": "http://marijnhaverbeke.nl"
},
"type": "module",
"main": "dist/index.cjs",
"exports": {
"import": "./dist/index.js",
"require": "./dist/index.cjs"
},
"types": "dist/index.d.ts",
"module": "dist/index.js",
"sideEffects": false,
"license": "MIT",
"dependencies": {
"#codemirror/autocomplete": "^6.0.0",
"#codemirror/commands": "^6.0.0",
"#codemirror/language": "^6.0.0",
"#codemirror/lint": "^6.0.0",
"#codemirror/search": "^6.0.0",
"#codemirror/state": "^6.0.0",
"#codemirror/view": "^6.0.0"
},
"devDependencies": {
"#codemirror/buildhelper": "^0.1.5"
},
"repository": {
"type": "git",
"url": "https://github.com/codemirror/basic-setup.git"
}
}
Would be thankful for any ideas as to why I'm getting this error. I've tried uninstalling codemirror and downloading it again, however the error persists.
I switched to a version of react-codemirror that downloads codemirror: 5.x and it works now
You might want to use theme doc, and doc
I am a beginner, just started to learn express and webpack, I tried to use the initial express file
Trying to use webpack for packaging, I keep getting errors
The reason for this is because I want to run my system in a non-node.js environment
Is my direction wrong?
The express project is create with express --view=ejs myapp
I didn't make any changes
webpack.config.js
const path = require('path');
const clientConfig = {
resolve: {
fallback: {
"fs": false,
"tls": false,
"net": false,
"path": false,
"zlib": false,
"http": false,
"https": false,
"stream": false,
"crypto": false,
"crypto-browserify": require.resolve('crypto-browserify'), //if you want to use this module also don't forget npm i crypto-browserify
}
},
entry: {
'index': './app.js'
},
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].bundle.js'
}
}
module.exports = [clientConfig];
package.json
{
"name": "myapp",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www",
"webpack": "webpack"
},
"browser": {
"crypto": false
},
"dependencies": {
"cookie-parser": "~1.4.4",
"crypto-browserify": "^3.12.0",
"debug": "~2.6.9",
"express": "~4.16.1",
"http-errors": "~1.6.3",
"morgan": "~1.9.1",
"path": "^0.12.7",
"twig": "~0.10.3"
},
"main": "app.js",
"devDependencies": {
"webpack": "^5.26.3",
"webpack-cli": "^4.5.0"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": ""
}
Thanks for any guidance and comments
You can't run Express in a non-nodejs environment. Express depends upon the nodejs run-time library such as the http module so it can't run without that library. webpack can't overcome that.
You can use webpack to build either plain Javascript with no external dependencies or with dependencies that you have independent libraries for that can be included in the webpack bundle or with dependences that are present in whatever environment you want to run it in.
I try to make the linter work on Atom, but nothing happens :/
(I get used to work with eslint on Atom but for a new React Native project I'm totally stuck ...) I work with linter and linter-eslint packages for Atom.
Thanks for any help :)
Here is my package.json, configured as it is said here:
https://github.com/intellicode/eslint-plugin-react-native
{
"name": "RNApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"eslint": "^3.4.0",
"eslint-plugin-react": "^6.2.0",
"eslint-plugin-react-native": "^2.0.0",
"react": "15.3.1",
"react-native": "0.32.0"
},
"plugins": [
"react",
"react-native"
],
"ecmaFeatures": {
"jsx": true
},
"rules": {
"react-native/no-unused-styles": 2,
"react-native/split-platform-components": 2,
"react-native/no-inline-styles": 2,
"react-native/no-color-literals": 2
}
}
I had to replace this:
"ecmaFeatures": {
"jsx": true
},
by this:
"eslintConfig": {
"parserOptions": {
"ecmaFeatures": {
"jsx": true
}
}
},