Node: internal modules not found - node.js

I am trying to run my express server in node that I have used in the past and I am getting the follow error in VSCode:
node:internal/modules/cjs/loader:1063
throw err;
^
Error: Cannot find module '/Users/valemich/Desktop/code/src/vscode/calls_sales/start'
at Module._resolveFilename (node:internal/modules/cjs/loader:1060:15)
at Module._load (node:internal/modules/cjs/loader:905:27)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:83:12)
at node:internal/main/run_main_module:23:47 {
code: 'MODULE_NOT_FOUND',
requireStack: []
I am on a MACOS Ventura using Node version v.19.5.0 and here is my package.json. Should I uninstall node completely and reinstall? Do I have node installed in the wrong folder? I am completely at a loss for what the issue is.
},
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^1.2.5",
"express": "^4.18.2"
},
"devDependencies": {
"ngrok": "^4.3.3"
}
and my server file is as follows:
/* eslint-disable object-shorthand */
/* eslint-disable comma-dangle */
/* eslint-disable semi */
require('dotenv').config();
const express = require('express');
const axios = require('axios').default;
// const Airtable = require('airtable');
// const base = new Airtable({ apiKey: `${process.env.AIRTABLE_TOKEN}` }).base(
// `${process.env.AIRTABLE_CRM_ID}`
// );
const app = express();
const port = 3000;
app.use(express.json());
app.get('/', (req, res) =>
res.send(`
<html>
<head><title>Success!</title></head>
<body>
<h1>You did it!</h1>
<img src="https://media.giphy.com/media/XreQmk7ETCak0/giphy.gif" alt="Cool kid doing thumbs up" />
</body>
</html>
`)
);
app.post(`${process.env.AIRTABLE1_WEBHOOKS_URL}`, (req, res) => {
// TODO: Update the base to show call date, call time, and questions
// TODO: Create API to Calendly to find out who is assigned the call and the event name. Then post back again with information
// TODO: duplicate this information to post to Slack as well (depending on event name to which channel it posts to.)
const eventUrl = req.body.payload.event;
const event = eventUrl.split('/')[4];
console.log(event);
const questions = req.body.payload.questions_and_answers;
const question = [];
// eslint-disable-next-line no-undef
for (i = 0; i < questions.length; i++) {
// eslint-disable-next-line no-undef
question.push(questions[i].question, questions[i].answer);
console.log(question);
}
// const content = `:wave: ${username} just starred ${repoName} :taco: :rocket:`;
// const avatarUrl = req.body.sender.avatar_url;
axios
.post(process.env.AIRTABLE2_WEBHOOKS_URL, {
content: content,
embeds: [
{
image: {
url: avatarUrl,
},
},
],
})
.then((airTableResponse) => {
console.log('Success!');
res.status(204).send();
})
.catch((err) => console.error(`Error sending to AirTable: ${err}`));
});
app.use((error, req, res, next) => {
res.status(500);
res.send({ error: error });
console.error(error.stack);
next(error);
});
app.listen(port, () =>
console.log(`Example app listening at http://localhost:${port}`)
);

Related

Integration test failure using Puppeteer

