Weird bugs
Hi there, I'm following a tutorial and did everything the same (https://www.youtube.com/watch?v=Vjtn9pWAZDI&t=612s&ab_channel=WebDevCody) my issue is though I get this error everytime I try to run npx convex dev:
X [ERROR] Could not resolve "fs"
node_modules/next/dist/compiled/gzip-size/index.js:1:2840:
1 │ ...essFn(o,r):o}return n}},147:e=>{"use strict";e.exports=require("fs")},781:e=>{"use strict";e.exports=require("stream")},796:e=>{"u...
╵ ~~
The package "fs" wasn't found on the file system but is built into node. Are you trying to bundle
for node? You can use "platform: 'node'" to do that, which will remove this error.
X [ERROR] Could not resolve "stream"
node_modules/next/dist/compiled/gzip-size/index.js:1:2886:
1 │ ...xports=require("fs")},781:e=>{"use strict";e.exports=require("stream")},796:e=>{"use strict";e.exports=require("zlib")}};var r={};...
╵ ~~
The package "stream" wasn't found on the file system but is built into node. Are you trying to
bundle for node? You can use "platform: 'node'" to do that, which will remove this error.
X [ERROR] Could not resolve "zlib"
node_modules/next/dist/compiled/gzip-size/index.js:1:2936:
1 │ ...rts=require("stream")},796:e=>{"use strict";e.exports=require("zlib")}};var r={};function nccwpck_require(t){var n=r[t];if(n!=...
╵ ~~
The package "zlib" wasn't found on the file system but is built into node. Are you trying to
bundle for node? You can use "platform: 'node'" to do that, which will remove this error.
11 Replies
And here's the code:
convex/providers.tsx:
"use client";
import React from "react";
import { ClerkProvider, useAuth } from "@clerk/nextjs";
import { ConvexProviderWithClerk } from "convex/react-clerk";
import { ConvexReactClient } from "convex/react";
import { PropsWithChildren } from "react";
const convex = new ConvexReactClient(
process.env.NEXT_PUBLIC_CONVEX_URL as string
);
export function Providers({ children }: PropsWithChildren) {
return (
<ClerkProvider
publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY}
>
<ConvexProviderWithClerk client={convex} useAuth={useAuth}>
{children}
</ConvexProviderWithClerk>
</ClerkProvider>
);
}
src/app/layout.tsx:
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { Providers } from "../../convex/providers";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<Providers>
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
</Providers>
);
}
I don't know what's casuing the error as I'm not gettng anything else and using NextJS 14 , Convex and Clerk for the project . Help would be appreciated
It looks like this code is being compiled for the Convex instead of a
"use node"; file.
Are you importing the file with these imports from a file that doesn't have "use node" at the top?
Since this is based on the tutorial, are there any places you forgot a "use node" where the tutorial has one, or places where you import one of your own files that the tutorial doesn't import?Nope, he doesn't use "use node" at least in these parts and I'm stuck here, haven't advanced any further since I get the same bug that I sent earlier
It's definitely happening here though:
Could you share your whole repo? This may be tough to spot without the whole thing.
Yeah sure, give me a moment
https://github.com/HarunPasuli/thumbnail-rater-tutorial
Oh ye, github removed .env.local just in case you forget
In the tutorial is providers.tsx inside the convex/ directory? Because it's in there it's assumed to be Convex functions and being sent in to the bachend, but you don't want that for these React components. I'd move that file outside of the convex/ directory.
I'll double check actually
I'm gonna try it out tomorrow but from the looks of it it looks like that's the bug
If that's the bug I feel so stupid that I didn't catch it
sorry for the delay, hope that's it
😄
I highly appreciate the time you took to respond even though this was just a dumb mistake on my end
Well, now I'm aware of this stuff and how easy it is for it to happen, thanks a lot for the help Tom!