Just installed the TS SDK from Github (Opensource v3). Executed the npm i command but when I tried the npm run build I got this error
C:\Users\user\project\frontend\Amity-Social-Cloud-UIKit-Web-OpenSource>npm run build
> @amityco/ui-kit-open-source@3.5.0 build
> tsup --minify
CLI Building entry: src/index.ts
CLI Using tsconfig: tsconfig.json
CLI tsup v7.3.0
CLI Using tsup config: C:\Users\user\project\frontend\Amity-Social-Cloud-UIKit-Web-OpenSource\tsup.config.ts
CLI Target: es2016
CLI Cleaning output folder
CJS Build start
ESM Build start
DTS Build start
CJS dist\Inter-ThinItalic-J7DGFM6P.woff2 104.00 KB
CJS dist\Inter-Thin-3L5KITMZ.woff2 97.30 KB
CJS dist\Inter-ExtraLight-NASBO7I6.woff2 101.79 KB
CJS dist\Inter-ExtraLightItalic-AUJY3XPT.woff2 108.78 KB
CJS dist\Inter-LightItalic-BJ4DXCNT.woff2 108.72 KB
CJS dist\Inter-Light-E4ED7JRX.woff2 101.89 KB
CJS dist\Inter-Regular-6HYMGWZS.woff2 96.55 KB
CJS dist\Inter-Italic-2WJ2RX3Z.woff2 104.37 KB
CJS dist\Inter-Medium-3R4SWUEO.woff2 103.44 KB
CJS dist\Inter-MediumItalic-QTJUSOU7.woff2 109.55 KB
CJS dist\Inter-SemiBold-7SYQBR3A.woff2 103.32 KB
CJS dist\Inter-SemiBoldItalic-3EHSSXIM.woff2 109.42 KB
CJS dist\Inter-Bold-K6PA7FOK.woff2 103.65 KB
CJS dist\Inter-BoldItalic-QKFESTQE.woff2 109.19 KB
CJS dist\Inter-ExtraBold-2ZPQFALF.woff2 103.62 KB
CJS dist\Inter-ExtraBoldItalic-RR7KYXHD.woff2 109.09 KB
CJS dist\Inter-Black-PFV6RWF7.woff2 100.46 KB
CJS dist\Inter-BlackItalic-OUXR4CVK.woff2 106.20 KB
CJS dist\Inter-roman.var-WIJJYAE4.woff2 221.86 KB
CJS dist\Inter-italic.var-SWFAXF2C.woff2 239.29 KB
CJS dist\Inter.var-OMHIC2JW.woff2 317.25 KB
CJS dist\index.css 4.50 KB
CJS dist\index.js 506.45 KB
CJS ⚡️ Build success in 3004ms
ESM dist\esm\Inter-Thin-3L5KITMZ.woff2 97.30 KB
ESM dist\esm\Inter-ExtraLight-NASBO7I6.woff2 101.79 KB
ESM dist\esm\Inter-ThinItalic-J7DGFM6P.woff2 104.00 KB
ESM dist\esm\Inter-LightItalic-BJ4DXCNT.woff2 108.72 KB
ESM dist\esm\Inter-ExtraLightItalic-AUJY3XPT.woff2 108.78 KB
ESM dist\esm\Inter-Regular-6HYMGWZS.woff2 96.55 KB
ESM dist\esm\Inter-Light-E4ED7JRX.woff2 101.89 KB
ESM dist\esm\Inter-Italic-2WJ2RX3Z.woff2 104.37 KB
ESM dist\esm\Inter-MediumItalic-QTJUSOU7.woff2 109.55 KB
ESM dist\esm\Inter-Medium-3R4SWUEO.woff2 103.44 KB
ESM dist\esm\Inter-SemiBoldItalic-3EHSSXIM.woff2 109.42 KB
ESM dist\esm\Inter-SemiBold-7SYQBR3A.woff2 103.32 KB
ESM dist\esm\Inter-Bold-K6PA7FOK.woff2 103.65 KB
ESM dist\esm\Inter-ExtraBold-2ZPQFALF.woff2 103.62 KB
ESM dist\esm\Inter-ExtraBoldItalic-RR7KYXHD.woff2 109.09 KB
ESM dist\esm\Inter-BoldItalic-QKFESTQE.woff2 109.19 KB
ESM dist\esm\Inter-Black-PFV6RWF7.woff2 100.46 KB
ESM dist\esm\Inter-BlackItalic-OUXR4CVK.woff2 106.20 KB
ESM dist\esm\Inter-roman.var-WIJJYAE4.woff2 221.86 KB
ESM dist\esm\Inter.var-OMHIC2JW.woff2 317.25 KB
ESM dist\esm\index.css 4.50 KB
ESM dist\esm\Inter-italic.var-SWFAXF2C.woff2 239.29 KB
ESM dist\esm\index.js 469.02 KB
ESM ⚡️ Build success in 3009ms
src/social/providers/NavigationProvider.tsx(71,11): error TS2786: 'FormattedMessage' cannot be used as a JSX component.
Its element type 'ReactElement<any, any> | Component<Props<Record<string, string | number | boolean | {} | ReactElement<any, string | JSXElementConstructor<any>> | ... 5 more ... | undefined>>, any, any> | null' is not a valid JSX element.
Type 'Component<Props<Record<string, string | number | boolean | {} | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ... 4 more ... | undefined>>, any, any>' is not assignable to type 'Element | ElementClass | null'.
Type 'Component<Props<Record<string, string | number | boolean | {} | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ... 4 more ... | undefined>>, any, any>' is not assignable to type 'ElementClass'.
The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import("C:/Users/user/project/node_modules/@types/react/ts5.0/index").ReactNode'.
Type '{}' is not assignable to type 'ReactNode'.
src/social/providers/NavigationProvider.tsx(72,13): error TS2786: 'FormattedMessage' cannot be used as a JSX component.
Its element type 'ReactElement<any, any> | Component<Props<Record<string, string | number | boolean | {} | ReactElement<any, string | JSXElementConstructor<any>> | ... 5 more ... | undefined>>, any, any> | null' is not a valid JSX element.
src/social/providers/NavigationProvider.tsx(73,12): error TS2786: 'FormattedMessage' cannot be used as a JSX component.
Its element type 'ReactElement<any, any> | Component<Props<Record<string, string | number | boolean | {} | ReactElement<any, string | JSXElementConstructor<any>> | ... 5 more ... | undefined>>, any, any> | null' is not a valid JSX element.
Error: error occured in dts build
at Worker.<anonymous> (C:\Users\user\project\frontend\Amity-Social-Cloud-UIKit-Web-OpenSource\node_modules\tsup\dist\index.js:2297:26)
at Worker.emit (node:events:517:28)
at MessagePort.<anonymous> (node:internal/worker:256:53)
at [nodejs.internal.kHybridDispatch] (node:internal/event_target:786:20)
at exports.emitMessage (node:internal/per_context/messageport:23:28)
DTS Build error
RollupError: [plugin dts] src/social/providers/NavigationProvider.tsx: Failed to compile. Check the logs above.
at getRollupError (C:\Users\user\project\frontend\Amity-Social-Cloud-UIKit-Web-OpenSource\node_modules\tsup\node_modules\rollup\dist\shared\parseAst.js:282:41)
at Object.error (C:\Users\user\project\frontend\Amity-Social-Cloud-UIKit-Web-OpenSource\node_modules\tsup\node_modules\rollup\dist\shared\parseAst.js:278:42)
at Object.error (C:\Users\user\project\frontend\Amity-Social-Cloud-UIKit-Web-OpenSource\node_modules\tsup\node_modules\rollup\dist\shared\rollup.js:804:32)
at Object.error (C:\Users\user\project\frontend\Amity-Social-Cloud-UIKit-Web-OpenSource\node_modules\tsup\node_modules\rollup\dist\shared\rollup.js:19790:42)
at generateDtsFromTs (C:\Users\user\project\frontend\Amity-Social-Cloud-UIKit-Web-OpenSource\node_modules\tsup\dist\rollup.js:7775:22)
at C:\Users\user\project\frontend\Amity-Social-Cloud-UIKit-Web-OpenSource\node_modules\tsup\dist\rollup.js:7782:59
at _nullishCoalesce (C:\Users\user\project\frontend\Amity-Social-Cloud-UIKit-Web-OpenSource\node_modules\tsup\dist\rollup.js:1:198)
at Object.transform (C:\Users\user\project\frontend\Amity-Social-Cloud-UIKit-Web-OpenSource\node_modules\tsup\dist\rollup.js:7782:18)
at C:\Users\user\project\frontend\Amity-Social-Cloud-UIKit-Web-OpenSource\node_modules\tsup\node_modules\rollup\dist\shared\rollup.js:989:40
src/social/components/EngagementBar/index.tsx(67,23): error TS2786: 'FormattedMessage' cannot be used as a JSX component.
Its element type 'ReactElement<any, any> | Component<Props<Record<string, string | number | boolean | {} | ReactElement<any, string | JSXElementConstructor<any>> | ... 5 more ... | undefined>>, any, any> | null' is not a valid JSX element.
src/social/components/Comment/CommentText.tsx(35,8): error TS2786: 'Truncate.Atom' cannot be used as a JSX component.
Its element type 'ReactElement<any, any> | Component<{ children: ReactNode; }, any, any> | null' is not a valid JSX element.
Type 'Component<{ children: ReactNode; }, any, any>' is not assignable to type 'Element | ElementClass | null'.
Type 'Component<{ children: ReactNode; }, any, any>' is not assignable to type 'ElementClass'.
The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import("C:/Users/user/project/node_modules/@types/react/ts5.0/index").ReactNode'.
src/social/components/Comment/CommentText.tsx(62,6): error TS2786: 'Truncate' cannot be used as a JSX component.
Its instance type 'TruncateMarkup' is not a valid JSX element.
The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import("C:/Users/user/project/node_modules/@types/react/ts5.0/index").ReactNode'.
src/social/components/Comment/CommentText.tsx(66,12): error TS2786: 'FormattedMessage' cannot be used as a JSX component.
Its element type 'ReactElement<any, any> | Component<Props<Record<string, string | number | boolean | {} | ReactElement<any, string | JSXElementConstructor<any>> | ... 5 more ... | undefined>>, any, any> | null' is not a valid JSX element.
C:\Users\user\project\frontend\Amity-Social-Cloud-UIKit-Web-OpenSource>
I didn’t change anything in the package.json or the tsconfig.json
but here is the content of each of them
package.json
{
"name": "@amityco/ui-kit-open-source",
"version": "3.5.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 .",
"lint:fix": "eslint . --fix",
"tsc": "tsc"
},
"peerDependencies": {
"@amityco/ts-sdk": "~6.21.0",
"react": ">=17.0.2",
"react-dom": ">=17.0.2"
},
"devDependencies": {
"@amityco/ts-sdk": "^6.23.0",
"@fortawesome/fontawesome-svg-core": "^1.2.36",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/react-fontawesome": "^0.2.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": "^17.0.74",
"@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.16",
"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.33",
"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",
"svg-url-loader": "^7.1.1",
"ts-jest": "^29.1.1",
"tsup": "^7.3.0",
"typescript": "^4.9.5",
"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",
"@tanstack/react-query": "^5.28.14",
"clsx": "^2.1.0",
"extract-colors": "^4.0.2",
"filesize": "^9.0.11",
"hls.js": "^1.4.14",
"linkify-react": "^4.1.3",
"linkifyjs": "^4.1.3",
"lodash": "^4.17.21",
"millify": "^6.1.0",
"polished": "^4.3.1",
"react-hook-form": "^7.49.2",
"react-infinite-scroll-component": "^6.1.0",
"react-intl": "^6.5.5",
"react-loading-skeleton": "^3.3.1",
"react-mentions": "^4.4.10",
"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",
"zod": "^3.22.4"
},
"lint-staged": {
"*.{js,jsx}": "eslint --cache --fix",
"*.{json,md}": "prettier --write"
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"license": "LGPL-2.1-only"
}
tsconfig.json
{
"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. */
// "declarationDir": "./", /* 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": true /* 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"],
"exclude": ["node_modules", "vite.config.ts"]
}
Node version is v18.19.0