I am new to Node.JS and very curious to learn more about it, therefore I decided to do some exercises from a book.
The point which I am struggling is with the integration test.
I would like to have a crawler checking my application to see if the links are working fine. For that I am using the following code:
package.json
{
"main": "meadowlark.js",
"scripts": {
"test": "jest",
"lint": "eslint meadowlark.js lib"
},
"dependencies": {
"express": "^4.17.1",
"express3-handlebars": "^0.5.2"
},
"devDependencies": {
"eslint": "^5.15.3",
"jest": "^24.9.0",
"portfinder": "^1.0.20",
"puppeteer": "^1.13.0"
}
}
integration-tests/basic-navigation.test.js
const portfinder = require('portfinder')
const puppeteer = require('puppeteer')
const app = require('../meadowlark.js')
let server = null
let port = null
beforeEach(async () => {
port = await portfinder.getPortPromise()
server = app.listen(port)
})
afterEach(() => {
server.close()
})
test('home page links to about page', async () => {
const browser = await puppeteer.launch()
const page = await browser.newPage()
await page.goto(`http://localhost:${port}`)
await Promise.all([
page.waitForNavigation(),
page.click('[data-test-id="about"]'),
])
expect(page.url()).toBe(`http://localhost:${port}/about`)
await browser.close()
})
meadowlark.js
// Starting an express application
var express = require('express');
var app = express();
/* eslint-disable no-undef */
const port = process.env.PORT || 3000
/* eslint-enable no-undef */
// Set up handlebars view engine (Templating)
// Check the views folder for html skeleton and the respective
// handlebars
var handlebars = require('express3-handlebars')
.create({ defaultLayout:'main' });
app.engine('handlebars', handlebars.engine);
app.set('view engine', 'handlebars');
/* eslint-disable no-undef */
app.set('port', process.env.PORT || 3000);
/* eslint-enable no-undef */
const handlers = require('./lib/handlers')
// Function to generate the quote of the day
//const fortune = require('./lib/fortune')
// Homepage
app.get('/', handlers.home)
// About
app.get('/about', handlers.about);
// 404
app.use(handlers.notFound);
// 500
app.use(handlers.serverError)
// Binding to the port
if(require.main === module) {
app.listen(port, () => {
console.log( `Express started on http://localhost:${port}` +
'; press Ctrl-C to terminate.' )
})
} else {
module.exports = app
}
Error
meadowlark/integration-tests/basic-navigation.test.js:9
beforeEach(async () => {
^
ReferenceError: beforeEach is not defined
What am I missing/ doing wrong here?
You need to run your test through jest and not plain node otherwise all the globals defined by jest won't exist.
Example if you're using yarn:
yarn jest to run all tests it can find based on jest default settings (see documentation to customize)
yarn jest meadowlark/integration-tests/basic-navigation.test.js to only run your file

ERR_CONNECTION_REFUSED for React and axios

I'm trying to build a instagram scraper with puppeteer and react that works with putting the username on an input and then I want to show the scraped data on the console, I already built the puppeteer script and It works, it returns the data correctly, But I have some issues trying to get the data from a post with axios, I'm using node js and express for my server, when I try to do the post with axios I keep getting an error.
I want to write the username on the input, then I want the puppeteer script to run, and then I want to console log the data that the puppeteer script returns
Error on console
POST http://localhost:4000/api/getData/username_im_scraping net::ERR_CONNECTION_REFUSED
This is my code
Server > index.js
const path = require("path");
const express = require("express");
const webpack = require("webpack");
const cors= require('cors');
const webpackDevMiddleware = require("webpack-dev-middleware");
const webpackHotMiddleware = require("webpack-hot-middleware");
const config = require(path.join(__dirname, "../webpack.config.js"));
const compiler = webpack(config);
const app = express();
const { script } = require("./script");
app.use(webpackDevMiddleware(compiler, config.devServer));
app.use(webpackHotMiddleware(compiler));
app.use(express.static(path.join(__dirname, '../build')));
app.use(cors());
app.get("/api/getData/:username", async (req, res) => {
console.log(`starting script for user ${req.params.username}`);
const data = await script(req.params.username);
console.log(`stopping script for user ${req.params.username}`);
res.send(data);
});
app.get('/*', (req, res) => {
res.sendFile(path.join(__dirname, '../build', 'index.html'));
});
app.listen(process.env.PORT || 4000, () => {
console.log('Server is listening on port 4000');
});
Homepage.js
import React, { useState } from "react";
import axios from "axios";
const Homepage = props => {
const [username, setUsername] = useState("");
const onChange = ({ target: { value } }) => setUsername(value);
const onClick = () => {
axios.post('http://localhost:4000/api/getData/' + username, {
header: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8;application/json' },
mode: "cors"
})
.then((response) => {
console.log(response);
})
.catch((error) => {
if (error.response) {
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else if (error.request) {
console.log(error.request);
} else {
console.log('Error', error.message);
}
})
};
return (
<div>
Time to start coding!
<input value={username} onChange={onChange} />
<button onClick={onClick}>Get instagram followers!</button>
</div>
);
};
export default Homepage;
The problem here is you defined your route with get like app.get("/api/getData/:username") but you are sending a post request. Either change the router to app.post or your axios method to axios.get.
UPDATE
Besides the changes above, after you shared the repository with me i checked and saw you have another problem, which was that you were not running your server so the ERR_CONNECTION_REFUSED message shown.
I forked your repository and made the following changes and created a PR for it. Please take a look at it, and if you want just merge it to your master branch.
P.S please for the next time create a .gitignore file and add node_modules to there so you don't push and pull your node_modules which takes some more amount of time.

node + Swagger behind nginx proxy_pass

I'm trying to get node and swagger to work with nginx dynamically
server_name ~^backend(?<PORTSERVER>[^.]+)\.domain\.com$;
location /swagger
{
proxy_pass http://127.0.0.1:$PORTSERVER/swagger/;
}
location /api
{
proxy_pass http://127.0.0.1:$PORTSERVER/api;
}
this is an example of virtual host the PORTSERVER variable is taking from gitlab-ci it takes id number of merge request + 2000
when i put the port directly in place of $PORTSEVER every thing is working swagger and api
any advice is appreciated thank you
this is index.js file
"use strict";
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
Object.defineProperty(exports, "__esModule", { value: true });
require("reflect-metadata");
const typeorm_1 = require("typeorm");
const express = require("express");
// var router = express.Router();
const fileUpload = require("express-fileupload");
const bodyParser = require("body-parser");
const routes_1 = require("./routes");
const cors = require("cors");
const typeorm_pagination_1 = require("typeorm-pagination");
const swaggerUi = require('swagger-ui-express');
const swaggerDocument = require('../../swagger.json');
var path = require('path');
typeorm_1.createConnection()
.then((connection) => __awaiter(void 0, void 0, void 0, function* () {
// create express app
const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded());
app.use(fileUpload());
app.use(express.static(path.join(__dirname, '..', 'public')));
console.log(path.join(__dirname, '..', 'public'));
// register express routes from defined application routes
routes_1.Routes.forEach((route) => {
app[route.method]('/api' + route.route, (req, res, next) => {
const result = new route.controller()[route.action](req, res, next);
res.header('Access-Control-Allow-Origin', '*');
if (result instanceof Promise) {
result.then((result) => (result !== null && result !== undefined ? res.send(result) : undefined));
}
else if (result !== null && result !== undefined) {
res.json(result);
}
});
});
// setup express app here
// ...
app.use('/swagger', swaggerUi.serve, swaggerUi.setup(swaggerDocument));
app.use(express.json());
app.use(cors());
app.use(typeorm_pagination_1.pagination); // Register the pagination middleware
// start express server
// app.listen(process.env.SERVER_Port);
app.listen(process.env.PORTSERVER);
console.log('Express server has started on port ' + process.env.PORTSERVER);
}))
.catch((error) => console.log(error));
//# sourceMappingURL=index.js.map
The key is his sentence is "when i put the port directly in place of $PORTSEVER every thing is working swagger and api"
Based on the description you gave, I think that gitlabci is miss generating the port number, or miss understanding the syntax.. Both gitlabci and nginx uses $VAR syntax.. Can be a miss interpretation of the 1st line regex too..
Also, I think you need to check the content of process.env.PORTSERVERa used in the js file.. It can have different port than nginx..
For this, I would approach the issue by preventing the the job from restarting nginx to not cause down time for other vhosts.. Deploy a broken config then from the server I run nginx -t and/or diff -u a working config and a broken one..
The 1st source of truth would be nginx -t and nginx logs.. If, ever, nginx manage the starts, the HTTP code it's returning can reveal more paths to pursuit.
One thing you forgot to share is the content of your gitlabci YML.. That can help identify the issue too.

Network Error in react after deploy on heroku

I deployed my MERN project on heroku app but when I tried to submit my form it send me this error in console:
Access to XMLHttpRequest at 'localhost:8000/api/products' from origin
'https://thebeuter.herokuapp.com' has been blocked by CORS policy:
Cross origin requests are only supported for protocol schemes: http,
data, chrome, chrome-extension, https. Form.jsx:69 Error: Network
Error
at e.exports (createError.js:16)
at XMLHttpRequest.d.onerror (xhr.js:83)
Here is my server.js:
const express = require("express"),
app = express(),
cors = require("cors"),
port = process.env.PORT || 8000,
db = "beuter",
path = require("path"),
server = app.listen(port, () => console.log(`Listening to on port ${port}`));
app.use(cors());
app.use(express.json());
if (process.env.NODE_ENV === "production") {
app.use(express.static('beuter/build'))
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, 'beuter', 'build', 'index.html'));
})
}
console.log(port)
require("./server/config/database.config")(db);
require("./server/routes/product.route")(app);
and here is my Form.jsx:
const addProduct = (e) => {
e.preventDefault();
const product = {
title,
title_url,
price,
description1,
description2,
description3,
description4,
description5,
img_url1,
img_url2,
img_url3,
img_url4,
size,
size2,
fit,
fit2,
category,
};
axios
.post("localhost:8000/api/products", product)
.then((res) => {
if (res.data.errors) {
setErrors(res.data.errors);
} else {
navigate("/");
}
})
.catch((err) => console.log(err));
};
return (
...
...
...
)
How can I fix this?
Here is my project github:
https://github.com/nathannewyen/the-beuter
Thank you!
Updated:
ShopAllProducts.jsx:
useEffect(() => {
const fetchItems = async () => {
setLoading(true);
const res = await axios.get("http://localhost:8000/api/products");
setProducts(res.data);
setLoading(false);
};
document.title = `Shop - The Beuter`;
fetchItems();
}, [props]);
the answer for this question is to have env files for development and production
for development
create the file called .env.development in the root folder of your frontend app
in .env.development add this line
REACT_APP_BASE_URL="http:localhost:5000"
and in .env.production add another line as
REACT_APP_BASE_URL="https://algorithammer.herokuapp.com"
or your website (here i am showing the sample)
now make sure that you have a variable called baseURL as global variable
example:
authAPI.js (example)
exports.baseURL = process.env.REACT_APP_BASE_URL;
in Login.js (example)
import {baseURL} from "./authAPI.js"
axios
.post(`${baseURL}/login`, {
data: "sample data"
})
.then((res) => console.log(res))
.catch((err) => console.log(err));
dont forget to push the changes and deploy the heroku app again

