search

phryneas / ssr-only-secrets

This package provides a way to pass secrets from Server Components into the SSR-run of Client Components, without them being accessible in the browser.
https://www.npmjs.com/package/ssr-only-secrets
MIT License
20 stars 1 forks source link

`ssr-only-secrets` has no exported member named `cloakSSROnlySecret` #1

Closed AlSirang closed 6 months ago

AlSirang commented 6 months ago

When trying to import cloakSSROnlySecret in a Next.js server component, I am getting the following error:

ssr-only-secrets has no exported member named cloakSSROnlySecret

Here is the component:

import { Metadata } from 'next'
import { Providers } from '@/src/lib/providers'
import './globals.css'
import { ApolloWrapper } from '../lib/configs/apolloWraper'
import { cookies } from 'next/headers'
import { cloakSSROnlySecret } from 'ssr-only-secrets'
import authConfig from '../lib/configs/authConfig'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  const sessionIdPlain = cookies().get(authConfig.storageTokenKeyName)?.value

  const sessionId = cloakSSROnlySecret(sessionIdPlain ?? '', 'SECRET_KEY')
  return (
    <html lang='en'>
      <body>
        <ApolloWrapper sessionId={sessionId}>
          <Providers>{children}</Providers>
        </ApolloWrapper>
      </body>
    </html>
  )
}

Versions:

 "next": "14.0.1",
 "ssr-only-secrets": "^0.1.1",
 "typescript": "^5"

I am using the Next.js app router, and the above code is from RootLayout. Do I need to configure something else to resolve this error? The cloakSSROnlySecret function works, but I'm getting an error when I import it.

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}
phryneas commented 6 months ago

cloakSSROnlySecret is only available from React Server Components. It seems like your root layout is a RSC, but does maybe some other file that contains a Client Component import something from it?

phryneas commented 6 months ago

Try to add a import "server-only" at the top of your RootLayout to see if that triggers - that would validate that you're not in a RSC.

AlSirang commented 6 months ago

I added import "server-only" but it did nothing (no errors or warnings). I also removed all imports and only imported cloakSSROnlySecret, but it is still giving me an error for the import.

RootLayout with all imports removed:


import 'server-only'

import { cookies } from 'next/headers'
import { cloakSSROnlySecret } from 'ssr-only-secrets'

import './globals.css'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  const sessionIdPlain = cookies().get('access_token')?.value

  const sessionId = cloakSSROnlySecret(sessionIdPlain ?? '', 'SECRET_KEY')
  return (
    <html lang='en'>
      <body>
        {children}
      </body>
    </html>
  )
}
AlSirang commented 6 months ago

I just created a brand new Next.js app, but it still gives me the error mentioned above.

Versions:

RootLayout.tsx

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";

import { cookies } from "next/headers";

// '"ssr-only-secrets"' has no exported member named 'cloakSSROnlySecret'. Did you mean 'readSSROnlySecret'?ts(2724)
import { cloakSSROnlySecret } from "ssr-only-secrets";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const sessionIdPlain = cookies().get("access_token")?.value;

  const sessionId = cloakSSROnlySecret(sessionIdPlain ?? "", "SECRET_KEY");
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  );
}
phryneas commented 6 months ago

Oh wait I just noticed, are they doing moduleResolution: "bundler" now? While that's correct, it's also new. I'll have to adjust for that on a TS level. Thanks for the report!

phryneas commented 6 months ago

This should be fixed in 0.1.2 now.

AlSirang commented 6 months ago

Thank you for the update. The error is fixed now.