@elastic/apm-rum causes bundling issue with @web/dev-server

[gabrielslach]

I installed the rum package with npm. I run my app locally with @web/dev-server. Now, when importing this library, I get the following error.

This is my config.

But now when I add these, it just produce additional errors.

[devcorpio]

Hi @gabrielslach,

Thanks for exposing your case.

We are not aware of the web-dev-server specifics. Despite so, I would like to provide you with a workaround that I tested personally, this is the content of my web-dev-server.config.mjs file:

import { fromRollup } from '@web/dev-server-rollup';
import rollupCommonjs from '@rollup/plugin-commonjs';
import rollupReplace from '@rollup/plugin-replace';

const commonjs = fromRollup(rollupCommonjs);
const replace = fromRollup(rollupReplace);

export default {
  plugins: [
    replace({
      "process.env.NODE_ENV": "'development'",
      "import { createTracer":  "var createTracer = function (){ /* noop */} //",
      preventAssignment: false
    }),
    commonjs(),
  ],
};

noop.ts belongs to opentracing which is not maintained anymore for us, so you can get rid of it like I'm doing in the snippet:

import { createTracer":  "var createTracer = function (){ /* noop */} //

Not sure about your context specifics, maybe you will want to add the process.env.NODE_ENV thingy as well.

But at least with that config file setup, RUM works, the screenshot below corresponds to a beacon:

Cheers, Alberto

[gabrielslach]

Thank you @devcorpio, I just realized that I provided the wrong snippet of my config. Nevertheless, your fix works! This fix is conflicting with the web-mocks. (@web/mocks/browser.js) So I had to limit the replace action to @elastic**.