I get this error when trying to access an express.js route I made. It should be able to access a URL and retrieve JSON data but its giving me internal server error 500. I have made sure that it is installed in my package.json but I believe vercel removes it when building. The website is https://summonerscard.com. The repo is GitHub - jack-pap/Summoners-Card: React.js web application that processes and displays League of Legends game data that is fetched through the Riot Games API.
Cannot find module 'styled-jsx/style'
Require stack:
- /var/task/node_modules/next/dist/server/require-hook.js
- /var/task/node_modules/next/dist/server/next.js
Did you forget to add it to "dependencies" in `package.json`?
Node.js process exited with exit status: 1. The logs above can help with debugging the issue.
Api call method
export async function apiCall(apiURL) {
try {
if (!whiteListSites.some((word) => apiURL.includes(word))) return;
const proxyURL = `${PROXY_URL}?url=${encodeURIComponent(apiURL)}`;
const response = await fetch(proxyURL);
if (!response.ok) {
throw new Error(`Network response was not ok ${response.status}`);
}
const data = await response.json();
console.log(data);
return data;
} catch (error) {
console.error(error);
throw error;
}
}
index.js
import React, { Component } from "react";
import express from "express";
import next from "next";
import cors from "cors";
import bodyParser from "body-parser";
import NodeCache from "node-cache";
const fetch = (...args) =>
import("isomorphic-fetch").then(({ default: fetch }) => fetch(...args));
const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });
const port = 3000;
const whiteListSites = [
"https://raw.communitydragon.org/",
"https://ddragon.leagueoflegends.com/",
"api.riotgames.com",
];
const cache = new NodeCache({ stdTTL: 10000, checkperiod: 120 });
app.prepare().then(() => {
const server = express();
server.get("/p/:id", (req, res) => {
const actualPage = "/post";
const queryParams = { id: req.params.id };
app.render(req, res, actualPage, queryParams);
});
server.disable("x-powered-by");
server.use(cors());
server.use(bodyParser.json());
server.use((req, res, next) => {
if (req.method === "OPTIONS") {
res.setHeader("Access-Control-Allow-Origin", req.get("Origin") || "*");
res.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
res.setHeader("Access-Control-Allow-Headers", "Content-Type");
res.setHeader("Access-Control-Allow-Private-Network", "true");
return res.status(200).end();
}
next();
});
server.get("/", (req, res) => {
res.send("Welcome to Summoners Card!");
});
// Proxy route to be called by controller to fetch data from API endpoint
server.get("/api", async (req, res) => {
try {
const apiURL = req.query.url;
if (!whiteListSites.some((word) => apiURL.includes(word))) return;
const response = await fetch(apiURL);
const data = await response.json();
res.json(data);
} catch (error) {
res.status(500).json({ error: `Failed to fetch data` });
}
});
server.listen(port, () => {
console.log(`Server listening on port ${port}`);
});
});
module.exports = app;