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

**URL:** <https://forum.social.plus/t/amity-opensourceweb-module-parse-failed-unexpected-character-1-0/781>\
**Category:** Web\
**Created:** [June 22, 2023, 3:11pm UTC](https://forum.social.plus/t/amity-opensourceweb-module-parse-failed-unexpected-character-1-0/781 "2023-06-22T15:11:07Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sowmya](https://avatars.discourse-cdn.com/v4/letter/s/a5b964/32.png) [@Sowmya](https://forum.social.plus/u/Sowmya)\
**Post date:** [June 22, 2023, 3:11pm UTC](https://forum.social.plus/t/amity-opensourceweb-module-parse-failed-unexpected-character-1-0/781/1 "2023-06-22T15:11:07Z")

</div>

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](https://webpack.js.org/concepts#loaders)

> @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](https://webpack.js.org/concepts#loaders)

> @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.

---

<div class="post-metadata">

**Author:** ![cijin](https://avatars.discourse-cdn.com/v4/letter/c/49beb7/32.png) [@cijin](https://forum.social.plus/u/cijin)\
**Post date:** [June 23, 2023, 4:22am UTC](https://forum.social.plus/t/amity-opensourceweb-module-parse-failed-unexpected-character-1-0/781/2 "2023-06-23T04:22:53Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Sowmya](https://avatars.discourse-cdn.com/v4/letter/s/a5b964/32.png) [@Sowmya](https://forum.social.plus/u/Sowmya)\
**Post date:** [June 23, 2023, 6:07pm UTC](https://forum.social.plus/t/amity-opensourceweb-module-parse-failed-unexpected-character-1-0/781/3 "2023-06-23T18:07:19Z")

</div>

Hi Cijin,

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

> **[Amity Angular code](https://codebeautify.org/cs/30cb2d)**

Thanks,  
Sowmya

---

<div class="post-metadata">

**Author:** ![cijin](https://avatars.discourse-cdn.com/v4/letter/c/49beb7/32.png) [@cijin](https://forum.social.plus/u/cijin)\
**Post date:** [June 26, 2023, 6:29am UTC](https://forum.social.plus/t/amity-opensourceweb-module-parse-failed-unexpected-character-1-0/781/4 "2023-06-26T06:29:16Z")

</div>

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):

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

```

OR

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

```

> [@Sowmya](#):
>
> You may need an appropriate loader to handle this file type, currently, no loaders are configured to process this file.

Kind regards,  
Cijin