How to run nodejs with es6 syntax - javascript

I am trying to run node.js project. I added "type":"module" in my package.json, it worked for import syntax. Next, I initialised my app with .babelrc. It seems to work but, I am expected to add .js extension at the end of my import statements. How can I avoid adding .js extension in import statements? Below is the error that I get when I run npm run dev:
Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/nabeel.77.dev/Desktop/chat/graphql/resolvers' imported from /Users/nabeel.77.dev/Desktop/chat/server.js
Did you mean to import ../graphql/resolvers.js?
at new NodeError (node:internal/errors:387:5)
at finalizeResolution (node:internal/modules/esm/resolve:404:11)
at moduleResolve (node:internal/modules/esm/resolve:965:10)
at defaultResolve (node:internal/modules/esm/resolve:1173:11)
at nextResolve (node:internal/modules/esm/loader:173:28)
at ESMLoader.resolve (node:internal/modules/esm/loader:852:30)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:439:18)
at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
at link (node:internal/modules/esm/module_job:75:36) {
code: 'ERR_MODULE_NOT_FOUND'
}
Node.js v18.7.0
[nodemon] app crashed - waiting for file changes before starting...
my Package.json
{
"type": "module",
"dependencies": {
"apollo-server": "^3.10.0",
"esm": "^3.2.25",
"graphql": "^16.5.0",
"mysql2": "^2.3.3",
"sequelize": "^6.21.3"
},
"scripts": {
"dev": "nodemon server.js --exec babel-node",
"start": "node server.js"
},
"name": "chat",
"version": "1.0.0",
"main": "server.js",
"devDependencies": {
"#babel/cli": "^7.1.2",
"#babel/core": "^7.1.2",
"#babel/node": "^7.0.0",
"#babel/polyfill": "^7.0.0",
"#babel/preset-env": "^7.1.0",
"babel-cli": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"nodemon": "^2.0.19",
"rimraf": "^3.0.2"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": ""
}
Node version: 18.7.0

Related

Cannot find module 'table-hints' when running a sequelize powered express app

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.

Error importing a package that was forked and edited in a Next.JS project

I'm using react-headroom for this project and needed to edit its code so the <header> wouldn't adjust height for pages. Therefore, I forked the original repo and made the change on my version so I could install it in my project using yarn add <my-git-repo-url> and then normally import it as any other library:
// src/components/layout.js
import { useState } from "react"
import { Box, Flex } from "#chakra-ui/react"
import Footer from "../footer"
import Header from "../header"
import Headroom from "react-headroom" // react-headroom imported here
(...)
However, I'm getting this error telling me that module was not found:
I'm not sure if there's any mistake with this process (I think not) but was unable to fix this. I ran yarn install in both ./ and ./node_modules/react-headroom with no changes at all for this result.
As #novonimo asked, here it is the module's package.json:
{
"name": "react-headroom",
"description": "Hide your header until you need it. React.js port of headroom.js",
"version": "3.2.0",
"author": "Kyle Mathews <mathews.kyle#gmail.com>",
"bugs": {
"url": "https://github.com/KyleAMathews/react-headroom/issues"
},
"dependencies": {
"prop-types": "^15.5.8",
"raf": "^3.3.0",
"shallowequal": "^1.1.0"
},
"devDependencies": {
"babel-cli": "^6.16.0",
"babel-core": "^6.17.0",
"babel-eslint": "^7.0.0",
"babel-loader": "^6.2.5",
"babel-plugin-transform-undefined-to-void": "^6.8.0",
"babel-preset-es2015": "^6.16.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-1": "^6.16.0",
"chai": "^3.5.0",
"eslint": "^3.8.0",
"eslint-config-airbnb": "^12.0.0",
"eslint-config-airbnb-base": "^9.0.0",
"eslint-config-prettier": "^6.13.0",
"eslint-plugin-import": "^2.0.1",
"eslint-plugin-jsx-a11y": "^2.2.3",
"eslint-plugin-react": "^6.4.1",
"mocha": "^3.1.2",
"mocha-unfunk-reporter": "^0.4.0",
"pre-commit": "^1.0.5",
"prettier": "2.1.2"
},
"directories": {
"example": "examples"
},
"homepage": "https://github.com/KyleAMathews/react-headroom",
"keywords": [
"headroom",
"react",
"react-component"
],
"license": "MIT",
"main": "dist/index.js",
"peerDependencies": {
"react": "^16.3.0 || ^17"
},
"repository": {
"type": "git",
"url": "https://github.com/KyleAMathews/react-headroom.git"
},
"scripts": {
"build": "babel --copy-files src --out-dir dist",
"test-watch": "NODE_ENV=test node_modules/.bin/mocha -w --recursive --compilers coffee:babel-core/register -R mocha-unfunk-reporter",
"unit-test": "NODE_ENV=test node_modules/.bin/mocha --recursive --compilers coffee:babel-core/register -R mocha-unfunk-reporter",
"test": "npm run unit-test && npm run lint",
"watch": "./node_modules/.bin/webpack-dev-server --hot",
"publish-patch": "npm run build && npm version patch && npm publish; git push; git push --tags",
"lint": "eslint --ignore-path .gitignore src/*",
"lint:fix": "eslint --ignore-path .gitignore . --fix",
"format": "prettier --config .prettierrc --write 'src/**/*.{js,jsx}'"
}
}
You have forgotten to build your forked library with the build command.
So, build it:
npm build
// or
yarn build
Now use it without any issues on your application:
import Headroom from "react-headroom"
Note: you need to run the above command in your forked directory not the root of your project.

Getting 3 high errors when tring to deploy nodejs app to Heroku involving QS package

From an nppm audit i am getting 3 High errors with Q.
npm audit fix does not resolve them.
They seem to be able to be resolved with a high version than 6 but i have version 6.5.2. installed and still getting the errors.
Any help on what might be causing this or a workaround would be great!
Error 1: High Denial-of-Service Extended Event Loop Blocking
Package qs
Patched in >= 1.x
Dependency of node-modules
Path node-modules > request > qs
Error 2: High Denial-of-Service Memory Exhaustion
Package qs
Patched in >= 1.x
Dependency of node-modules
Path node-modules > request > qs
Error 3: High Prototype Pollution Protection Bypass
Package qs
Patched in >=6.0.4 <6.1.0 || >=6.1.2 <6.2.0 || >=6.2.3 <6.3.0 ||
>=6.3.2
Dependency of node-modules
Path node-modules > request > qs
Adding package.json
{
"name": "jpkmdfpackage",
"engines": {
"node": ">=0.12"
},
"repository": {
"type": "git",
"url": "https://git.heroku.com/magic-order-application.git"
},
"version": "1.0.0",
"main": "server.js",
"dependencies": {
"#hapi/cryptiles": "^5.0.0",
"body-parser": "^1.19.0",
"connect-ensure-login": "^0.1.1",
"cryptiles": "^4.1.2",
"ejs": "^3.0.1",
"express": "^4.17.1",
"express-handlebars": "^3.1.0",
"express-session": "^1.17.0",
"git": "^0.1.5",
"mongodb": "^3.5.5",
"mongoose": "^5.9.6",
"morgan": "^1.9.1",
"node-gyp": "^6.1.0",
"node-modules": "^1.0.1",
"node-pre-gyp": "^0.14.0",
"nodegit": "^0.26.5",
"npm-lifecycle": "^3.1.5",
"passport": "^0.4.1",
"passport-local": "^1.0.0"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node server.js"
},
"author": "",
"license": "ISC",
"description": "MagicOrder Application"
}

Electron React App

Im trying to make a Desktop App with Electron and React.
Im allerdings getting startet and the most components are working, but in my React component I need to make a new Funktion like:
add = () => {
//this.setState({active: !this.state.active})
}
But after adding this 3 (2) Lines i get the error:
app/app.js: Unexpected token (17:11) while parsing file: .../app/app.js
this is my package.json so far:
{
"name": "rac",
"productName": "rac-desktop",
"version": "1.0.0",
"description": "desktop",
"main": "main.js",
"scripts": {
"start": "electron main.js",
"watch": "watchify app/app.js -t babelify -o public/js/bundle.js -- debug --verbose"
},
"author": "timo",
"license": "MIT",
"dependencies": {
"axios": "^0.16.2",
"babel-preset-es2015": "6.24.1",
"babel-preset-react": "6.24.1",
"babelify": "7.3.0",
"classnames": "2.2.5",
"electron-prebuilt": "^1.4.13",
"electron-reload": "^1.2.2",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"semantic-ui-react": "^0.75.1"
} }
The Repo
That is not valid syntax for a class function in Javascript.
A class has functions like so:
class Test {
constructor() {
// do stuff
}
// basic function
doSomething() {
this.test++;
}
}
So in your case you just need to make add use the correct syntax for a function in a class
add() {
this.setState({active: !this.state.active});
}
The syntax you have used is coming in the future as part of the Class Fields Proposal

How do you use mobx with react rails?

While trying to use react-rails, I've been running into issues incorporating mobx as state management into my app.
I was under the impression that the rails asset pipeline would bring in mobx to react, but, this hasn't been successful. I'm using the react-rails gem and trying to incorporate mobx into my react.es6.jsx sheets in the components folder.
my package.json file:
{
"name": "rent-pseudo",
"version": "1.0.0",
"description": "== Zipqode",
"main": "index.js",
"dependencies": {
"babel-plugin-syntax-async-functions": "^6.3.13",
"babel-plugin-transform-regenerator": "^6.3.18",
"babel-polyfill": "^6.3.14",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.3.13",
"babelify": "^7.2.0",
"bourbon": "^4.2.7",
"bourbon-neat": "^1.8.0",
"browserify": "^13.1.0",
"browserify-incremental": "^3.1.1",
"font-awesome": "^4.6.3",
"graphql": "^0.6.2",
"mobx": "2.4.1",
"mobx-react": "^3.5.3",
"mobx-react-devtools": "^4.2.5",
"react": "^15.3.1",
"react-dom": "^15.3.1",
"react-google-maps": "^4.11.0",
"react-router": "2.6.1",
"es6-promise": "^3.0.2",
"fetch": "^0.3.6",
"jquery": "^2.1.4",
"jquery-ujs": "^1.0.4"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://alexung#github.com/alexung/rent-pseudo.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/alexung/rent-pseudo/issues"
},
"homepage": "https://github.com/alexung/rent-pseudo#readme"
}
My first react file that's included in /components:
import { observer } from 'mobx-react'
const SearchResultsLayout = observer(React.createClass({
render: function() {
return (
<h1>Hello, World</h1>
)
}
}))
But I keep getting the error VM3275:1 Uncaught ReferenceError: SearchResultsLayout is not defined
Any ideas?
It seems like you either didn't declare React inside your jsx file via
import React from 'react'
or mobx package did not install
For those interested in knowing, the react_on_rails gem is better for incorporating mobx. Got it to work this morning by simply installing the gem and npm installing mobx into my package.json that's included in the client folder
You can use mobX from rails assets.
https://rails-assets.org/#/?query=mobx

Categories