Git Product home page Git Product logo

runWithAmplifyServerContext throwing error, ⨯ Error: Cannot access Cognito.length on the server. You cannot dot into a client module from a server component. You can only pass the imported name through. about amplify-js HOT 4 CLOSED

akuntal avatar akuntal commented on June 18, 2024 1
runWithAmplifyServerContext throwing error, ⨯ Error: Cannot access Cognito.length on the server. You cannot dot into a client module from a server component. You can only pass the imported name through.

from amplify-js.

Comments (4)

akuntal avatar akuntal commented on June 18, 2024 1

Thank you @HuiSF, it worked.

from amplify-js.

HuiSF avatar HuiSF commented on June 18, 2024

Hi @akuntal thanks for reporting this issue. Looking at the stack trace, there could be something went wrong to accessing the config object that was passed into createServerRunner() function call.

Could you paste your implementation of @/utils/amplify-server-utils?

from amplify-js.

akuntal avatar akuntal commented on June 18, 2024

Hi @HuiSF, Here it is.

import { authConfig } from "@/app/amplify-cognito-config";
import { NextServer, createServerRunner } from "@aws-amplify/adapter-nextjs";
import { fetchAuthSession, getCurrentUser } from "aws-amplify/auth/server";

export const { runWithAmplifyServerContext } = createServerRunner({
  config: {
    Auth: authConfig,
  },
});

And here is my config file.

"use client";

import { Amplify, type ResourcesConfig } from "aws-amplify";

export const authConfig: ResourcesConfig["Auth"] = {
  Cognito: {
    userPoolId: String(process.env.NEXT_PUBLIC_USER_POOL_ID),
    userPoolClientId: String(process.env.NEXT_PUBLIC_USER_POOL_CLIENT_ID),
  },
};

Amplify.configure(
  {
    Auth: authConfig,
  },
  { ssr: true }
);

export default function ConfigureAmplifyClientSide() {
  return null;
}

from amplify-js.

HuiSF avatar HuiSF commented on June 18, 2024

Hi @akuntal Thanks for providing the details.

Looking at your code, the authConfig object is exported from the client module that's marked with the directive "use client", and then you imported it into a module that runs on the server side. This will cause the error:

You cannot dot into a client module from a server component. You can only pass the imported name through.

My recommendation is to extract the authConfig into a separate file and import it into both locations to use.

from amplify-js.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.