WebPack error: Critical dependency: the request of a dependency is an expression

[dvoytenko]

What happened?

Steps to Reproduce

Running const sdk = new NodeSDK({}); sdk.start(); pops up this WebPack error:

Critical dependency: the request of a dependency is an expression

Expected Result

No error.

Actual Result

Error.

Additional Details

It appears that the error is coming from a dynamic import here:

opentelemetry-js/experimental/packages/opentelemetry-instrumentation/src/platform/node/instrumentation.ts

Line 164 in c84698d

const version = require(path.join(baseDir, 'package.json')).version;

It's even shielded by the // eslint-disable-next-line @typescript-eslint/no-var-requires.

This seems like an auxiliary function and perhaps the SDK could allow users to bypass the need to execute this dynamic require?

OpenTelemetry Setup Code

const sdk = new NodeSDK({
  resource: new Resource({}),
});
sdk.start();

package.json

{
  "name": "otel",
  "version": "0.3.0",
  "private": true,
  "type": "module",
  "scripts": {
    "type-check": "tsc --noEmit"
  },
  "dependencies": {
    "@opentelemetry/api": "^1.6.0",
    "@opentelemetry/exporter-trace-otlp-grpc": "^0.43.0",
    "@opentelemetry/exporter-trace-otlp-http": "^0.43.0",
    "@opentelemetry/exporter-trace-otlp-proto": "^0.43.0",
    "@opentelemetry/resources": "^1.17.0",
    "@opentelemetry/sdk-node": "^0.43.0",
    "@opentelemetry/sdk-trace-node": "^1.17.0",
    "@opentelemetry/semantic-conventions": "^1.17.0"
  },
  "devDependencies": {
    "@types/node": "18.15.11",
    "typescript": "5.1.3"
  }
}

Relevant log output

Critical dependency: the request of a dependency is an expression

Import trace for requested module:
../../node_modules/.pnpm/@opentelemetry+instrumentation@0.43.0_@opentelemetry+api@1.6.0/node_modules/@opentelemetry/instrumentation/build/src/platform/node/instrumentation.js
vercel-site:dev: ../../node_modules/.pnpm/@opentelemetry+instrumentation@0.43.0_@opentelemetry+api@1.6.0/node_modules/@opentelemetry/instrumentation/build/src/platform/node/index.js
vercel-site:dev: ../../node_modules/.pnpm/@opentelemetry+instrumentation@0.43.0_@opentelemetry+api@1.6.0/node_modules/@opentelemetry/instrumentation/build/src/platform/index.js
vercel-site:dev: ../../node_modules/.pnpm/@opentelemetry+instrumentation@0.43.0_@opentelemetry+api@1.6.0/node_modules/@opentelemetry/instrumentation/build/src/index.js
vercel-site:dev: ../../node_modules/.pnpm/@opentelemetry+sdk-node@0.43.0_@opentelemetry+api@1.6.0/node_modules/@opentelemetry/sdk-node/build/src/sdk.js
vercel-site:dev: ../../node_modules/.pnpm/@opentelemetry+sdk-node@0.43.0_@opentelemetry+api@1.6.0/node_modules/@opentelemetry/sdk-node/build/src/index.js
../../packages/otel/src/index.ts

[dyladan]

This is critical to the functioning of the instrumentation package and can't really be removed without causing other problems. Even if you get past this step, all node autoinstrumentations depend very heavily on require-in-the-middle which doesn't function in webpack contexts and you won't get any instrumentation anyway. Other agents solve this in different ways, for example elastic recommends adding all node_modules/ as an external using nodeExternals() but I can't guarantee that would work (https://www.elastic.co/guide/en/apm/agent/nodejs/current/starting-the-agent.html#start-webpack). If I'm missing something or there is a way to solve this, I would love to hear it because we have heard this from other users as well.

There are definitely people using otel in webpack contexts so it is definitely possible, but I think the autoinstrumentations are unlikely to work and you'll have to jump through quite some hoops and/or use manual instrumentation.

[dvoytenko]

I'll close this for now. Overall, it makes sense for specific instrumentations to violate this rule - most of them won't be compatible with WebPack or any other pack in many cases. But it'd be good to keep it await from the the core library.

[moxious]

Adding this note for posterity. Here's what the issue looks like in practice, with a work-around.

What it looks like

Import trace for requested module:
./node_modules/@opentelemetry/instrumentation-fetch/node_modules/@opentelemetry/instrumentation/build/esm/platform/node/instrumentation.js
./node_modules/@opentelemetry/instrumentation-fetch/node_modules/@opentelemetry/instrumentation/build/esm/platform/node/index.js
./node_modules/@opentelemetry/instrumentation-fetch/node_modules/@opentelemetry/instrumentation/build/esm/platform/index.js
./node_modules/@opentelemetry/instrumentation-fetch/node_modules/@opentelemetry/instrumentation/build/esm/index.js
./node_modules/@opentelemetry/instrumentation-fetch/build/esm/fetch.js
./node_modules/@opentelemetry/instrumentation-fetch/build/esm/index.js
./node_modules/@grafana/faro-web-tracing/dist/esm/getDefaultOTELInstrumentations.js
./node_modules/@grafana/faro-web-tracing/dist/esm/index.js
./app/components/nav.tsx
./app/components/navigatedcontent.tsx
./app/answers/page.tsx

./node_modules/@opentelemetry/instrumentation/build/esm/platform/node/instrumentation.js
Critical dependency: the request of a dependency is an expression

Import trace for requested module:
./node_modules/@opentelemetry/instrumentation/build/esm/platform/node/instrumentation.js
./node_modules/@opentelemetry/instrumentation/build/esm/platform/node/index.js
./node_modules/@opentelemetry/instrumentation/build/esm/platform/index.js
./node_modules/@opentelemetry/instrumentation/build/esm/index.js
./node_modules/@grafana/faro-web-tracing/dist/esm/instrumentation.js
./node_modules/@grafana/faro-web-tracing/dist/esm/index.js
./app/components/nav.tsx
./app/components/navigatedcontent.tsx
./app/answers/page.tsx
 ⚠ ./node_modules/@opentelemetry/instrumentation-fetch/node_modules/@opentelemetry/instrumentation/build/esm/platform/node/instrumentation.js
Critical dependency: the request of a dependency is an expression

A work-around:

In my particular case, the root of this came from NextJS (which does a lot of server side rendering) trying to run client-side code in server-side pre-rendering. In next.config.js you can add this block which will disable this warning for opentelemetry from webpack. It fixes nothing, but it doesn't blow up your console with things you can't fix.

    webpack: (
        config,
        { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
    ) => {
        if (isServer) {
            config.ignoreWarnings = [
                { module: /opentelemetry/, },
            ]
        }
        return config
    },