Office fabric ui Server side rendering in a node server

I'm making a single MERN app for training and i though use Office Frabric UI could be a good idea.
I'm using server side rendering for my app but i am getting this error when i use a single <Fabric> component:
/home/salahaddin/Proyectos/Tutorials/full-stack-js-lynda/node_modules/#microsoft/load-themed-styles/lib/index.js:277
var head = document.getElementsByTagName('head')[0];
^
ReferenceError: document is not defined
at registerStyles (/home/salahaddin/Proyectos/Tutorials/full-stack-js-lynda/node_modules/#microsoft/load-themed-styles/lib/..\src/index.ts:390:33)
at applyThemableStyles (/home/salahaddin/Proyectos/Tutorials/full-stack-js-lynda/node_modules/#microsoft/load-themed-styles/lib/..\src/index.ts:243:7)
at /home/salahaddin/Proyectos/Tutorials/full-stack-js-lynda/node_modules/#microsoft/load-themed-styles/lib/..\src/index.ts:183:7
at measure (/home/salahaddin/Proyectos/Tutorials/full-stack-js-lynda/node_modules/#microsoft/load-themed-styles/lib/..\src/index.ts:121:3)
at Object.loadStyles (/home/salahaddin/Proyectos/Tutorials/full-stack-js-lynda/node_modules/#microsoft/load-themed-styles/lib/..\src/index.ts:167:3)
at Object.<anonymous> (/home/salahaddin/Proyectos/Tutorials/full-stack-js-lynda/node_modules/#uifabric/utilities/src/scroll.scss.ts:3:1)
at Module._compile (module.js:641:30)
at Module._extensions..js (module.js:652:10)
at Object.require.extensions.(anonymous function) [as .js] (/home/salahaddin/Proyectos/Tutorials/full-stack-js-lynda/node_modules/babel-register/lib/node.js:152:7)
at Module.load (module.js:560:32)
[nodemon] app crashed - waiting for file changes before starting...
This is the problem.
Ok, i see in the "documentation" steps for server-side rendering:
I put this in my serverRender file:
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import axios from 'axios';
import { configureLoadStyles } from '#microsoft/load-themed-styles';
import App from './src/components/app';
import config from './config';
const getApiUrl = contestId => {
if (contestId) {
return ${config.serverUrl}/api/contests/${contestId};
}
return ${config.serverUrl/api/contests};
};
const getInitialData = (contestId, apiData) => {
if (contestId) {
return {
currentContestId: apiData.id,
contests: {
[apiData.id]: apiData
}
};
}
return {
contests: apiData.contests
};
};
const serverRender = (contestId) =>
axios.get(getApiUrl(contestId))
.then(resp => {
let _allStyles = '';
const initialData = getInitialData(contestId, resp.data);
configureLoadStyles((styles: string) => {
_allStyles += styles;
});
return {
initialMarkup: ReactDOMServer.renderToString(
<App initialData={initialData} />
),
initialData,
styles: _allStyles
};
});
export default serverRender;
And this for my server file:
import config from './config';
import apiRouter from './api';
import serverRender from './serverRender';
// import sassMiddleware from 'node-sass-middleware';
import path from 'path';
import express from 'express';
const server = express();
/*
server.use(sassMiddleware({
src: path.join(__dirname, 'sass'),
dest: path.join(__dirname, 'public')
}));
*/
server.set('view engine', 'ejs');
server.get(['/', '/contests/:contestId'], (req, res) => {
serverRender(req.params.contestId)
.then(({ initialMarkup, initialData, styles }) => {
res.render('index', {
initialMarkup, initialData
});
red.render('header', {
styles
});
})
.catch(console.error);
});
server.use('/api', apiRouter);
server.use(express.static('public'));
server.listen(config.port, config.host, () => {
console.info('Express listening on port: ', config.port);
});
And finally in my header file:
Naming Contests
<%- styles -%>
And it still doesn't works.
Which is the properly from to SSR with Office Fabric UI?

Resources