Next.js: Property 'browser' does not exist on type 'Process'.

[endigo]

How to solve this error in TypeScript?

[arunoda]

Could you provide more info and way to reproduce this.. So, the typescript devs here can help you better.
Please reopen when you have ^^^

[endigo]

I wrote this line in my code;

const isBrowser = process.browser;

then I'm run this command

yarn dev

throws that error.

$ concurrently 'tsc --watch' next
[1] > Using external babel configuration
[1] > location: "/Users/user12/Documents/projects/js/app.rentinub.v2/.babelrc"
[1] > Using "webpack" config function defined in next.config.js.
[0] src/component/Carousel.tsx(4,27): error TS2339: Property 'browser' does not exist on type 'Process'.

[arunoda]

There's no property called browser in the process object.

[arunoda]

You need to find some other way to find this is a browser of not?

[endigo]

I followed by this tutorial https://github.com/zeit/next.js/blob/dff20eae0137ee121c703733fbb87084a8cd86d3/examples/with-apollo/lib/initApollo.js#L6

[stipsan]

There's no property called browser in the process object.

It is defined by NextJS at some point as it's used to know wether the component is rendering in a NodeJS or browser environment. I have been struggling to make this work as well. It's not defined in @types/next and doing:

declare namespace NodeJS {
    export interface Process {
        browser: boolean
    }
}

Does not work.

[stipsan]

This works but is kinda ugly. I'm not an TS expert so I don't know how to make it work from a d.ts file nor how to make it work without erasing the other props or typechecks on process (my example below makes TS think that process have only one property, browser):

// @TODO find a better way to make it work
interface Process {
  browser: boolean
}
declare var process: Process

// enable devtools to play with the api
if(process.browser) {
  window.scrollIntoViewIfNeeded = scrollIntoViewIfNeeded
}

[sebnyberg]

Declarations in TypeScript files which do not contain any import or export statements at its root level are considered global.

So, you can extend the NodeJS.Process type by putting the following in e.g. global.d.ts:

declare namespace NodeJS {
  interface Process {
    browser: boolean;
  }
}

[sergiodxa]

@endigo @stipsan I think that process.browser is defined by webpack, I don't recommend you to rely on that. Instead you can do:

const isBrowser = typeof window !== 'undefined';

That will let you know if you're running on a browser.

[ghost]

But doesn’t Webpack do optimalizations based on browser.process? I can recall reading it somewhere, but I couldn’t find anything right now doing a Google search. The Next.js docs should document a “best practice” way of determining this as it must be a really common thing to do.

[maggo]

A quick refresher if anyone stumbles upon this:

To have custom declares globally available, you'll have to create a *.d.ts (eg declarations.d.ts) on the root level of your project. Then you can put declare rules in there, like custom module declarations or in this case

declare namespace NodeJS {
  interface Process {
    browser: boolean;
  }
}

[goughjo02]

this also works (process as any).browser

[gooqiao]

@maggo it is working fine.

[wouterds]

Personal preference: create a file process.d.ts in the @types folder in the root of your project. Use the contents @maggo provided earlier.

declare namespace NodeJS {
  interface Process {
    browser: boolean;
  }
}

Add the following to compilerOptions in tsconfig.json.

"typeRoots": [
  "node_modules/@types",
  "@types"
]

[timneutkens]

I'd highly recommend to use

if(typeof window !== 'undefined') {
  // the code
}

Without assigning to a variable. That way we tree shake away the code correctly.

[wouterds]

I'd highly recommend to use

if(typeof window !== 'undefined') {
  // the code
}

Without assigning to a variable. That way we tree shake away the code correctly.

Good to know, TIL!

[LinusU]

Unfortunately typeof window !== 'undefined' triggers the following error with TSLint 🤔

Expression is always false.