Amity OpenSourceWeb: Module parse failed: Unexpected character '@' (1:0)

Web
1

Hi,
We are using Amity ui-kit in our product, but after updating to Angular 16/15, we are observing an error that says:
Error: Module parse failed: Unexpected character ‘@’ (1:0)
You may need an appropriate loader to handle this file type, currently, no loaders are configured to process this file. See Concepts | webpack

@keyframes react-loading-skeleton {
| 100% {
| transform: translateX(100%);

Versions:
“@amityco/ui-kit”: “^2.15.3”,

Expecting Amity open source would solve our issue we tried to integrate it within our app but still it’s the same issue.
./Amity-Social-Cloud-UIKit-Web-OpenSource/node_modules/react-loading-skeleton/dist/skeleton.css:1:0 - Error: Module parse failed: Unexpected character ‘@’ (1:0)
You may need an appropriate loader to handle this file type, currently, no loaders are configured to process this file. See Concepts | webpack

@keyframes react-loading-skeleton {
| 100% {
| transform: translateX(100%);

Package.json:
“dependencies”: {
“@amityco/ui-kit-open-source”: “file:Amity-Social-Cloud-UIKit-Web-OpenSource”,
“@angular/animations”: “^15.2.9”,
“@angular/cdk”: “^15.2.9”,
“@angular/common”: “^15.2.9”,
“@angular/compiler”: “^15.2.9”,
“@angular/core”: “^15.2.9”,
“@angular/forms”: “^15.2.9”,
“@angular/material”: “^15.2.9”,
“@angular/platform-browser”: “^15.2.9”,
“@angular/platform-browser-dynamic”: “^15.2.9”,
“@angular/router”: “^15.2.9”,
“@angular/service-worker”: “^15.2.9”,
“@babel/runtime”: “^7.12.5”,
“babel-plugin-transform-regenerator”: “^6.26.0”,
“bootstrap”: “^5.2.3”,
“core-js”: “^3.6.4”,
“rrule”: “^2.6.4”,
“rxjs”: “^6.6.2”,
“zone.js”: “^0.12.0”
},
“devDependencies”: {
“@angular-devkit/build-angular”: “^15.2.8”,
“@angular/cli”: “~15.2.8”,
“@angular/compiler-cli”: “^15.2.9”,
“@angular/language-service”: “^15.2.9”,
“@types/gapi”: “^0.0.39”,
“@types/jasmine”: “~3.6.0”,
“@types/jasminewd2”: “^2.0.8”,
“@types/node”: “^14.0.27”,
“babel-core”: “^6.26.3”,
“babel-plugin-transform-runtime”: “^6.23.0”,
“babel-polyfill”: “^6.26.0”,
“babel-preset-es2015”: “^6.24.1”,
“babel-preset-stage-0”: “^6.24.1”,
“typescript”: “~4.8.2”
},

tsconfig.json
{
“compileOnSave”: false,
“compilerOptions”: {
“baseUrl”: “./”,
“outDir”: “./dist/out-tsc”,
“sourceMap”: true,
“declaration”: false,
“module”: “ES2022”,
“moduleResolution”: “node”,
“experimentalDecorators”: true,
“allowSyntheticDefaultImports”: true,
“downlevelIteration”: true,
“importHelpers”: true,
“target”: “ES2022”,
“jsx”: “react”,
“allowJs”: true,
“typeRoots”: [
“node_modules/@types”
],
“lib”: [
“ES2022”,
“dom”
],
“resolveJsonModule”: true,
“esModuleInterop”: true,
}
}

Any help to solve this issue would be greatly appreciated.

2

Hey @Sowmya,

The ui-kit is built using react. Could you show me how you are trying to integrate the components into your angular app please.

Kind regards,
Cijin

3

Hi Cijin,

Please find the link below for how we are trying to make use of amity within the angular app.

Thanks,
Sowmya

4

Hey,

Looking over your code and going through your error message. It seems like webpack is unable to recognize the @ in this section of the code (i could be wrong):

@keyframes react-loading-skeleton {
| 100% {
| transform: translateX(100%);

OR

@Component({
  selector: 'amity-community',
  template: `<span #${containerElementName}></span>`,
  styleUrls: ['./amity-community.scss'],
  encapsulation: ViewEncapsulation.None,
})

Kind regards,
Cijin