I am trying to configure ChatEngine api in my MERN Stack app, Im trying to test its simple implementation first, the user i'm getting from sessionStorage exists in my ChatEngine project but when I try to run the app I get the following error :
[0] Module parse failed: Unexpected token (106:11)
[0] File was processed with these loaders:
[0] * ./node_modules/babel-loader/lib/index.js
[0] You may need an additional loader to handle the result of these loaders.
[0] | }
[0] | function detachRefs(ctrl, ref) {
[0] > ctrl.ref?.delete(ctrl);
[0] | ref?.delete(ctrl);
[0] | }
Im testing out its implementation so I'm simply adding the ChatEngine pre-built component in my App.js, the simplest implementation before I get to creating a whole customized chat component. Note, I get this when I hover over the import statement :
Could not find a declaration file for module 'react-chat-engine'. 'project-directory-path/frontend/node_modules/react-chat-engine/dist/index.js' implicitly has an 'any' type.
Try `npm i --save-dev @types/react-chat-engine` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-chat-engine';
Here is my App.js, the rest of it already works fine, I'm only testing out ChatEngine :
import React from 'react';
import { ChatEngine } from 'react-chat-engine';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import { Provider } from 'react-redux';
import store from 'store';
import ForgetPassword from 'pages/ForgetPassword';
import ComponentRenderer from 'ComponentRenderer.js';
import MainLandingPage from 'MainLandingPage.js';
export default function App() {
// Get the connected user from sessionStorage
const user = JSON.parse(sessionStorage.getItem('user'));
return (
<Provider store={store}>
<Router>
<Switch>
<Route path="/components/:name">
<ComponentRenderer />
</Route>
<Route path="/ForgetPassword">
<ForgetPassword />
</Route>
<Route path="/Chat">
<ChatEngine
height="100vh"
projectID="Project-Key"
userName={user.name}
userSecret={user.tel}
/>
</Route>
<Route path="/">
<MainLandingPage />
</Route>
</Switch>
</Router>
</Provider>
);
}