Unexpected token, expected "," when trying to use react rendering - node.js

The code I had used to work, but after doing a lot of major updates to packages I have been working through some errors. The one that has me stuck right now is the following:
renderDateTextField = (props: TextFieldProps) => {
return (<TextField
className={`${styles.datesContainer} ${styles.textfield}`}
onClick={props.onClick}
value={props.value}
{...props}
/>);
};
Here is the error message:
ERROR in ./src/components/Desk/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /var/www/FlaskApp/people-app-prod/static/src/components/Desk/index.js: Unexpected token, expected "," (604:32)
602 | };
603 |
> 604 | renderDateTextField = (props: TextFieldProps) => {
| ^
605 | return (<TextField
606 | className={`${styles.datesContainer} ${styles.textfield}`}
607 | onClick={props.onClick}
I am personally not as familiar with this code/react and am a new developer on this project trying to get things updated. It's unclear what the problem was here and why it is being triggered when building now, but older versions of the packages did not have issues.
Edit:
Previously in babel I the es2015 preset was being used, this has now been changed to #babel/preset-env as suggested on the babel page since es2015 is deprecated: https://babeljs.io/docs/en/babel-preset-es2015 . I am wondering if this is related to the problem.

It looks like that code is using the Flow typing system. I would check to see that Flow is properly configured.

Related

How to use a dynamic import in a firebase cloud function using Javascript

How can I make this work without having the pre-deploy linter produce an error? If I disable the linter will it work on the cloud? (It works with my mocha tests).
async function() {
const { ChatGPTAPI } = await import('chatgpt');
}
29:32 error Parsing error: Unexpected token import
✖ 1 problem (1 error, 0 warnings)
Setting type: "module" in package.json produces error with the eslintrc.js

Jest Typescript error importing BabylonJS

I'm trying to launch a Jest test that just happens to import BabylonJS
I'm getting the error below.
export * from "./abstractScene.js";
^^^^^^
SyntaxError: Unexpected token 'export'
> 1 | import * as BABYLON from "#babylonjs/core";
| ^
2 |
3 | describe("Babylong tests2", () => {
4 | test("Should work please", () => {
When I created a CodeSandbox to test, it works GRRRR
https://codesandbox.io/s/jovial-cherry-svdug7?file=/test/babylon.test.ts
When I git clone and npm i && npm run test it fails with the above error
https://github.com/jtwigg/babylonjs-jest/
I'm having a lot of trouble getting traction with testing in a React app (failed with Mocha a million circular errors)
Any help would be appreciated.

Error: node_modules\react-native-fs\FS.common.js: Unexpected token, expected "," (30:29) when build React project

I have just installed jsmediatags in my project. Then when I try to build my project, it has the error as below
...
Creating an optimized production build...
Failed to compile.
.\node_modules\jsmediatags\build2\ReactNativeFileReader.js
Cannot find module: 'react-native-fs'. Make sure this package is installed.
You can install this package by running: npm install react-native-fs.
Then I keep installing react-native-fs, and it still has the error.
...
Creating an optimized production build...
Failed to compile.
./node_modules/react-native-fs/FS.common.js
SyntaxError: D:\workspace\zmp3-desktop\node_modules\react-native-fs\FS.common.js: Unexpected token, expected "," (30:29)
28 | };
29 |
> 30 | var normalizeFilePath = (path: string) => (path.startsWith('file://') ? path.slice(7) : path);
| ^
31 |
32 | type MkdirOptions = {
33 | NSURLIsExcludedFromBackupKey?: boolean; // iOS only
...
At that time, I can't find out any article to fix this problem.
And after a lot of time to find a way to fix this, I try to comment var RNFS = require('react-native-fs'); and the code related in node_modules\jsmediatags\build2\ReactNativeFileReader.js then uninstall react-native-fs, and it works.
I know this isn't the best way to fix this problem, but maybe you can try it.

Babel parser not showing proper filename for sytax error

So I've tried everywhere but can't find any answers to this. I am trying to add some custom functionality to a Gatsby build process that runs on node.js which requires me to get file content and parse into an ast. I am using #babel/parser successfully, however whenever the parser runs into syntax errors it throws an error referencing the file running the parser instead of the file being parsed (i.e. where the syntax error is actually located).
Here is an example from gatsby-node.js where I am trying to run the parsing function:
const contents = fs.readFileSync( file, 'utf-8' );
const ast = parser.parse( contents, {
errorRecovery: true,
plugins: [ 'jsx' ],
sourceFilename: 'SHOWME.js',
sourceType: 'module',
} );
Here is the actual syntax error in the file being parsed named Page.js:
import React from 'react';
import { useGroqQuery } = 'this should break';
And here is the error as displayed in terminal:
"gatsby-node.js" threw an error while running the createPages lifecycle:
Unexpected token (2:24)
119 |
120 | const contents = fs.readFileSync( file, 'utf-8' );
> 121 | const ast = parser.parse( contents, {
| ^
122 | errorRecovery: true,
123 | plugins: [ 'jsx' ],
124 | sourceFilename: 'SHOWME.js',
File: gatsby-node.js:121:20
SyntaxError: Unexpected token (2:24)
- index.js:742 Object._raise
[gatsby-groq]/[#babel]/parser/lib/index.js:742:17
- index.js:735 Object.raiseWithData
[gatsby-groq]/[#babel]/parser/lib/index.js:735:17
- index.js:729 Object.raise
[gatsby-groq]/[#babel]/parser/lib/index.js:729:17
As you can see, it's showing me neither the syntax error itself or the filename, only the line and column numbers. Pretty frustrating to debug. I have tried using the parser's errorRecovery and sourceFilename options but they aren't making a difference here.
Has anyone run into anything similar?

How to fix Jest tests that are throwing "Cannot find module" error?

I’d appreciate some advice for an error I am running into while running Jest tests.
The code I am running can be found here as I am working on Mozilla’s Devtools:
https://hg.mozilla.org/mozilla-central/file
I have added an import statement to the file devtools/client/debugger/src/components/Editor/SearchBar.js. The file is here:

https://hg.mozilla.org/mozilla-central/file/tip/devtools/client/debugger/src/components/Editor/SearchBar.js
The import statement is:
import { PluralForm } from "devtools/shared/plural-form";
I use this function in my code change. For some reason this is creating errors in the tests "Editor.spec.js" and "SearchBar.spec.js".
Tests can be found here: https://hg.mozilla.org/mozilla-central/file/tip/devtools/client/debugger/src/components/Editor/tests
The error is: Cannot find module 'devtools/shared/plural-form' from 'SearchBar.js'
The function works perfectly fine when I run the code, but Jest is having a hard time resolving the module.
Any help would be appreciated!
I tried adding to modulePaths in the config file.
Cannot find module 'devtools/shared/plural-form' from 'SearchBar.js'
37 | import type SourceEditor from "../../utils/editor/source-editor";
38 |
> 39 | const { PluralForm } = require("devtools/shared/plural-form");
| ^
40 | // import { PluralForm } from "devtools/shared/plural-form";
41 |
42 | function getShortcuts() {
at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:221:17)
at Object.<anonymous> (src/components/Editor/SearchBar.js:39:24)

Resources