SPFX React Webpart problem when using ReactFlow (Optional Chaining issue)

[bbolek]

Hello;

I created a new React webpart. I was planning to use ReactFlow (https://reactflow.dev/docs/quickstart/).

But when I implement the example in documentation. I get exception below.

Something went wrong
If the problem persists, contact the site administrator and give them the information in Technical Details.
TECHNICAL DETAILS
[SPLoaderError.loadComponentError]:
Failed to load component "14a627a1-26d7-4ce5-a576-f7c9c2a63a78" (HelloWorldWebPart). Original error: Failed to load entry point from component "14a627a1-26d7-4ce5-a576-f7c9c2a63a78" (HelloWorldWebPart). Original error: Error loading https://component-id.invalid/14a627a1-26d7-4ce5-a576-f7c9c2a63a78_0.0.1
	Module parse failed: Unexpected token (57:19)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
| function Attribution({ proOptions, position = 'bottom-right' }) {
>     if (proOptions?.hideAttribution) {
|         return null;
|     }

INNERERROR:
Failed to load entry point from component "14a627a1-26d7-4ce5-a576-f7c9c2a63a78" (HelloWorldWebPart). Original error: Error loading https://component-id.invalid/14a627a1-26d7-4ce5-a576-f7c9c2a63a78_0.0.1
	Module parse failed: Unexpected token (57:19)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
| function Attribution({ proOptions, position = 'bottom-right' }) {
>     if (proOptions?.hideAttribution) {
|         return null;
|     }
CALLSTACK:
Error
    at t [as constructor] (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_55aadd24588c5df0cab751df158c8fca.js:3:208866)
    at new t (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_55aadd24588c5df0cab751df158c8fca.js:70:674412)
    at e.buildErrorWithVerboseLog (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_55aadd24588c5df0cab751df158c8fca.js:70:711696)
    at e.buildLoadComponentError (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_55aadd24588c5df0cab751df158c8fca.js:70:707787)
    at https://res-1.cdn.office.net/files/sp-client/chunk.systemjs-component-loader_en-us_5f3f82f1695f09492aa8.js:1:6036

As far as I see webpart cannot handle optional chaining. 

The code is as below:

import * as React from 'react';
import styles from './HelloWorld.module.scss';
import { IHelloWorldProps } from './IHelloWorldProps';
import ReactFlow from 'reactflow';

import 'reactflow/dist/style.css';
export default class HelloWorld extends React.Component<IHelloWorldProps, {}> {
  public render(): React.ReactElement<IHelloWorldProps> {
    const {
      hasTeamsContext
    } = this.props;

    const initialNodes = [
      { id: '1', position: { x: 0, y: 0 }, data: { label: '1' } },
      { id: '2', position: { x: 0, y: 100 }, data: { label: '2' } },
    ];
    const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }];

    return (
      <section className={`${styles.helloWorld} ${hasTeamsContext ? styles.teams : ''}`}>
        <div style={{ width: '100vw', height: '100vh' }}>
          <ReactFlow nodes={initialNodes} edges={initialEdges} />
        </div>
      </section>
    );
  }
}

How can I fix this?

Thanks..

[#2]

Any update on this issue. Facing similar issue with another library for charts.

[#3]

hey @Joy1221 ,

I could not resolve it. I created a standalone react app and used iframe to display react app.

Sorry about it.

Have a great day

[#4]

@bbolek - Oh Ok. It has something to do with the Optional Chaining(?.) In TSConfig.js target:"es5" might be causing this.

[#5]

@bbolek - I was able to solve this by installing babel loader and optional chaining operation from this issue: https://github.com/SharePoint/sp-dev-docs/issues/8896