-
|
Won't having a single entry point make it hard to use in Next13 since some of the components have hooks , and on that same note won't it make it hard to tree shake when building the final project? |
Beta Was this translation helpful? Give feedback.
Replies: 5 comments
-
|
I have tested this before, but I wanted to be sure before I reply back to you. I just created a sample Nextjs 13 (with app router) application, added just the Button component and built the app. Inside the final build files I only see code from the Button component. I also looked for any code from floating-ui (which is used on Popover/Tooltip etc components) and did not find any. So looks like tree-shaking is indeed working as expected even-though the library comes with a single entry point. |
Beta Was this translation helpful? Give feedback.
-
|
sadly am getting diferent results ./node_modules\.pnpm\@floating-ui+react-dom@2.0.1_react-dom@18.2.0_react@18.2.0\node_modules\@floating-ui\react-dom\dist\floating-ui.react-dom.esm.js
ReactServerComponentsError:
You're importing a component that needs useEffect. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.
,-[C:\Users\denni\Desktop\code\next\pocketbook\node_modules\.pnpm\@floating-ui+react-dom@2.0.1_react-dom@18.2.0_react@18.2.0\node_modules\@floating-ui\react-dom\dist\floating-ui.react-dom.esm.js:1:1]
1 | import { arrow as arrow$1, computePosition } from '@floating-ui/dom';
2 | export { autoPlacement, autoUpdate, computePosition, detectOverflow, flip, getOverflowAncestors, hide, inline, limitShift, offset, platform, shift, size } from '@floating-ui/dom';
3 | import * as React from 'react';
4 | import { useLayoutEffect, useEffect } from 'react';import "./globals.css";
import { Inter } from "next/font/google";
import { AppWrapper } from "./root/AppWrapper";
import { getPBCookieUser } from "@/state/pb/server_component_pb";
import { Button } from '@rewind-ui/core';
const inter = Inter({ subsets: ["latin"] });
export const metadata = {
title: "pocketbook",
description: "back to the basics",
};
export default async function RootLayout({children,}: {children: React.ReactNode;}) {
const user = await getPBCookieUser()
return (
<html lang="en">
<body className={inter.className}>
<Button>Click Me</Button>
{/* <AppWrapper user={user}> */}
{children}
{/* </AppWrapper> */}
</body>
</html>
);
} |
Beta Was this translation helpful? Give feedback.
-
|
This has nothing to do with the single entry point though. None of the components can be used as server components. In order to use them within a Nextjs 13 app router application you will have to use them inside a component that has the 'use client' directive on top! In your example let's say that if you need to use the Button component inside a Header component just add 'use client' directive at the top of Header and it will work fine! |
Beta Was this translation helpful? Give feedback.
-
|
Hello again @tigawanna Could you please update to version 0.9.0 and try using any rewind-ui component without including the 'use client' directive at the top of the containing component? I just pushed an update that adds the needed directive on all components, so that the developers won't get frustrated. Please let me know if everything works fine for you! |
Beta Was this translation helpful? Give feedback.
-
|
Sounds cool , Will try it tomorrow |
Beta Was this translation helpful? Give feedback.
Hello again @tigawanna
Could you please update to version 0.9.0 and try using any rewind-ui component without including the 'use client' directive at the top of the containing component?
I just pushed an update that adds the needed directive on all components, so that the developers won't get frustrated.
Please let me know if everything works fine for you!