TypeError: Class constructor BasicTracerProvider cannot be invoked without 'new'

[lextas]

What happened?

Steps to Reproduce

1. clone the reproduction repository link git
2. run docker compose up: this spins up grafana and tempo with collectors enabled. grafana
3. npm install
4. npm run dev
5. open http://localhost:3000 and wait till NextJS compiles the pages
6. See terminal output

Expected Result

No errors.

Actual Result

TypeError: Class constructor BasicTracerProvider cannot be invoked without 'new'
    at new WebTracerProvider (webpack-internal:///(ssr)/./node_modules/@opentelemetry/sdk-trace-web/build/esm/WebTracerProvider.js:51:28)
    at initTelemetry (webpack-internal:///(ssr)/./src/lib/otel/instrumentation.client.ts:44:22)
    at runNextTicks (node:internal/process/task_queues:60:5)
    at listOnTimeout (node:internal/timers:540:9)
    at process.processTimers (node:internal/timers:514:7)

Additional Details

The tracing seems to work fine. I added a test button that triggers a client side trace which is correctly processed.
However, additional logging doesn't seem to be processed (when using .addProcessor but I think this is because it already errors out on the initial trace execution.

Attempts to work-around / fix the issue

1. update the packages to latest version. version .0.44.0 of the OTLP http exporter currently has an issue with sending the traces
2. directly import the WebTracerProvider from @opentelemetry/sdk-trace-web/build/esm -or- /build/esnext
3. setup otel the same as the web example
4. copy/paste the NextJS sample project

Extra info

I've tried a couple of versions of all the @opentelemetry/ packages and sometimes it's a different class that cannot be instantiated but it boils down to the same error. Like here

OpenTelemetry Setup Code

see /src/lib/otel/instrumentation.client.ts

Relevant log output

TypeError: Class constructor BasicTracerProvider cannot be invoked without 'new'
    at new WebTracerProvider (webpack-internal:///(ssr)/./node_modules/@opentelemetry/sdk-trace-web/build/esm/WebTracerProvider.js:51:28)
    at initTelemetry (webpack-internal:///(ssr)/./src/lib/otel/instrumentation.client.ts:44:22)
    at runNextTicks (node:internal/process/task_queues:60:5)
    at listOnTimeout (node:internal/timers:540:9)
    at process.processTimers (node:internal/timers:514:7)

[lextas]

I updated all the NPM packages to the latest version and updated the OTEL stack. I still get an error but not the same as I had. Also the traces are coming in. They are still a bit bloated but at least it seems to be doing something.

The following error still appears but maybe that's because of how the @opentelemetry package is bundled? It's also referenced in this issue

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
./src/lib/otel/instrumentation.client.ts
./src/components/otel.tsx

[lextas]

I converted the repo from an issue reproduction to a working OTEL implementation. Maybe it helps others struggling with getting it all setup. I ignored the warning in the webpack config.

Will close the issue now.