I’m having an error in amity folder. I can build it without any errors but whenever I navigate to the community page (The page that holds the AmityUiKitProvider) I get this error
error - ../node_modules/@amityco/ui-kit-open-source/dist/esm/index.js:24:0
Module not found: Can't resolve '@amityco/ts-sdk/dist/communityRepository'
Import trace for requested module:
./pages/app/community/[userId].tsx
Here is the community page
import dynamic from 'next/dynamic';
import { QueryClient } from 'react-query';
import BasicAmityStudentProfileForm from 'components/forms/amity/basic-student-amity-profile';
import { getPassportItemsSSR } from 'config/passportItems';
import useAmityUser from 'hooks/useAmityUser';
import { usePartner } from 'hooks/usePartner';
import useSession from 'hooks/useSession';
import useStudent from 'hooks/useStudent';
import { AmityUserData, PartnerData, StudentData } from 'types/api';
import { RolesEnum } from 'types/enums';
import { getHTTP } from 'utils/http';
import { getSSR } from 'utils/ssr';
import type { GetServerSideProps, NextPage } from 'next';
// import { AmityUiKitProvider, AmityUiKitSocial } from 'amity-ts-kit/dist';
const AmityUiKitProvider = dynamic(
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
async () =>
(await import('@amityco/ui-kit-open-source'))
.AmityUiKitProvider,
{ ssr: false },
);
const AmityUiKitSocial = dynamic(
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
async () =>
(await import('@amityco/ui-kit-open-source'))
.AmityUiKitSocial,
{ ssr: false },
);
// const UserProfileFormProvider = dynamic(
// // eslint-disable-next-line @typescript-eslint/ban-ts-comment
// // @ts-ignore
// async () =>
// (await import('@amityco/ui-kit-open-source'))
// .UserProfileFormProvider as React.ComponentType<UserProfileFormProps>,
// { ssr: false },
// );
// const AmityUiKitChat = dynamic(
// // eslint-disable-next-line @typescript-eslint/ban-ts-comment
// // @ts-ignore
// async () =>
// (await import('@amityco/ui-kit-open-source'))
// .AmityUiKitChat as React.ComponentType<UiKitChatProps>,
// { ssr: false },
// );
// const NewsFeed = dynamic(
// // eslint-disable-next-line @typescript-eslint/ban-ts-comment
// // @ts-ignore
// async () =>
// (await import('@amityco/ui-kit-open-source'))
// .NewsFeed as React.ComponentType<NewsFeedProps>,
// { ssr: false },
// );
const Community: NextPage = () => {
const { user } = useSession();
const getUser = (role: RolesEnum) => {
switch (role) {
case RolesEnum.STUDENT:
return useStudent;
case RolesEnum.PARTNER:
return usePartner;
default:
useStudent;
}
};
const role = user?.role?.name;
const userId = `${user?.id}`;
const roleUser = getUser(role as RolesEnum)?.(userId); // Add null check before invoking the function
const displayName =
role === RolesEnum.PARTNER
? // eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-ignore
(roleUser as unknown as PartnerData)?.partner?.companyName
: `${user?.firstName} ${user?.lastName}`;
const { amityUser } = useAmityUser(userId);
// const { student } = useStudent(userId);
const Form =
role === RolesEnum.STUDENT ? (
<BasicAmityStudentProfileForm
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
activeItem={
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
roleUser!.student! as ReturnType<typeof useStudent>['student']
} // Add null check before accessing student property
handleClose={() => {
location.reload();
}}
/>
) : null;
return (
<div className="App">
<p>
{user!.firstName}
<br />
{user!.lastName}
<br />
{(amityUser as StudentData)?.profileSummary}
</p>
<AmityUiKitProvider
apiRegion='SG'
apiKey={process.env.NEXT_PUBLIC_AMITY_KEY || ''}
avatarCustomUrl={user?.media?.url}
displayName={`${displayName}`}
key={userId}
firstName={user?.firstName}
lastName={user?.lastName}
profileSummary={(amityUser as StudentData)?.profileSummary || ''}
socialCommunityCreationButtonVisible={role === RolesEnum.PARTNER}
theme={{
typography: {
global: {
fontFamily: 'Figtree, sans-serif',
},
},
}}
userId={userId}>
<AmityUiKitSocial />
</AmityUiKitProvider>
</div>
);
};
export default Community;
export const getServerSideProps: GetServerSideProps = async context => {
const queryClient = new QueryClient();
const cookie = context.req.headers.cookie || '';
try {
const amityUser = await queryClient.fetchQuery<AmityUserData>(
`amity-user-${context.params!.userId}`,
() =>
getHTTP(
`amity-users/get-one/${context.params!.userId}`,
{},
// @ts-ignore
{
cookie,
},
),
);
const keysQuery =
amityUser?.role?.name === RolesEnum.STUDENT
? getPassportItemsSSR(amityUser?.id)
: [
{
key: `amity-user-${context.params!.userId}`,
url: `amity-users/get-one/${context.params!.userId}`,
},
];
const { props } = await getSSR(context, keysQuery, queryClient);
return {
props,
};
} catch (error) {
return {
redirect: {
destination: '/sign-in',
},
props: {},
};
}
};
Here is the tsconfig for your reference
{
"compilerOptions": {
/* Visit https://aka.ms/tsconfig to read more about this file */
/* Projects */
// "incremental": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
// "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */
// "tsBuildInfoFile": "./.tsbuildinfo", /* Specify the path to .tsbuildinfo incremental compilation file. */
// "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects. */
// "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */
// "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */
/* Language and Environment */
"target": "es2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
// "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */
"jsx": "react" /* Specify what JSX code is generated. */,
// "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */
// "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */
// "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
// "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
// "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
// "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
// "noLib": true, /* Disable including any library files, including the default lib.d.ts. */
// "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */
// "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */
/* Modules */
"module": "NodeNext" /* Specify what module code is generated. */,
// "rootDir": "./", /* Specify the root folder within your source files. */
// "moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
"baseUrl": "./src" /* Specify the base directory to resolve non-relative module names. */,
"paths": {
"~/*": ["./*"]
// "~/core/*": ["./src/core/*"]
} /* Specify a set of entries that re-map imports to additional lookup locations. */,
// "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */
// "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */
// "types": [], /* Specify type package names to be included without being referenced in a source file. */
// "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
// "moduleSuffixes": [], /* List of file name suffixes to search when resolving a module. */
"resolveJsonModule": true /* Enable importing .json files. */,
// "noResolve": true, /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
/* JavaScript Support */
// "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
// "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */
// "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
/* Emit */
// "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
// "declarationMap": true, /* Create sourcemaps for d.ts files. */
// "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */
// "sourceMap": true, /* Create source map files for emitted JavaScript files. */
// "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
"outDir": "./dist" /* Specify an output folder for all emitted files. */,
// "removeComments": true, /* Disable emitting comments. */
// "noEmit": true, /* Disable emitting files from a compilation. */
// "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
// "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types. */
// "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
// "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */
// "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
// "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */
// "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */
// "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
// "newLine": "crlf", /* Set the newline character for emitting files. */
// "stripInternal": true, /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
// "noEmitHelpers": true, /* Disable generating custom helper functions like '__extends' in compiled output. */
// "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */
// "preserveConstEnums": true, /* Disable erasing 'const enum' declarations in generated code. */
"declaration": true,
"declarationDir": "./dist/types", /* Specify the output directory for generated declaration files. */
// "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
/* Interop Constraints */
// "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */
// "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */
"esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
// "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
"forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
/* Type Checking */
"strict": false /* Enable all strict type-checking options. */,
// "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */
// "strictNullChecks": true, /* When type checking, take into account 'null' and 'undefined'. */
// "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
// "strictBindCallApply": true, /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
// "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */
// "noImplicitThis": true, /* Enable error reporting when 'this' is given the type 'any'. */
// "useUnknownInCatchVariables": true, /* Default catch clause variables as 'unknown' instead of 'any'. */
// "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */
// "noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */
// "noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */
// "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */
// "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */
// "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */
// "noUncheckedIndexedAccess": true, /* Add 'undefined' to a type when accessed using an index. */
// "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */
// "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type. */
// "allowUnusedLabels": true, /* Disable error reporting for unused labels. */
// "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */
/* Completeness */
// "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */
"skipLibCheck": true /* Skip type checking all .d.ts files. */,
"allowJs": true,
"plugins": [
{
"name": "typescript-plugin-css-modules"
}
]
},
"include": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx", "src/global.d.ts", "**/*.module.css","custom-types/**/*.d.ts" ],
"exclude": ["node_modules", "vite.config.ts"]
}
And here is the package.json
{
"name": "@amityco/ui-kit-open-source",
"version": "3.7.0",
"engines": {
"node": ">=16",
"pnpm": ">=8"
},
"module": "dist/esm/index.js",
"main": "dist/index.js",
"exports": {
"./package.json": "./package.json",
".": {
"types": "./dist/index.d.ts",
"import": "./dist/esm/index.js",
"default": "./dist/index.js"
}
},
"files": [
"dist/"
],
"types": "dist/index.d.ts",
"description": "React Ui-Kit for Amity Social Cloud",
"scripts": {
"prepare": "husky install",
"build": "tsup --minify",
"build:dev": "tsup --sourcemap --metafile",
"build:prod:analyze": "pnpm build --metafile",
"test": "jest",
"test:watch": "jest --watch",
"storybook": "storybook dev -p 6006",
"storybook:build": "storybook build --output-dir ./storybook-build",
"lint": "eslint . && stylelint \"**/*.css\"",
"stylelint": "stylelint",
"lint:fix": "eslint . --fix && stylelint \"**/*.css\" --fix",
"tsc": "tsc"
},
"peerDependencies": {
"@amityco/ts-sdk": "^6.27.0",
"react": ">=17.0.2",
"react-dom": ">=17.0.2"
},
"devDependencies": {
"@amityco/ts-sdk": "^6.27.0",
"@storybook/addon-a11y": "^7.6.7",
"@storybook/addon-actions": "^7.6.7",
"@storybook/addon-backgrounds": "^7.6.7",
"@storybook/addon-controls": "^7.6.7",
"@storybook/addon-essentials": "^7.6.7",
"@storybook/addon-toolbars": "^7.6.7",
"@storybook/addon-viewport": "^7.6.7",
"@storybook/client-api": "^7.6.7",
"@storybook/preview-api": "^7.6.7",
"@storybook/react": "^7.6.7",
"@storybook/react-vite": "^7.6.7",
"@storybook/theming": "^7.6.7",
"@types/jest": "^29.5.11",
"@types/lodash": "^4.14.202",
"@types/prop-types": "^15.7.11",
"@types/react": "^18.3.3",
"@types/react-helmet": "^6.1.11",
"@types/react-infinite-scroller": "^1.2.5",
"@types/react-mentions": "^4.1.13",
"@types/react-timeago": "^4.1.7",
"@types/styled-components": "^5.1.34",
"@types/uuid": "^9.0.7",
"@typescript-eslint/eslint-plugin": "^6.18.0",
"@typescript-eslint/parser": "^6.18.0",
"@vitejs/plugin-react": "^4.2.1",
"autoprefixer": "^10.4.19",
"browserslist": "^4.23.0",
"esbuild-plugin-replace": "^1.4.0",
"eslint": "^8.56.0",
"eslint-config-prettier": "^9.1.0",
"eslint-import-resolver-typescript": "^3.6.1",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-jest": "^27.6.1",
"husky": "^8.0.3",
"jest": "^29.7.0",
"lint-staged": "^13.3.0",
"postcss": "^8.4.38",
"prettier": "2.4.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.21.1",
"standard-version": "^9.5.0",
"storybook": "^7.6.7",
"styled-components": "^6.1.6",
"stylelint": "^16.6.1",
"stylelint-config-standard": "^36.0.0",
"stylelint-no-unsupported-browser-features": "^8.0.1",
"svg-url-loader": "^7.1.1",
"ts-jest": "^29.1.1",
"tsup": "^7.3.0",
"typescript": "^5.5.2",
"typescript-plugin-css-modules": "^5.1.0",
"vite": "^4.5.1",
"vite-tsconfig-paths": "^4.2.3"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.36",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/react-fontawesome": "^0.2.0",
"@hookform/error-message": "^2.0.1",
"@hookform/resolvers": "^3.3.4",
"@radix-ui/react-tabs": "^1.0.4",
"@tanstack/react-query": "^5.28.14",
"@types/react-dom": "^18.3.0",
"@types/react-intl": "^3.0.0",
"clsx": "^2.1.0",
"dayjs": "^1.11.11",
"extract-colors": "^4.0.2",
"filesize": "^9.0.11",
"framer-motion": "^11.1.7",
"hls.js": "^1.4.14",
"human-readable-numbers": "^0.9.5",
"linkify-react": "^4.1.3",
"linkifyjs": "^4.1.3",
"lodash": "^4.17.21",
"millify": "^6.1.0",
"modern-normalize": "^2.0.0",
"polished": "^4.3.1",
"react-aria": "^3.33.1",
"react-aria-components": "^1.2.1",
"react-helmet": "^6.1.0",
"react-hook-form": "^7.49.2",
"react-infinite-scroll-component": "^6.1.0",
"react-insta-stories": "^2.6.2",
"react-intl": "^6.5.5",
"react-loading-skeleton": "^3.3.1",
"react-mentions": "^4.4.10",
"react-modal-sheet": "^2.2.0",
"react-sizeme": "^3.0.2",
"react-textarea-autosize": "^8.5.3",
"react-timeago": "^7.2.0",
"react-tiny-popover": "^7.2.4",
"react-truncate-markup": "^5.1.2",
"react-use": "^17.4.2",
"stylis": "^4.3.1",
"uuid": "^8.3.2",
"vaul": "^0.9.1",
"zod": "^3.22.4"
},
"lint-staged": {
"*.{js,jsx,ts,tsx}": "eslint --cache --fix",
"*.{json,md,css}": "prettier --write",
"*.{css}": "stylelint --fix"
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"license": "LGPL-2.1-only"
}