React App: Module not found: Can't resolve '@newrelic/browser-agent/loaders/browser-agent'

[vinaykumar515]

Node: v18.20.3 Npm: 10.7.0 Yarn:1.22.22 Browser: Chrome OS: Windows @newrelic/browser-agent": "^1.260.1",

I have taken this resource as reference and implemented same as mentioned, I have installed node module using yarn add command, I can see the node module under node_modules and the same has been added to package.json but still I am seeing the below error.

Error: ./src/App.js Module not found: Can't resolve '@newrelic/browser-agent/loaders/browser-agent' in 'D:\dev\projects\pas-express-ui\src'

I have this code in App.js

import { BrowserAgent } from '@newrelic/browser-agent/loaders/browser-agent'; --> Causing the error

if (process.env.REACT_APP_NR_DT_ENABLED === 'true') { const nrConfiguration = { init: JSON.parse(process.env.REACT_APP_NR_DT_INIT), info: JSON.parse(process.env.REACT_APP_NR_DT_INFO), loader_config: JSON.parse(process.env.REACT_APP_NR_DT_LOADER_CONFIG), } new BrowserAgent(nrConfiguration); }

I tried moving the code to index.js, index.html, and also tried loading the script from external js file but still the issue not resolved.

I even tried upgrading node to v20 and latest version

Any help is appreciated, thank you

[workato-integration[bot]]

https://new-relic.atlassian.net/browse/NR-282930

[patrickhousley]

Hi @vinaykumar515 . I am taking a look at this issue today. Can you provide a small reproduction project for this issue? We have test cases in the project to verify the import statements and those tests are still passing. Unfortunately the node/js ecosystem is a mess of tools and configurations and we may simply be missing something that is unique to your project.

[patrickhousley]

It looks like your are using a types package, are you using typescript for your JS project? What is your tsconfig?

[patrickhousley]

OK so most likely it is one or a combination of options in your tsconfig that is causing issues. Or maybe an outdated version of typescript. We use conditional exports in our package.json.

[patrickhousley]

You may also want to read through this typescript documentation.

[vinaykumar515]

ok, thank you. What could be the fix in my case? If I upgrade typescript to a latest version - will it work?

[patrickhousley]

I cannot say exactly what would fix your project. Every project is unique and the node/js tooling ecosystem is diverse. I would suggest reading through the typescript docs, node docs, and trying different settings. If you need further help, I really will need an exact replication project to poke at. For now, I am going to close this issue since it's a project specific configuration.

[vinaykumar515]

Will it be possible to connect with me for few mins on zoom? need your help to triage the issue.

[patrickhousley]

@vinaykumar515 Unfortunately, if you need that level of support, the best thing to do would be to reach out to the New Relic Support team. https://support.newrelic.com/s/

[vinaykumar515]

Hello @patrickhousley Can you confirm this please Does @newrelic/browser-agent node module supports react-scripts:4.0.3 version? I am seeing the issue with version 4.0.3 not seen in 5.0.1. If it supports version 4.0.3, I will look more into version conflicts and other potential causes around react-scripts. As I can use only version 4.0.3 in my project, do you suggest any fixes to make this work in version 4.0.3.

[patrickhousley]

We do not provide a statement of support for any third party libraries per se. Instead, our top design goal is to be as agnostic to the customer's code/site as possible and just work. However, we have noted some incompatibilities with some third party libraries in our docs.