Is there a way to inject 'cmd' into the browser for Sentry (@sentry/nextjs package) by using a personalized webpack setup in Next.js?

My package json includes the following dependencies:

"webpack": "5.58.1",
"@sentry/nextjs": "6.13.3",
"typescript": "4.0.5",
"next": "11.0.1",

After running next build without errors, I proceed to run next dev and check http://localhost:3000/ in my browser.

However, the browser console shows this error:

Uncaught TypeError: Cannot read properties of undefined (reading 'cwd')
    at eval (VM244 parsers.js:42)
    // More error logs here...

To try and resolve this, I have updated my next.config.js with a custom webpack configuration snippet:

config.resolve.fallback =  {
        "fs": false,
        "os": false,
        "path": false,
        // Other fallback values...
      };

I also attempted installing 

"process": "0.11.10"
and added a plugin to webpack config as follows:

plugins: [
        new webpack.ProvidePlugin({
            process: 'process/browser',
        })
    ],

Unfortunately, these solutions did not work for me. Any suggestions on how to fix this runtime TypeError?

typescriptwebpacknext.jssentry

Answer №1

I needed to make the following changes:

plugins: [
        new webpack.ProvidePlugin({
            'global.process': 'process/browser',
        })
    ],

and exclude "process":false from

config.resolve.fallback =  {
        "fs": false,
        "os": false,
        "path": false,
        "domain": false,
        "http": false,
        "https": false,
        "tty": false,
        "stream": false,
        "child_process": false,
        "process": false,
      };

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

react Concealing the Card upon clicking a different location

Utilizing a combination of React and TypeScript, this component allows for the card to be toggled between shown and hidden states upon clicking on the specified div tag. However, there is a need to ensure that the card is hidden even if another area outs ...

reactjstypescript

Something went wrong trying to retrieve the compiled source code of https://deno.land/[email protected]/path/mod.ts. It seems the system is unable to locate the specified path. (os error 3)

Upon executing my main.ts script using deno, I encounter the following error message: error: Failed to retrieve compiled source code from https://deno.land/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bfcccbdbff8f918a86918f"& ...

typescriptejsdeno

transform JSON structure into an array

Is it possible to convert an interface class and JSON file into a list or array in order to work on it? For example, extracting the Racename from each object in the JSON file and storing it in a list/array. Here is the interface structure: interface IRunn ...

javascriptangularjsjsontypescript

Ways to retrieve class variables within a callback in Typescript

Here is the code I'm currently working with: import {Page} from 'ionic-angular'; import {BLE} from 'ionic-native'; @Page({ templateUrl: 'build/pages/list/list.html' }) export class ListPage { devices: Array<{nam ...

javascripttypescript

What causes an error when the App is enclosed within a Provider component?

What is causing the error when wrapping the App in Provider? Are there any additional changes or additions needed? Error: "could not find react-redux context value; please ensure the component is wrapped in a @Provider@" import React from ' ...

reactjstypescriptreact-testing-library

The functions that have been imported are not defined

I encountered a Error in created hook: "TypeError: _api__WEBPACK_IMPORTED_MODULE_0__.default.$_playerApi_getPlayers is not a function" issue while using Webpack through Vue CLI on my webpage. Below is the structure of my project directory: . + main.js + ...

javascriptvue.jswebpack

A guide on implementing JSON data projection with TypeScript

{ "ClaimType": ["The 'Claim Type' should have a minimum length of 4 characters. You have only entered 2 characters."], "ClaimValue": ["The 'Claim Value' should have a minimum length of 4 characters. You have only entered 1 chara ...

angulartypescript

Error: Tried to modify a property that is read-only while using the useRef() hook in React Native with Typescript

I'm facing an issue while attempting to utilize a useRef hook for a scrollview and pan gesture handler to share a common ref. Upon initializing the useRef() hook and passing it to both components, I encounter an error that states: TypeError: Attempte ...

javascripttypescriptreact-nativereact-hooksuse-ref

Unable to locate the module 'next' or its associated type declarations

Encountering the error message Cannot find module '' or its corresponding type declarations. when trying to import modules in a Next.js project. This issue occurs with every single import. View Preview Yarn version: 3.1.0-rc.2 Next version: 1 ...

reactjstypescriptnext.jsyarnpkgtsconfig

Troubleshooting connectivity issues between Entities in microORM and Next.js

While trying to run my Next.js application in typescript, I encountered the following error: Error - ReferenceError: Cannot access 'Member' before initialization After consulting the documentation at https://mikro-orm.io/docs/relationships#relat ...

typescriptnext.jsentitiesmicro-orm

Why is it so difficult for the TypeScript compiler to recognize that my variables are not undefined?

Here is the code snippet in question: function test(a: number | undefined, b: number | undefined) { if (!a && !b) { console.log('Neither are present'); return; } if (!b && !!a) { console.log('b is not present, we ...

typescript

Setting up a hostname for the next/image component

Recently, I attempted to enhance my NextJS application by implementing <Image /> from next/image. The images I am using are stored remotely. To make remote images functional, it appears that I need to include my domain in the next.config.js. Below i ...

node.jsnext.jsnextjs-image

Utilizing a single access token for seamless authentication across various API endpoints

My current project involves the development of a react/Next.js application that repeatedly encounters issues with expired access tokens for subsequent calls following the initial one. Within my project, I have two distinct files. The first file is respons ...

reactjsnext.jsspotify

Issues with relocating function during the NgOnInit lifecycle hook in an Angular 2 application

Currently, I am facing an issue with my Angular 2 app where the data sometimes lags in populating, causing a page component to load before the information is ready to display. When this happens, I can manually refresh the page for the data to appear correc ...

javascriptangulartypescript

What is causing ESLint to point out the issue with the @inheritdoc tag?

My code in ESLint is throwing an error about a missing JSDoc return declaration, even though I have included an @inheritdoc tag there: Here is the section from the interface I am inheriting from: export interface L2BlockSource { /** * Gets the sync s ...

typescripteslintjsdoc

Issue with Nginx causing 404 errors on NextJs API routes

I encountered a problem with my NextJs API returning a 404 error during a page reload in production when executed from getInitialProps. The error message in my PM2 logs indicated that the 404 not found response was coming from Nginx. It appears that NGIN ...

nginxnext.js

Tips for creating a page component in Next.js using props?

I've encountered an issue while trying to properly annotate the parameters of the Home function component. My initial attempt was to use: { events }: { events: Event[] }, but TypeScript is throwing an error, stating that Property 'events' do ...

reactjstypescriptnext.js

JS implementing a listener to modify a Google Map from a separate class

Currently, I am in the process of migrating my Google Map functionality from ionic-native to JavaScript. I am facing an issue while attempting to modify the click listener of my map from a separate class. The problem seems to be related to property errors. ...

javascriptangulartypescriptionic2

What is the proper way to compare enum values using the greater than operator?

Here is an example enum: enum Status { inactive = -1, active = 0, pending = 1, processing = 2, completed = 3, } I am trying to compare values using the greater than operator in a condition. However, the current comparison always results in false ...

typescriptenumscomparison

Error importing Firestore in Firebase Cloud Function

As I work on my cloud function, Firebase Firestore gets automatically imported in the following way: import * as functions from 'firebase-functions'; import { QuerySnapshot } from '@google-cloud/firestore'; const admin = require(&ap ...

typescriptfirebasegoogle-cloud-firestoregoogle-cloud-functions