[Bug] Critical dependency: the request of a dependency is an expression | Next.js13

[ander481]

Description

I'm having a warning with running a simple example of Deck.GL in the new Next.js 13 react framework. I recently found a person with the same issue on StackOverflow

Flavors

• [X] React
• [ ] Python/Jupyter notebook
• [ ] MapboxLayer
• [ ] GoogleMapsOverlay
• [ ] CartoLayer
• [ ] DeckLayer/DeckRenderer for ArcGIS

Expected Behavior

No response

Steps to Reproduce

Here is my /src/app/index.tsx

'use client'

import React, { useState } from 'react';
// @ts-ignore
import DeckGL from '@deck.gl/react/typed';

// Map components

//import getViewState from './view'
//import layers from './layers';

// @ts-ignore
import {TileLayer} from '@deck.gl/geo-layers';
// @ts-ignore
import {BitmapLayer} from '@deck.gl/layers';

// Styles
import styles from './style.module.scss';

export default function Home({ viewState }) {
  const layer = new TileLayer({
    // https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#Tile_servers
    data: "https://c.tile.openstreetmap.org/{z}/{x}/{y}.png",

    minZoom: 0,
    maxZoom: 19,
    tileSize: 256,

    renderSubLayers: (props) => {
      const {
        bbox: { west, south, east, north },
      } = props.tile;

      return new BitmapLayer(props, {
        data: null,
        image: props.data,
        bounds: [west, south, east, north],
      });
    },
  });

  return (
    <main>
      <DeckGL
        initialViewState={{
          longitude: -122.45,
          latitude: 37.78,
          zoom: 12,
        }}
        controller={true}
        layers={[layer]}
      />
    </main>
  );
}

export default Home;

Environment

• Framework version: deck.gl@8.8.23
• Browser: Chrome
• OS: Windows
• NPM: 9.2.0

• Node: v18.12.1

  "dependencies": { "@deck.gl/geo-layers": "^8.8.23", "@deck.gl/layers": "^8.8.23", "@deck.gl/react": "^8.8.23", "@loaders.gl/core": "^3.2.13", "@loaders.gl/worker-utils": "^3.2.13", "@next/font": "13.1.6", "@types/node": "18.11.18", "@types/react": "18.0.27", "@types/react-dom": "18.0.10", "deck.gl": "^8.8.23", "eslint": "8.33.0", "eslint-config-next": "13.1.6", "next": "13.1.6", "react": "18.2.0", "react-dom": "18.2.0", "sass": "^1.58.0", "typescript": "4.9.5" } }

Logs

warn - ./node_modules/@loaders.gl/worker-utils/dist/es5/lib/node/require-utils.node.js Critical dependency: the request of a dependency is an expression

Import trace for requested module: ./node_modules/@loaders.gl/worker-utils/dist/es5/lib/node/require-utils.node.js ./node_modules/@loaders.gl/worker-utils/dist/es5/lib/library-utils/library-utils.js ./node_modules/@loaders.gl/worker-utils/dist/es5/index.js ./node_modules/@loaders.gl/core/dist/es5/lib/api/parse.js ./node_modules/@loaders.gl/core/dist/es5/index.js ./node_modules/@deck.gl/geo-layers/dist/es5/tile-3d-layer/tile-3d-layer.js ./node_modules/@deck.gl/geo-layers/dist/es5/index.js ./src/app/(map)/index.tsx

[ibgreen]

@ander481 this looks like a loaders.gl bundling issue. You are welcome to report it in loaders.gl.

Opening a PR with a minimal Next.js example that repros it (e.g. above source code + pacakage.json) would help immensely to motivate work on a resolution.

[ander481]

Thank you! Solved the issue in the next way by downgrading loader package:

https://stackoverflow.com/questions/74991964/critical-dependency-the-request-of-a-dependency-is-an-expression-for-loader-gl

[davidcalhoun]

We've unfortunately also been getting this issue for quite a long time on my team. There's another workaround documented here which involves tweaking the Next.js config: https://github.com/Thopiax/batch11_e_cartomobile_ui/blob/18b955287fa7b36f6dc8a6f450232ae98c77709a/next.config.js#L19