React - Parsing error: Unexpected character - reactjs

I'm working on a project and I got this error, someone know why? Thank you !
./src/config/configStore.js
Line 5: Parsing error: Unexpected character '​'
3 | import { composeWithDevTools } from 'redux-devtools-extension';
> 5 | ​import monitorReducersEnhancer from '../enhancers/monitorReducer';
| ^
7 | import loggerMiddleware from '../middleware/logger';
8 | import rootReducer from '../Reducers/index';

Related

Jest encountered an unexpected token with React/pnpm

`/Users/mac/Desktop/project/node_modules/.pnpm/#uppy+core#3.0.4/node_modules/#uppy/core/lib/index.js:1
({"Object.":function(module,exports,require,__dirname,__filename,jest){export { default } from './Uppy.js';
^^^^^^
SyntaxError: Unexpected token 'export'
1 | import { catchError, from, map, Observable } from 'rxjs';
> 2 | import Uppy from '#uppy/core';
| ^
3 | import AwsS3 from '#uppy/aws-s3';
4 | import { handleError, toResponseData } from 'utils/api';
5 | import { fetcher } from './fetch';`
I used "jest": "29.3.1" and pnpm for installing node packages and used vite for building.

Rainbow Kit. React app failures jest test with rainbow-kit component

A react app (built with create-react-app ts) fails jest test after a rainbow kit component was added.
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import {
^^^^^^
SyntaxError: Cannot use import statement outside a module
1 | import { useState } from 'react';
2 | import cn from 'classnames';
> 3 | import { ConnectButton } from '#rainbow-me/rainbowkit';
| ^
4 |
5 | import { UrlForm } from 'components';
6 | import classes from 'App.module.scss';
What could be going wrong with it?
Tests run and pass successfully after ConnectButton removed.

"TypeError: graphql.isType is not a function"

I’m running a GraphQL/Apollo/React stack and am trying to implement MockedProvider in my tests since it seems like a great way of abstracting away a lot of mocks. However, I keep running into the following error. I’ve tried updating, stepping through, and I’m still not sure why the import is failing. Any help would be great, thanks!
My test code and the error
Test Code:
test.only('Renders with MockedProvider', () => {
render(
<MockedProvider mocks={mocks}>
<DailyInspection />
</MockedProvider>
)
})
Error:
TypeError: graphql.isType is not a function
6 | import userEvent from '#testing-library/user-event'
7 | import DailyInspection from '../index'
> 8 | import { MockedProvider } from '#apollo/client/testing'
| ^
9 |
10 | import {
11 | GetProjectControlPointsIdsAndGuidsDocument,
at removeTemporaryGlobals (../node_modules/#apollo/client/utilities/globals/graphql.js:4:5)
at Object.<anonymous> (../node_modules/#apollo/client/utilities/globals/index.js:5:1)
at Object.<anonymous> (../node_modules/#apollo/client/testing/testing.cjs.js:6:17)
at Object.<anonymous> (src/views/DailyInspection/__tests__/DailyInspection.test.tsx:8:1)

What is the way to declare mdbreact's type while installing?

I am new to typescript react and I am trying to use mdbreact to create my navbar, those are my importations:
import React, { Component } from "react";
import {
MDBNavbar,
MDBNavbarBrand,
MDBNavbarNav,
MDBNavItem,
MDBNavLink,
MDBNavbarToggler,
MDBCollapse,
MDBDropdown,
MDBDropdownToggle,
MDBDropdownMenu,
MDBDropdownItem,
MDBIcon,
} from "mdbreact";
But I am getting this error:
TypeScript error in C:/projects/breaking-news/news-project/src/App.tsx(15,8):
Cannot find module 'mdbreact' or its corresponding type declarations. TS2307
13 | MDBDropdownItem,
14 | MDBIcon,
> 15 | } from "mdbreact";
| ^
16 | import { BrowserRouter as Router } from "react-router-dom";
17 |
18 | class NavbarPage extends Component {
and I believe it is something about declaring mdbreact's type while installing but I don't know how and I googled it but nothing helped.

npm test failing for Fluent UI textfield component

I am working on a React/Redux app which uses Fluent UI. I am told that project should be able to run npm test successfully but it is failing with the following message:
SyntaxError: Unexpected token 'export'
1 | import React, { useState } from "react";
2 | import { useDispatch } from "react-redux";
> 3 | import { TextField } from "office-ui-fabric-react/lib/TextField";
| ^
4 | import { Dropdown } from "office-ui-fabric-react/lib/Dropdown";
5 | import { PrimaryButton } from "office-ui-fabric-react";
6 | import "./TodoInput.css";
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
at Object.<anonymous> (src/Components/TodoInput/TodoInput.js:3:1)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 30.104 s
Ran all test suites related to changed files.
This is my first time working with testing. Can someone guide me what I'm doing wrong.
Remove the deep nested imports, instead use like the below one.
import { TextField, Dropdown, PrimaryButton } from "office-ui-fabric-react";

Resources