Getting very weird error "SyntaxError: '...' expected

Question

I am trying to pass a prop down to a REACTMAPGL in react, I am calling the method displayMarkers() which returns an array for JSX Elements.

The problem revolves mainly around why I am getting the error in this specific project. I created the component just fine and have been able to use it in a different project locally. But It seems to be related to Typescript or prettier maybe in the current codebase I am working on.

Here is the error

10% building 3/13 modules 10 active /Volumes/workplace/opsPortal/src/LeoAccessOperationsPortalStaticWebsite/node_modules/webpack-dev-server/client/utils/createSocketUrl.jsℹ ｢wdm｣: wait until bundle finished: /
95% emitting Prettier✖ ｢wdm｣: SyntaxError: '...' expected. (122:12)
  120 |           onViewportChange={setViewPort}
  121 |           style={{ left: 120, top: 50 }}
> 122 |           {displayMarkers()}
      |            ^
  123 |         />
  124 |         <NavigationControl showCompass={false} style={{ left: 140, top: 70 }} />
  125 |         <MapControl visibleMap={visibleMap} onMapChange={handleMapChange} />
    at t (/Volumes/workplace/opsPortal/src/LeoAccessOperationsPortalStaticWebsite/node_modules/prettier/parser-typescript.js:1:285)
    at Object.parse (/Volumes/workplace/opsPortal/src/LeoAccessOperationsPortalStaticWebsite/node_modules/prettier/parser-typescript.js:14:180461)
    at Object.parse (/Volumes/workplace/opsPortal/src/LeoAccessOperationsPortalStaticWebsite/node_modules/prettier/index.js:9739:19)
    at coreFormat (/Volumes/workplace/opsPortal/src/LeoAccessOperationsPortalStaticWebsite/node_modules/prettier/index.js:13252:23)
    at format (/Volumes/workplace/opsPortal/src/LeoAccessOperationsPortalStaticWebsite/node_modules/prettier/index.js:13510:73)
    at formatWithCursor (/Volumes/workplace/opsPortal/src/LeoAccessOperationsPortalStaticWebsite/node_modules/prettier/index.js:13526:12)
    at /Volumes/workplace/opsPortal/src/LeoAccessOperationsPortalStaticWebsite/node_modules/prettier/index.js:44207:15
    at Object.format (/Volumes/workplace/opsPortal/src/LeoAccessOperationsPortalStaticWebsite/node_modules/prettier/index.js:44226:12)
    at /Volumes/workplace/opsPortal/src/LeoAccessOperationsPortalStaticWebsite/node_modules/prettier-webpack-plugin/index.js:70:47
    at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:63:3)
ℹ ｢wdm｣: wait until bundle finished: /

Here is the full JSX being returned:

if (transformRequest) {
    return (
    <div>
        <ReactMapGL
          {...viewport}
          width="80%"
          height={'65vh'}
          transformRequest={transformRequest}
          mapStyle={visibleMap}
          onViewportChange={setViewPort}
          style={{ left: 120, top: 50 }}
          {displayMarkers()}
        />
        <NavigationControl showCompass={false} style={{ left: 140, top: 70 }} />
        <MapControl visibleMap={visibleMap} onMapChange={handleMapChange} />
      </div>
    );
  } else return <div>{<h1>Loading...</h1>}</div>;
};

I tried putting a {/prettier-ignore/} over the {displayMarkers()}, but then the exact same error happens, but it points to the {/prettier-ignore/}.

Note: The code compiles if I add the spread operator, but it breaks the the component because the component is expected an array, but it gets an object I think.

Arnav Thorat · Answer 1 · 2022-03-24T01:16:14.483

It most likely does not like the fact that you aren't placing an attribute name before the function, like so.

<Prop key={func()} />

To fix it, you need to add an attribute before displayMarkers(), like below.

<ReactMapGL displayMarkers={displayMarkers()} />

Note: The rest of the keys are not in ReactMapGL, as that would not make the code very readable.

If displayMarkers() was supposed to be the text displayed in the prop, then you need to change your prop to the following.

<ReactMapGL>{displayMarkers()}</ReactMapGL>

Note: The rest of the keys are not in ReactMapGL, as that would not make the code very readable.

Getting very weird error "SyntaxError: '...' expected

1 Answers1