Missing class properties transform - REACT 18 - Create react app - reactjs

I have a react app created with create-react-app
I have imported a library I created using class syntax
I am getting the following error:
SyntaxError: ....RequestBody.js: Missing class properties transform.
35 |
36 | class RequestBody {
37 | [FIELD_NAMES.INTERFACE_NAME] = "PRE_SALE_CHECK";
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
38 | [FIELD_NAMES.FROM] = "DAVE SHEEPLE";
39 | [FIELD_NAMES.TO] = "MISTER JONES";
40 |
I have tried installing babel-plugin-transform-class-properties
and some other similar suggestions but none worked.
the project itself runs perfectly.
assistance is appreciated

Related

Cant install any sound or image packages for react-native

I'm trying to create sound player in my react native app, but I was trying to install a lot of various sound packages, and all of them are giving me pretty same issues, like this:
Without them, project compiles and runs fine.
UPD:
Added arrors as text:
ERROR in ./node_modules/react-native-sound/sound.js
Module not found: Error: Can't resolve 'react-native/Libraries/Image/resolveAssetSource' in '/mnt/c/users/user/desktop/adalo/audio_player/my-component/node_modules/react-native-sound'
# ./node_modules/react-native-sound/sound.js 7:25-83
# ./src/components/CustomAudioPlayer/index.js
# ./index.js
# ./dist/input/runtime.js
ERROR in ./node_modules/react-native/Libraries/Image/resolveAssetSource.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /mnt/c/users/user/desktop/adalo/audio_player/my-component/node_modules/react-native/Libraries/Image/resolveAssetSource.js: Unexpected token, expected "from" (19:12)
17 | const {pickScale} = require('./AssetUtils');
18 |
> 19 | import type {ResolvedAssetSource} from './AssetSourceResolver';
| ^
20 |
21 | let _customSourceTransformer, _serverURL, _scriptURL;
22 |
UPD2:
Running command react-native info

Missing class properties transform pdfjs-dist

I have Installed npm install pdfjs-dist i want to load PDF on the browser on mobile phones. However I am getting the below error. How can i resolve this?
Failed to compile.
./node_modules/pdfjs-dist/build/pdf.js
SyntaxError: C:\node\node_modules\pdfjs-dist\build\pdf.js: Missing class properties transform.
3520 |
3521 | class PixelsPerInch {
> 3522 | static CSS = 96.0;
| ^^^^^^^^^^^^^^^^^^
3523 | static PDF = 72.0;
3524 | static PDF_TO_CSS_UNITS = this.CSS / this.PDF;
3525 | }

TypeError: Cannot read properties of undefined (reading 'prototype')

Unlike this one, the import is intentional. I need to use the express module. How can I fix that? I've tried but I couldn't make a sample to reproduce it. So I'm open to guesses on what can be the reason for the error. The error is caused by the import:
import express from 'express'
I also tried:
import {express} from 'express'
neither does work.
the error:
×
TypeError: Cannot read properties of undefined (reading 'prototype')
(anonymous function)
C:/Users/artur/Desktop/merge/editor/node_modules/express/lib/response.js:41
38 | * #public
39 | */
40 |
> 41 | var res = Object.create(http.ServerResponse.prototype)
42 |
43 | /**
44 | * Module exports.
What could be the reason for this error?

I get "Parsing errors" on .ts files when I migrate my app from React 16.x to 17.x

I am working to migrate a React app to the latest v17.x version (from 16.13.0).
However I am getting parsing errors on the typescript files when I upgrade React (the app uses javascript mostly, but some files were later added in typescript).
e.g.
src\components\data\Assets\FYAsset.ts
Line 2:11: Parsing error: Unexpected token
1 | export class FYAsset {
> 2 | private apiData: Object | undefined; // the res data, as received from the API
| ^
3 |
4 | private id: number | undefined;
5 | private providerId: number | undefined;
src\components\data\Users\FYUser.ts
Line 5:19: Parsing error: Unexpected token
3 |
4 | export class FYUserConstants {
> 5 | static readonly USERGROUPID_ADMIN = 1;
| ^
6 | static readonly USERGROUPLABEL_ADMIN = "ADMIN";
7 | //
8 | static readonly USERGROUPID_EXPERT = 2;
The old app uses the following versions (which work fine):
react-scripts v3.4.0
react/react-dom v16.13.0
typescript v3.8.3
For the migration, the errors appear when I move over to react-scripts v4.0.1 and react v17.0.1. I tried upgrading typescript to v4.1.3 but that didn't change anything.
Again, everything works fine in the previous branch. Could you suspect what causes the issues?
Thanks
The problem was solved by deleting the .eslintcache file that was carried over from the legacy project.

TypeError: Object(...) is not a function in Material-ui Pickers

Whenever I have installed #material-ui/pickers then I have a show this following error. even I also have updated the #material-ui/core#4.9.5 please Suggest Solutions.
TypeError: Object(...) is not a function
Module../node_modules/#material-ui/pickers/esm/Wrapper-241966d7.js
D:/EdysorCode/consultant-panel/consultant/node_modules/#material-ui/pickers/esm/Wrapper-241966d7.js:27
24 | var DIALOG_WIDTH = 310;
25 | var DIALOG_WIDTH_WIDER = 325;
26 | var VIEW_HEIGHT = 305;
> 27 | var useStyles = makeStyles(function (theme) {
28 | return {
29 | staticWrapperRoot: {
30 | overflow: 'hidden',
Which version of material-ui/core are you using?
According to this issue https://github.com/mui-org/material-ui-pickers/issues/1025, you're probably using an old version of material-ui/core that is not compatible with the latest material-ui/pickers package.
As stated in the README on github: https://github.com/mui-org/material-ui-pickers#readme
Note that this package requires #material-ui/core v4. It will not work with the old v3.

Resources