Next.js: SyntaxError: Unexpected token 'export'

[proclamo]

Hello,

I'm trying to add a FlowmapLayer on an existing project which is already using Deck.gl.

I'm not an expert in nx + next.js configuration, but I've tried several things, even with next-transpile-modules (although I didn't know what I was doing).

I am working with a very simple example:

const layers = [
    new FlowmapLayer<LocationDatum, FlowDatum>({
        id: 'my-flowmap-layer',
        od_data,
        pickable: true,
    })
];

...

<div sx={{ width, height }}>
  <DeckGL
        width="100%"
        height="100%"
        controller={true}
        layers={layers}
      >
        <ReactMapGl
          mapStyle={BASEMAP.POSITRON}
          mapboxAccessToken={process.env.NEXT_PUBLIC_MAP}
      />
  </DeckGL>
</div>

and I get the error:

SyntaxError: Unexpected token 'export'

[...]/node_modules/ (flowmap.gl/layers/dist/index.js (1)

Any clue of how can I fix this?

[ilyabo]

next-transpile-modules should solve this issue with Next.js.

Add this to next.config.js:

const withTM = require('next-transpile-modules')([
  '@flowmap.gl/layers',
  '@flowmap.gl/data',
]);


module.exports = withTM({
  // ... rest of the config
});

[proclamo]

Hi @ilyabo thanks for the response.

I've tried the code as you've indicated and it still don't works. I've tried also with different versions of the library with the same result.

Any ideas?

Thank you for your time and this great software.

[ilyabo]

Could you share your repo?

[proclamo]

I can't because it's a corporate repo. But I'll try to share the relevant parts:

next.base.config.js

const withTM = require('next-transpile-modules')([
  '@flowmap.gl/layers',
  '@flowmap.gl/data'
]);


const nextConfig = {
  nx: {
    // Set this to true if you would like to to use SVGR
    // See: https://github.com/gregberge/svgr
    svgr: false
  },
  typescript: {
    ignoreBuildErrors: true,
    exportTrailingSlash: true,
    generateEtags: false
  }
};

module.exports = withTM({
  ...nextConfig,
  reactStrictMode: true,
});

export default nextConfig;

package.json

...
"next": "12.0.3",
"@flowmap.gl/data": "^8.0.0-alpha.25",
 "@flowmap.gl/layers": "^8.0.0-alpha.25",
"deck.gl": "^8.6.3",
"d3": "^7.1.1",
...

In my component I have:

// imports

type LocationDatum = {
  id: string;
  name: string;
  lon: number;
  lat: number;
};

type TooltipState = {
  position: { left: number; top: number };
  content: ReactNode;
};

type FlowDatum = {
  origin: string;
  dest: string;
  value: number;
};

const ODMatrix = ({
  api,
  title,
  data: unused = '',
  width = 600,
  height = 500
}) => {
  const ICON_MAPPING = {
    marker: { x: 0, y: 0, width: 128, height: 128, mask: true }
  };
  const [data, setData] = useState<FlowmapData<LocationDatum, FlowDatum>>();
  const [viewStateModel, setViewStateModel] = useState({
    latitude: 0,
    longitude: 0,
    zoom: 0,
    bearing: 0,
    pitch: 0,
    width,
    height
  });

const { isSuccess, data: projectData }: any = useQuery(...)

useEffect(() => {
    if (isSuccess) {
      console.log('projectData', projectData, 'data', unused);
      const locations = projectData?.map((feature) => {
          return {
            id: feature.id,
            name: feature.name,
            lon: feature.lon,
            lat: feature.lat
          };
        });

        console.log('OOH locations', locations);

        const viewState = getViewStateForLocations(
            locations,
            (loc) => [loc.lon, loc.lat],
            [width, height],
          );

          setViewStateModel({
            ...viewState,
            latitude: viewState.latitude - 0.02,
            zoom: viewState.zoom + 1,
          });
    }
  }, [projectData]);

const layers = [
    new FlowmapLayer<LocationDatum, FlowDatum>({
      id: 'my-flowmap-layer',
      od_data,
      pickable: true
    })
]
return (
    <div>
      {isSuccess ? (
        <DeckGL
          width={width}
          height={height}
          onViewStateChange={({ viewState }) => setViewStateModel(viewState)}
          controller={false}
          layers={layers}
        >
          <StaticMap
            mapStyle={BASEMAP.POSITRON}
            mapboxApiAccessToken={process.env.NEXT_PUBLIC_MAP}
          />
        </DeckGL>
      ) : (
        <div>Loading...</div>
      )}
    </div>
  );
};

But I've never been able to test if the component works. After your suggestion the error I get is:

Error: require() of ES Module /Users/.../node_modules/d3-array/src/index.js from /Users/.../node_modules/@deck.gl/carto/dist/es5/api/layer-map.js not supported.
Instead change the require of index.js in /Users/.../node_modules/@deck.gl/carto/dist/es5/api/layer-map.js to a dynamic import() which is available in all CommonJS modules.

Thanks for your help.

[ilyabo]

Ah, so now you are getting the error because of @deck.gl/carto which you probably don't need. Try listing in package.json only the relevant parts of deck.gl: @deck.gl/core, @deck.gl/layers, @deck.gl/react. Or alternatively, try adding @deck.gl/carto to next-transpile-modules

[proclamo]

I'll do. Thanks!