Attribution imports not working with basic create-react-app usage

[ethangodt]

Versions

| => npm -v
10.5.0

| => node -v
v18.20.1

| => npm ls @honeycombio/opentelemetry-web
[email protected] /.../.../.../repro-app
└── @honeycombio/[email protected]

| => npm ls @opentelemetry/auto-instrumentations-web
[email protected] /.../.../.../repro-app
└── @opentelemetry/[email protected]

Steps to reproduce

1. npx create-react-app repro-app --template typescript
2. cd repro-app
3. npm install @honeycombio/opentelemetry-web @opentelemetry/auto-instrumentations-web
4. Add code to src/index.tsx:

import { HoneycombWebSDK, WebVitalsInstrumentation } from '@honeycombio/opentelemetry-web';
import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web';

const sdk = new HoneycombWebSDK({
  apiKey: 'api-key-goes-here',
  serviceName: 'your-great-browser-application',
  instrumentations: [getWebAutoInstrumentations(), new WebVitalsInstrumentation()], // add automatic instrumentation
});
sdk.start();

5. npm start

Browser console error:

web-vitals-autoinstrumentation.js:134 Uncaught TypeError: (0 , attribution_1.onCLS) is not a function
    at WebVitalsInstrumentation.enable (web-vitals-autoinstrumentation.js:134:1)
    at enableInstrumentations (autoLoaderUtils.ts:75:1)
    at registerInstrumentations (autoLoader.ts:42:1)
    at HoneycombWebSDK.start (base-otel-sdk.js:75:1)
    at ./src/index.tsx (index.tsx:14:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:22:1)
    at startup:7:1
    at startup:7:1

Additional context

tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

[dancrumb]

I am also seeing this error.

I even get it when I set instrumentations to an empty array

[dancrumb]

OK - for those who are struggling with this, you can put in a temporary workaround by adding this as an option to the SDK constructor:

webVitalsInstrumentationConfig: {
    vitalsToTrack: [],
  }

[wolfgangcodes]

Thanks @ethangodt for opening this issue and @dancrumb for chiming in. Our team is going to take a look at this one!

[ethangodt]

The reason this is happening is that the web-vitals package has chosen a named export for web-vitals/attribution that leads to a file with the extension .cjs.

The webpack.config.js of Create React App treats that as a non-source file. (i.e. the way it would an image or .css.) As a result the require/import of web-vitals/attribution is transpiled to a download url path and not the real module.

I'm not sure that this project can do anything besides warn folks about Create React App.