bug: UNRESOLVED_IMPORT when trying to import newrelic browser agent

[OuranosSkia]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Stencil Version

4.7.0

Current Behavior

When importing the @newrelic/browser-agent module to a Stencil project, the bundler does not seem to know how to bundle newrelic. I get an UNRESOLVED_IMPORT message. Other imports to stencil appear to work properly and only newrelic's browser agent seems to have an issue.

Expected Behavior

The project builds properly with the newrelic import and, when started, properly tries to load the newrelic agent (it's not configured in this example, but I should see it try).

System Info

System: node 20.11.0
    Platform: windows (10.0.23615)
   CPU Model: AMD Ryzen 7 3700X 8-Core Processor              (16 cpus)
    Compiler: C:\Work\test-newrelic\node_modules\@stencil\core\compiler\stencil.js
       Build: 1705946070
     Stencil: 4.11.0
  TypeScript: 5.3.3
      Rollup: 2.56.3
      Parse5: 7.1.2
      jQuery: 4.0.0-pre
      Terser: 5.27.0

Steps to Reproduce

(Attached a code sample or just create a new Stencil project following the Getting Started docs for it and import the browser agent) test-newrelic.zip

After unzipping the code sample, run:

• yarn (or npm i) to install dependencies
• yarn build or (npm run build) to build the app.

When building, you will see:

[ WARN  ]  Bundling Warning UNRESOLVED_IMPORT
           '@newrelic/browser-agent/loaders/micro-agent' is imported by src\components\my-component\my-component.tsx,
           but could not be resolved – treating it as an external dependency

Additionally, you can start the app with yarn start or npm start. If you start it and load the URL of the page, you will see:

TypeError: Failed to resolve module specifier "@newrelic/browser-agent/loaders/micro-agent". Relative references must start with either "/", "./", or "../".

Code Reproduction URL

https://github.com/OuranosSkia/test-newrelic

Additional Information

No response

[rwaskiewicz]

Thanks! I've verified something isn't right here and have ingested it into our internal backlog for someone to take a closer look

[OuranosSkia]

Circling back on this, the newrelic team also did a little investigating and believe this issue is likely related to #3605. Do you know if there is an ETA on when that feature request will be implemented?

[rwaskiewicz]

That issue is going to require a major version release of Stencil, due to breaking changes in the rollup library that may affect Stencil users. I don't have an exact timeline, other than sometime later year.

[OuranosSkia]

Makes sense. In the meantime, the newrelic team found a temporary workaround in case others run into this issue. Changing the import from @newrelic/browser-agent/... to @newrelic/browser-agent/src/... allows Stencil to properly find and rollup the dependency (though I understand it's not a good best practice to import the src directory of a module)

[adampasc]

Coming back to this after some time, is it still on the agenda? There is a vaild use case for newrelic micro-agents in combination with microfrontends based on stencil. I can confirm the workaround to import from src works in our application, but it leads to more workarounds, e.g. compilation errors while running tests and it can also negatively effect bundle sizes.