"Property env must be of type ProcessEnv" react-app.d.ts [typescript]

[dfee]

Is this a bug report?

yes.

Did you try recovering your dependencies?

no.

Which terms did you search for in User Guide?

typescript.

Environment

System:
OS: macOS 10.14
CPU: x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
Binaries:
Node: 10.9.0 - /usr/local/bin/node
npm: 6.4.1 - /usr/local/bin/npm
Browsers:
Chrome: 70.0.3538.77
Firefox: 63.0
Safari: 12.0
npmPackages:
@storybook/react: ^4.0.0-rc.3 => 4.0.0-rc.6
@types/react: ^16.4.18 => 16.4.18
@types/react-dom: ^16.0.9 => 16.0.9
react: ^16.5.2 => 16.6.0
react-dom: ^16.5.2 => 16.6.0
react-scripts: ^2.0.6-next.c662dfb0 => 2.0.6-next.c662dfb0
npmGlobalPackages:
create-react-app: 2.0.4

Steps to Reproduce

1. Use typescript with create-react-app.
2. Inspect react-app.d.ts
3. Observe the following error:

[ts] Subsequent property declarations must have the same type.  Property 'env' must be of type 'ProcessEnv', but here has type '{ [key: string]: string | undefined; NODE_ENV: "development" | "production" | "test"; PUBLIC_URL: string; }'.
(property) NodeJS.Process.env: ProcessEnv

Expected Behavior

I assume that env should extend ProcessEnv

Actual Behavior

[ts] Subsequent property declarations must have the same type.  Property 'env' must be of type 'ProcessEnv', but here has type '{ [key: string]: string | undefined; NODE_ENV: "development" | "production" | "test"; PUBLIC_URL: string; }'.
(property) NodeJS.Process.env: ProcessEnv

[yordis]

@dfee when is this happening? Just right after you install the project?

[dfee]

@yordis I actually just migrated a small app from react-scripts-ts, but here's my tsconfig if it's helpful:

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "importHelpers": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "lib": ["es6", "dom"],
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noUnusedLocals": true,
    "outDir": "build/dist",
    "resolveJsonModule": true,
    "rootDirs": ["src", "stories", "functions"],
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "target": "es5"
  },
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts"
  ],
  "include": ["src"]
}

[yordis]

This is maybe the issue

create-react-app/packages/react-scripts/config/react-app.d.ts

Lines 5 to 13 in c662dfb

	declare namespace NodeJS {
	interface Process {
	env: {
	[key: string]: string | undefined;
	NODE_ENV: 'development' | 'production' | 'test';
	PUBLIC_URL: string;
	};
	}
	}

So do me a favor on your local setup.

Do something as follow on your file

declare namespace NodeJS {
  interface ReactEnv extends ProcessEnv {
      NODE_ENV: 'development' | 'production' | 'test';
      PUBLIC_URL: string;
  }

  interface Process {
    env: ReactEnv;
  }
}

I am not sure if this will work but try it out.

[dfee]

I'm getting this error:

[ts] Subsequent property declarations must have the same type.  Property 'env' must be of type 'ProcessEnv', but here has type 'ReactEnv'.
(property) NodeJS.Process.env: ProcessEnv

And here's the modified react-app.d.ts file.

// Do not edit this file. It's replaced every time you launch a toolbox action.
// If you need to add additional declarations, please do so in a new file.

declare namespace NodeJS {
  interface ReactEnv extends ProcessEnv {
    NODE_ENV: 'development' | 'production' | 'test';
    PUBLIC_URL: string;
  }

  interface Process {
    env: ReactEnv;
  }
}

declare module "*.bmp" {
  const src: string;
  export default src;
}

declare module "*.gif" {
  const src: string;
  export default src;
}

declare module "*.jpg" {
  const src: string;
  export default src;
}

declare module "*.jpeg" {
  const src: string;
  export default src;
}

declare module "*.png" {
  const src: string;
  export default src;
}

declare module "*.svg" {
  import * as React from "react";

  export const ReactComponent: React.SFC<React.SVGProps<SVGSVGElement>>;

  const src: string;
  export default src;
}

declare module "*.module.css" {
  const classes: { [key: string]: string };
  export default classes;
}

declare module "*.module.scss" {
  const classes: { [key: string]: string };
  export default classes;
}

declare module "*.module.sass" {
  const classes: { [key: string]: string };
  export default classes;
}

[yordis]

The issue that the typescript the original type declaration is NodeJS.Process.env: ProcessEnv but I am not sure how to fix it if this didn't work right now.

I am sorry I couldn't be more useful right now.

[brunolemos]

I couldn't reproduce the error, but based on the error message please try the following:

declare namespace NodeJS {
  interface ProcessEnv {
    [key: string]: string | undefined
    NODE_ENV: 'development' | 'production' | 'test'
    PUBLIC_URL: string
  }
}

Let me know if it works.

Also please give more details, which editor are you using? Did it show any error on yarn start or only on your editor?

[Grmiade]

For your information @brunolemos

declare namespace NodeJS {
  interface ProcessEnv {
    NODE_ENV: 'development' | 'production' | 'test'
    PUBLIC_URL: string
  }
}

in react-app.d.ts is enough I think. Doesn't need to re-declare the [key: string]: string | undefined, it inherits from the initial ProccessEnv ;)
#Nitpick