In the Visual Studio React + Redux template project, I have created a react component with the following "render()" method:
public render() {
return (
<React.Fragment>
<h1>Welcome to the Adventure Company {this.props.user?.activeCharacter}!</h1>
</React.Fragment>
);
}
The goal is to show one message if the user property exists and another if it does not. Initially, when the page loads, it displays: "Welcome to the Adventure Company !", but then switches to a typescript error screen with:
Failed to compile
./src/components/Splashpage.tsx
Syntax error: Expression expected (34:77)
(This corresponds to the line with the .? in the above render function)
If I exclude the optional chaining operation (the .?), I receive a compilation error because user could be undefined. This indicates that Typescript is behaving as expected!
However, why does the optional chain cause the code to compile in Visual Studio but fail in the browser? Could it be due to compiling the code with the wrong version of Typescript?
Edit: Switching back to the pre-3.7 Elvis operator style doesn't lead to runtime errors, suggesting a potential issue with Typescript version compatibility.
<h1>Welcome to the Adventure Company, {this.props.user!== null && this.props.user!== undefined ? this.props.user.activeCharacter : "Explorer"}!</h1>
I am still investigating this matter - perhaps IIS is utilizing an incorrect version of Typescript? While I understand the what, figuring out the why and how to resolve remain challenges.
Is it plausible that Visual Studio is running this template using a Node.js version that does not support the ?? or .? operators? (I believe I am using Node 12.X)