#Debug
sacred pier
It's hard to debug anything from the screenshot. Can you send a snip of your src/lib directory?
sacred pier
Maybe, you are accessing an array that is undefined at the time of accessing it. Generally happens in situations when a network request is in process and you're trying to access the response.
sacred pier
its path.join
Oh, so it's also related to the Node library.
empty pier
fixed
now this
import React from 'react';
import Head from 'next/head';
import { GetServerSideProps } from 'next';
import prisma from 'lib/prisma';
import { Box } from '@chakra-ui/react';
import config from 'lib/config';
export default function EmbeddedImage({ image, title, color, route }) {
const imageUrl = `${route}/${image.fileName}`;
return (
<>
<Head>
{image.useEmbed && (
<>
{title ? (
<>
<meta property='og:site_name' content='Chakram' />
<meta property='og:title' content={title} />
</>
) : (
<meta property='og:title' content='Chakram' />
)}
<meta property='theme-color' content={color} />
<meta property='og:url' content={imageUrl} />
<meta property='og:image' content={imageUrl} />
<meta property='twitter:card' content='summary_large_image' />
</>
)}
<title>{image.fileName}</title>
</Head>
<Box
display='flex'
justifyContent='center'
alignItems='center'
minHeight='100vh'
>
<img src={imageUrl} alt={imageUrl} />
</Box>
</>
);
}
export const getServerSideProps: GetServerSideProps = async (context) => {
const slug = context.params.id[1];
const image = await prisma.image.findFirst({
where: {
slug
},
select: {
fileName: true,
mimetype: true,
userId: true,
slug: true
}
});
if (!image) return {
notFound: true
};
console.log('slug ' + image.slug);
console.log('file ', image.fileName);
const user = await prisma.user.findFirst({
select: {
embedTitle: true,
embedColor: true
},
where: {
id: image.userId
}
});
return {
props: {
image,
title: user.embedTitle,
color: user.embedColor,
route: config.uploader.image_route
}
};
};
import type { Config } from './types';
import configReader from './configReader';
if (!global.config) global.config = configReader() as Config;
export default global.config;
/lib/config is below
@sacred pier any solutions?
sacred pier
Sure, let me have a look.
I think the problem lies with how the global namespace is used here.
empty pier
any fixes?
sacred pier
Yes, just a minute.
Try this.
import type { Config } from './types';
import configReader from './configReader';
let config: Config;
if(!global.config) {
global.config = configReader();
}
config = global.config;
export default config;
Is it the same error?
empty pier
yes
sacred pier
import type { Config } from './types';
import configReader from './configReader';
let config: Config;
if(process.env.NODE_ENV === 'production') {
config = configReader();
} else {
if(!global.config) {
global.config = configReader();
}
config = global.config;
}
export default config;
Try this one.
empty pier
not working
sacred pier
Do you think, it might be any error in the configReader function?
empty pier
idk
sacred pier
Can you share the configReader function?
empty pier
k
sacred pier
I don't see any error in configReader either.
Have you tried rm -rf .next and then building the app?
sacred pier
```js
import type { Config } from './types';
import configReader from './configR...
I have updated this, please check.
empty pier
k lemme restart
not working
idk why
@sacred pier
how do i import type in javascript?
empty pier
nvm
it ran
after removing import config from '/lib/config'
smh
not working with pages prob
empty pier
nvm
sacred pier
Nice. What fixed it?
sacred pier
Oh. 😅
empty pier
hey
can you help me?
@sacred pier
it won't load
and if i Ctrl + C the process, the port will be occupied
by node
sacred pier
Kill the port and try removing the .next directory.
sacred pier
Maybe, it is a network error or the API you are making request to, is not available.
On this page, is there any API request?
empty pier
yes
empty pier
@sacred pier
import { join } from 'path';
import { NextApiReq, NextApiRes, withChakram } from 'middleware/withChakram';
import prisma from 'lib/prisma';
import { bytesToHr, sizeOfDir } from 'lib/utils';
import config from 'lib/config';
async function handler(req: NextApiReq, res: NextApiRes) {
const user = await req.user();
if (!user) return res.forbid('Unauthorized');
const size = await sizeOfDir(join(process.cwd(), config.uploader.directory));
const byUser = await prisma.image.groupBy({
by: ['userId'],
_count: {
_all: true
}
});
const userCount = await prisma.user.count();
const countByUser = [];
for (let i = 0, L = byUser.length; i !== L; ++i) {
const user = await prisma.user.findFirst({
where: {
id: byUser[i].userId
}
});
countByUser.push({
username: user.username,
count: byUser[i]._count._all
});
}
const count = await prisma.image.count();
const viewsCount = await prisma.image.groupBy({
by: ['views'],
_sum: {
views: true
}
});
const typesCount = await prisma.image.groupBy({
by: ['mimetype'],
_count: {
mimetype: true
}
});
const typeCount = [];
for (let i = 0, L = typesCount.length; i !== L; ++i) {
typeCount.push({ mimetype: typesCount[i].mimetype, count: typesCount[i]._count.mimetype });
}
return res.json({
size: bytesToHr(size),
avgSize: bytesToHr(size / count),
sizeRaw: size,
count,
countByUser,
userCount,
viewCount: (viewsCount[0]?._sum?.views ?? 0),
typeCount
});
}
export default withChakram(handler);```everything works
except this page
@sacred pier