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

Managing themes in Next.js using Clerk

I am currently working on a Next.js 13 application and integrating Clerk for authentication purposes. My main challenge right now is attempting to synchronize the theme of my app with the ClerkProvider component. In order to achieve this, I resorted to usi ...

next.jsnext.js13clerk

When deploying Next.js in a Kubernetes environment, the production build is unable to locate the necessary environment variables

I am facing an issue while deploying my Next.js app on a Kubernetes cluster as a deployment. The app includes axios HTTP requests that rely on an environment variable storing the value of a backend service. Locally everything works perfectly, here is what ...

kubernetesenvironment-variablesnext.js

NextJs API endpoint that returns a response object without the keys 'message' or 'body' included

In my NextJs application, Users are able to input data into form fields and submit the Formik Form. The API route handles form submission for calculations, which must be done on the server side in this scenario. Everything is working smoothly except for ...

reactjsnext.jsformik

How exactly does the NextAuth User Password implementation function?

I am currently working on implementing user authentication using NextAuth with email only. My goal is to have users register an account, receive an account verification email, and then successfully register. It seems that using NextAuth would be the most c ...

next.jsnext-auth

Passing properties from the parent component to the child component in Vue3JS using TypeScript

Today marks my inaugural experience with VueJS, as we delve into a class project utilizing TypeScript. The task at hand is to transfer the attributes of the tabsData variable from the parent component (the view) to the child (the view component). Allow me ...

javascripttypescriptvue.jsvuejs3

show additional worth on the console

Just starting out with JavaScript. Trying to display additional values in the console. Uncertain about how to access add-ons. Can anyone help me troubleshoot? Here is my code snippet below: https://jsfiddle.net/6f8upe80/ private sports: any = { ...

javascriptjqueryhtmlangularjstypescript

The type 'myInterface' cannot be assigned to the type 'NgIterable<any> | null | undefined' in Angular

I am facing an issue that is causing confusion for me. I have a JSON data and I created an interface for it, but when I try to iterate through it, I encounter an error in my HTML. The structure of the JSON file seems quite complex to me. Thank you for yo ...

javascriptangulartypescript

How can a server component be rendered conditionally based on the state set in the client component?

Currently, I am working on implementing a tailwinds css template sidebar that updates the main div with components based on the active sidebar tab. To achieve this functionality, I need to utilize state to determine which sidebar tab is currently active. I ...

reactjsnext.jsreact-server-components

What could be causing the HTTP response Array length in Angular to be undefined?

Currently, I am facing an issue while retrieving lobby data from a Spring Boot API to display it in my Angular frontend. After fetching the data and mapping it into an object array, I encountered a problem where the length of the array turned out to be und ...

arraysjsonangulartypescripthttp

What causes me to create components with incorrect paths?

Can someone assist me with creating a new component in the dynamic-print folder instead of it being created in the app? Thank you ...

angulartypescriptpowershellcommand-line

selectize.js typescript: Unable to access values of an undefined object (reading '0')

I've been working on incorporating selectize.js into my project using webpack and typescript. After installing selectize.js and the necessary types, I added the following to my code: yarn add @selectize/selectize yarn add @types/select2 Within my c ...

javascripttypescriptwebpackconfigurationselectize.js

Labeling src library files with namespaces

I have developed a ReactJS website that interacts with a library called analyzejs which was created in another programming language. While I am able to call functions from this library, I do not have much flexibility to modify its contents. Up until now, ...

javascriptreactjstypescriptnamespacestype-declaration

When using ngx-slider in Angular, it unexpectedly fires off when scrolling on mobile devices

I am currently developing a survey application that utilizes ngx-sliders. However, I have encountered an issue on mobile devices where users unintentionally trigger the slider while scrolling through rows of slider questions, resulting in unintended change ...

angulartypescriptslider

What causes TypeScript to be unable to locate declared constants?

I am facing an issue with the following simple code snippet: const getMethod = 'get'; const postMethod = 'post'; export type RequestMethod = getMethod | postMethod; When I try this code in TypeScript Playground, it shows an error sta ...

typescript

Error: The reference property 'refs' is undefined and cannot be read - Next.js and React Application

Here is my code for the index page file, located at /pages/index.js import { showFlyout, Flyout } from '../components/flyout' export default class Home extends React.Component { constructor(props) { super(props); this.state = {}; } ...

javascriptreactjsnext.jsreact-dom

Tips for constructing node.js projects using local versions of the dependencies?

Recently, I've been tackling a rather intricate node.js project (find it at https://github.com/edrlab/thorium-reader/) while trying to incorporate local versions of certain dependencies. Surprisingly, I can successfully build and execute the project ...

node.jstypescriptnpm

The node version in VS Code is outdated compared to the node version installed on my computer

While working on a TypeScript project, I encountered an issue when running "tsc fileName.ts" which resulted in the error message "Accessors are only available when targeting ECMAScript 5 and higher." To resolve this, I found that using "tsc -t es5 fileName ...

node.jstypescriptvisual-studio-code

Exploring the filter method in arrays to selectively print specific values of an object

const array = [ { value: "Value one", label: "Value at one" }, { value: "Value 2", label: "Value at 2" }, { value: "" , label: "Value at 3" } ...

javascriptarraysreactjstypescriptobject

Specify the dependencies in the package.json file to ensure that the React package designed for React v17 is compatible with React v18 as well

Recently, I developed an npm package using React v17.0.2. The structure of the package.json file is as follows: { "name": "shoe-store", "version": "0.1.0", "private": true, "dependencies": ...

javascriptreactjstypescriptreact-nativenpm-package

After verifying the variable is an Array type, it is ideal to utilize the .forEach()

Within my generic functional component, I have the following code snippet: if(Array.isArray(entry[key as keyof T]) { entry[key as keyof T].forEach((item: T) => { ... }); } The variable key is a string that dynamically changes. However, when attempt ...

typescript