This is my first time dealing with typescript and I have no idea of what is happening. When I start my application with the command yarn dev:server the app loads the environment variables defined on the .env file, although i removed the dotenv package.
// package.json
{
"name": "server",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"dev:server": "ts-node-dev --respawn --transpile-only src/index.ts",
"typeorm": "npx ts=node ./nodemodules/typeorm/cli.js",
"test": "NODE_ENV=test jest"
},
"devDependencies": {
"#types/cors": "^2.8.10",
"#types/express": "^4.17.11",
"#types/jest": "^26.0.23",
"#types/node": "^14.14.41",
"#typescript-eslint/eslint-plugin": "^4.22.0",
"#typescript-eslint/parser": "^4.22.0",
"eslint": "^7.25.0",
"eslint-config-node": "^4.1.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-prettier": "^3.4.0",
"jest": "^26.6.3",
"prettier": "^2.2.1",
"supertest": "^6.1.3",
"ts-node-dev": "^1.1.6",
"typescript": "^4.2.4"
},
"dependencies": {
"cors": "^2.8.5",
"express": "^4.17.1",
"pg": "^8.6.0",
"reflect-metadata": "^0.1.13",
"typeorm": "^0.2.32"
}
}
// app.js
import "reflect-metadata";
import express, { Application } from "express";
import cors from "cors";
import "./database/connect";
import custumerRoutes from "./app/routes/Custumer";
interface IAppController {
express: Application;
}
class AppController implements IAppController {
express: Application;
constructor() {
this.express = express();
this.middlewares();
this.routes();
}
middlewares() {
this.express.use(cors());
this.express.use(express.json());
}
routes() {
this.express.use("/custumer", custumerRoutes);
this.express.get("/", (req, res) => {
res.send("🔥 server up and running");
});
}
}
const app = new AppController().express;
export { app };
is it possible that one of the packages i'm using is automatically loading the environment variables? if so, would it be possible to disable this functionality?
I found out that dotenv is a dependency of the package typeorm. This is why it was loading automatically.
Related
I am having an issue with my ExpressJS app using sequelize. When I run the app, I get this message:
node:internal/modules/cjs/loader:488
throw e;
^
Error: Cannot find module
'C:\node_projects\my_app\node_modules\sequelize\dist\lib\table-hints'
This issue started happening after I edited one of my app's routes, which has nothing to do with app initialization. I cannot share code, because it seems to be a problem within sequelize itself.
My package.json looks like this:
{
"name": "my_app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "nodemon index.js",
"client": "npm run start --prefix client",
"dexy": "concurrently \"npm start\" \"npm run client\" ",
"test": "node_modules/.bin/mocha tests.js --timeout 10000"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"bcryptjs": "^2.4.3",
"bluebird": "^3.7.2",
"body-parser": "^1.19.1",
"cookie-session": "^2.0.0",
"ejs": "^3.1.6",
"express": "^4.17.2",
"express-validation": "^3.0.8",
"express-validator": "^6.14.0",
"helmet": "^4.6.0",
"joi": "^17.5.0",
"mailgun-js": "^0.22.0",
"moment": "^2.29.1",
"morgan": "^1.10.0",
"passport": "^0.5.2",
"passport-facebook": "^3.0.0",
"passport-google-oauth20": "^2.0.0",
"passport-local": "^1.0.0",
"pg": "^8.7.1",
"request": "^2.88.2",
"request-promise": "^4.2.6",
"sequelize": "^6.12.2",
"tedious": "^14.0.0",
"uuid": "^8.3.2"
}
}
The code I use to init my db is like this:
function dbInit(app){
const Sequelize = require('sequelize');
const keys = require('../config/keys');
const sqlCon = new Sequelize(keys.dbName,keys.dbUser, keys.dbPassword,
{dialect:'postgresql',
host:keys.dbHost,
pool:20,
logging:false
});
app.locals.connection = sqlCon;
//wire up model definitions
const User = require('../models/User')(sqlCon,sequelize);
const PasswordResetRequest = require('../models/PasswordResetRequest')(sqlCon,sequelize);
const CertType =require('../models/CertType')(sqlCon,sequelize);
const Role =require('../models/Role')(sqlCon,sequelize);
app.locals.User = User;
app.locals.PasswordResetRequest = PasswordResetRequest;
app.locals.CertType = CertType;
app.locals.Role = Role;
//setup relationships between tables
require('../models/relationships')(app);
sqlCon.sync().then(()=>{
return sqlCon.authenticate()
})
.catch((err)=>{
console.log('Successfully NOT connected to DB!');
console.log(err);
});
return sqlCon;
}
Can anyone shed any light on why this error happens? Thanks! I already downgraded sequelize from version 7-aplha2.
I keep getting message even after trying out the following:
btw, I am using the exact same code as the lecture, so I'm guessing it might be a version issue.
1. Add "type":"module" in package.json file
//which throws a different error: [ERR_REQUIRE_ESM]: require() of ES Module not supported
2. use require() instead
// which throws another error: Uncaught ReferenceError: require is not defined
3. in html file, add type module
<script type = "module" src="./app/javascripts/app.js"></script>
app.js
// Import the page's CSS. Webpack will know what to do with it.
import "../stylesheets/app.css";
//Import libraries we need.
import { default as Web3} from 'web3';
import { default as contract } from 'truffle-contract';
import voting_artifacts from '../../build/contracts/Voting.json';
//require("../stylesheets/app.css")
//const Web3 = require("web3")
//const contract = require("truffle-contract")
//const voting_artifacts = require("../../build/contracts/Voting.json")
package.json
{
"name": "truffle-init-webpack",
"version": "0.0.1",
"description": "Frontend example using truffle v3",
"scripts": {
"build-amd": "npm run bundle-amd && npm run minify-amd",
"lint": "eslint ./",
"build": "webpack",
"dev": "webpack-dev-server"
},
"author": "Douglas von Kohorn",
"license": "MIT",
"devDependencies": {
"babel-cli": "^6.22.2",
"babel-core": "^6.22.1",
"babel-eslint": "^6.1.2",
"babel-loader": "^6.2.10",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-env": "^1.1.8",
"babel-preset-es2015": "^6.22.0",
"babel-register": "^6.22.0",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.26.1",
"eslint": "^3.14.0",
"eslint-config-standard": "^6.0.0",
"eslint-plugin-babel": "^4.0.0",
"eslint-plugin-mocha": "^4.8.0",
"eslint-plugin-promise": "^3.0.0",
"eslint-plugin-standard": "^2.0.0",
"html-webpack-plugin": "^2.28.0",
"json-loader": "^0.5.4",
"style-loader": "^0.13.1",
"truffle-contract": "^1.1.6",
"web3": "^0.18.4",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.3.0"
},
"dependencies": {
"milsymbol": "^2.0.0",
"node-fetch": "^2.6.1",
"solc": "^0.8.10",
"truffle": "^4.0.1",
"truffle-hdwallet-provider": "latest"
}
}
I'm bulding a lib that allow to export react components to a nextjs application, at first time it works very well but when I started to check react hooks on that library it trigger a invalid hook error
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
In order to solve issues like that on webpack and microbundle, I was using npm link for development, cause this error happen on production build, that was my reference https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react
This strategy don't work on rollup stack, I tried to link react and do some configs and nothing is working
that's my rollup.config.js
import babel from 'rollup-plugin-babel'
import commonjs from 'rollup-plugin-commonjs'
import resolve from 'rollup-plugin-node-resolve'
import external from 'rollup-plugin-peer-deps-external'
import { terser } from 'rollup-plugin-terser'
import styles from "rollup-plugin-styles";
const input = 'src/index.js'
const output = 'dist/index'
export default [
{
input: input,
external: ['react', 'react-dom'],
output: {
file: `${output}.modern.js`,
format: 'es',
},
plugins: [
external('./package.json'),
resolve(),
commonjs({
include: ['node_modules/**'],
}),
babel({
exclude: 'node_modules/**'
}),
styles(),
terser()
],
},
]
An that's my package.json
{
"name": "project",
"version": "0.0.17",
"description": "",
"private": true,
"main": "dist/index.js",
"module": "dist/index.modern.js",
"umd:main": "dist/index.umd.js",
"source": "src/index.js",
"engines": {
"node": ">=10"
},
"scripts": {
"prebuild": "rimraf dist",
"build": "rollup -c --environment BUILD:production",
"watch": "rollup -c --watch",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"devDependencies": {
"#babel/core": "^7.12.3",
"#babel/preset-env": "^7.12.1",
"#babel/preset-react": "^7.12.1",
"#webpack-cli/init": "^1.0.2",
"babel-loader": "^8.1.0",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^5.0.0",
"html-loader": "^1.3.2",
"html-webpack-plugin": "^4.5.0",
"microbundle-crl": "^0.13.11",
"mini-css-extract-plugin": "^1.2.1",
"node-sass": "^4.14.1",
"prop-types": "^15.7.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"rimraf": "^3.0.2",
"rollup": "^2.32.1",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-postcss": "^3.1.8",
"rollup-plugin-sass": "^1.2.2",
"rollup-plugin-scss": "^2.6.1",
"rollup-plugin-styles": "^3.11.0",
"rollup-plugin-terser": "^6.1.0",
"rollup-plugin-uglify": "^6.0.4",
"sass-loader": "^10.0.4",
"source-map-loader": "^1.1.1",
"static-site-generator-webpack-plugin": "^3.4.2",
"style-loader": "^2.0.0"
},
"peerDependencies": {
"react": "17.0.1",
"prop-types": "15.7.2",
"react-dom": "17.0.1"
},
"dependencies": {
"file-loader": "^6.2.0"
}
}
When I change my nextjs application on dev mode removing a test useState component it works, but if I reload the page or load directly with a useState component rendered it will trigger a react hook error :(
I found the reason for my case.
It's necessary peerDependencies setting on the package.json file.
"peerDependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
So you try dependencies to peerDependencies.
"peerDependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2",
"file-loader": "^6.2.0"
},
Hope this helps. :)
// I am using camera in QRCodeScanner , below is my package.json file , I have install all the dependencies and permission in manifest file .
But while building react-native run-android its loading 100% but getting this error "null is not an object(evaluating 'cameramanager.aspect')"
{
"name": "Vmedics",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"date-fns": "^1.30.1",
"native-base": "^2.10.0",
"react": "16.6.3",
"react-native": "0.58.4",
"react-native-camera": "^1.8.0",
"react-native-elements": "^1.0.0",
"react-native-gesture-handler": "^1.0.15",
"react-native-popup-dialog": "^0.17.0",
"react-native-qrcode": "^0.2.7",
"react-native-qrcode-scanner": "^1.1.2",
"react-native-ratings": "^6.3.0",
"react-native-svg": "^9.2.4",
"react-native-svg-charts": "^5.2.0",
"react-native-table-component": "^1.2.0",
"react-navigation": "^3.2.1",
"react-router": "^4.3.1",
"react-timer-mixin": "^0.13.4"
},
"devDependencies": {
"babel-core": "7.0.0-bridge.0",
"babel-jest": "24.1.0",
"jest": "24.1.0",
"metro-react-native-babel-preset": "0.51.1",
"react-test-renderer": "16.6.3"
},
"jest": {
"preset": "react-native"
}
}
Thanks
Try this ..
1.npm install react-native-camera --save
2. Android - src- manifest -
3. Settings.gradle - include ':react-native-camera'
project(':react-native-camera').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-camera/android')
3.Android - app- build.gradle - compile project(':react-native-camera')
Android - app -src-main-java-com- MainApplication.java-
import org.reactnative.camera.RNCameraPackage;
#Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new RNCameraPackage(),
);
I am attempting to use angular-ui-router on an angular 1 project. The issue that I'm running into is that I can get angular-ui-router to work when I specify a template, but not when I specify a component.
For instance, this works:
var groceryListRoutes = function($stateProvider) {
var listOfGroceryLists = {
name: 'listOfGroceryLists',
url: '/lists',
template: '<grocery-list-component></grocery-list-component>',
};
$stateProvider.state(listOfGroceryLists);
};
However, when I attempt to specify the component, nothing shows up, and no error is given in the console:
var groceryListRoutes = function($stateProvider) {
var listOfGroceryLists = {
name: 'listOfGroceryLists',
url: '/lists',
component: 'groceryListComponent',
};
$stateProvider.state(listOfGroceryLists);
};
Here is my grocery-list.module.js, which register the component and the routs:
import angular from 'angular';
import 'angular-resource';
import uiRouter from 'angular-ui-router';
import groceryListComponent from './grocery-list.component';
import groceryListAPIService from './grocery-list.service';
import groceryListRoutes from './grocery-list.routes';
import groceryListDetailComponent from './grocery-list-detail.component';
const GroceryListModule = angular.module('groceryList', [
// Dependencies
'ngResource',
'ui.router',
])
.config(($resourceProvider) => {
$resourceProvider.defaults.stripTrailingSlashes = false;
})
.factory('groceryListAPIService', groceryListAPIService)
.component('groceryListComponent', groceryListComponent)
.component('groceryListDetailComponent', groceryListDetailComponent)
.config(groceryListRoutes);
export default GroceryListModule;
And my grocery-list.component.js:
import template from './grocery-list.template.html';
import groceryListController from './grocery-list.controller';
const groceryListComponent = {
template,
controller: groceryListController,
controllerAs: 'groceryListCtrl',
}
export default groceryListComponent;
And my packages.json:
{
"name": "shopping-list",
"version": "1.0.0",
"description": "An app to keep track of your grocery shopping",
"repository": "https://github.com/thomascothran/shopping_list.git",
"scripts": {
"start": "gulp",
"test": "echo \"Error: no test specified\" && exit 1",
"eslint": "eslint"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.17.0",
"babel-eslint": "^7.0.0",
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.16.0",
"eslint": "^3.7.1",
"eslint-config-airbnb": "^12.0.0",
"eslint-plugin-import": "^1.16.0",
"eslint-plugin-jsx-a11y": "^2.2.2",
"eslint-plugin-react": "^6.3.0",
"gulp": "^3.9.1",
"raw-loader": "^0.5.1",
"webpack": "^1.13.2",
"webpack-stream": "^3.2.0"
},
"dependencies": {
"angular": "^1.5.8",
"angular-resource": "^1.5.8",
"angular-ui-router": "^0.3.1",
"js-cookie": "^2.1.3",
"ramda": "^0.22.1"
}
}
Refer to this question:
Angular - UI.Router not loading component
Looks like you are using 0.3.x as per your package.json, which won't work. Upgrade to 1.0.0 and try please.
component attribute is available from ui-router#1.0.0(see here and in CHANGELOG.MD - it was added in 1.0.0-aplpha) so it's not available 0.3.1