0

I have a problem with React. When I want to access the properties of a model class in a Spring-Boot, React project then I get an error. I think that the component does nothing extraordinary and is relatively simple. I did not change anything in the Webpack settings.

The API returns the object, but I can't access the properties from within React. Whenever I do, I get the following error.

Object in Dev Tools

{id: "62ac8a1e5018474c3d349d0d", name: "Escape from Tarkov", date: "2016-12-28",…}
bewertungen: [{gewichtung: 5, comment: "Richtig gut."}, {gewichtung: 5, comment: "Super realistisch"}]
0: {gewichtung: 5, comment: "Richtig gut."}
1: {gewichtung: 5, comment: "Super realistisch"}
date: "2016-12-28"
entwickler: "Battlestate Games"
id: "62ac8a1e5018474c3d349d0d"
name: "Escape from Tarkov"

Error message

Module parse failed: Unexpected token (105:10)
You may need an appropriate loader to handle this file type.
|       columnNumber: 21
|     }
>   }, game?.id))));
| }

My component:

import axios from "axios";
import React, { useEffect, useState } from "react";
import { Game } from "../types/Game";

export default function GameOverview() {
    const [game, setGame] = useState<Game>();
    const [isLoading, setIsLoading] = useState(true);
    const GAME_TO_FETCH = "escape from tarkov";
    
    const fetchGameData = async (url: string) => {
        await axios
        .get(url)
        .then((response) => response.data)
        .then((data) => {
            console.log(data);
            setGame(data);
            setIsLoading(false);
        })
        .catch((error) => console.log("Something bad happend: " + error));
    }
    
    useEffect(() => {
        fetchGameData("http://localhost:8080/games/" + GAME_TO_FETCH);
    }, []);

    if (isLoading)
        return <div>Loading...</div>

    return (
        <>
            <div>
                <h3>Game - Details Page</h3>
                <ol>
                    <li>Some Game data 1</li>
                    <li>Some Game data 2</li>
                    <li>{ game?.id }</li> {/* Throws the error */}
                </ol>
            </div>
        </>
    )
}

Model interface

export interface Game {
    id: string;
    name: string;
    date: Date;
    entwickler: string;
    ratings: Rating[];
}

interface Rating {
    gewichtung: number;
    comment: string;
}

Thanks in advance. I hope someone can help me and I can learn something from the circumstance.

Tauwin
  • 25
  • 1
  • 5
  • I think your 'compiler' does not like optional chaining? If you are using babel try this: https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining – Stutje Jul 11 '22 at 11:39
  • 1
    Does this answer your question? [Webpack cant compile ts 3.7 (Optional Chaining, Nullish Coalescing)](https://stackoverflow.com/questions/58813176/webpack-cant-compile-ts-3-7-optional-chaining-nullish-coalescing) – Emanuele Scarabattoli Jul 11 '22 at 12:03
  • What just occurred to me. I have updated the React application. I don't remember if it was global or local to the project. But a new CRA works flawlessly. I think the update here changed something about Optional Chaining. I will deal with your hint today and probably set up a new project anyway. – Tauwin Jul 11 '22 at 13:00
  • Thanks to you guys, but nothing discussed here has worked for me. I'm re-setting up the front end and keeping in mind that I'm not updating anything, even if the CLI suggests I do. As a beginner, I seem to wrongly assume that the CLI knows what to do. Thanks for your input. – Tauwin Jul 12 '22 at 08:18

1 Answers1

0

Name can't include special characters except underscore(_) in JavaScript. In the line consists error, you used a variable named game? and question mark can't not be used in the name, so there throws error. Just use game.id then error will be removed.

Meerkat
  • 324
  • 1
  • 10
  • The question mark is given to me by the compiler and is not part of the name. But thanks anyway for the hint. As the previous commentators have already noted, this is probably where my problem is located. – Tauwin Jul 11 '22 at 13:02