How to tell TypeScript about browser environment variables? #3004

janhesters · 2022-04-27T20:40:32Z

janhesters
Apr 27, 2022

I'm using TypeScript for my Remix app.

I'm following the tutorial on how to use browser environment variables.

type EnvironmentVariables = {
  MAGIC_PUBLISHABLE_KEY?: string;
 };

type LoaderData = {
  ENV: EnvironmentVariables;
};

export const loader: LoaderFunction = () =>
  json<LoaderData>({
    ENV: {
      MAGIC_PUBLISHABLE_KEY: process.env.MAGIC_PUBLISHABLE_KEY,
    },
  });

export default function App() {
  const data = useLoaderData<LoaderData>();

  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <script
          dangerouslySetInnerHTML={{
            __html: `window.ENV = ${JSON.stringify(data.ENV)}`,
          }}
        />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}

When I now try to use those variables:

const magic = new Magic(window.ENV.MAGIC_PUBLISHABLE_KEY);

But TypeScript yells saying:

Property 'ENV' does not exist on type 'Window & typeof globalThis'.

How can I tell TypeScript about window.ENV and that it has EnvironmentVariables as the types?

Answered by kiliman

Apr 27, 2022

// entry.server.tsx
export type EnvironmentVariables = {
  MAGIC_PUBLISHABLE_KEY?: string
}

// entry.client.tsx
import type { EnvironmentVariables } from './entry.server'

declare global {
  var ENV: EnvironmentVariables
}

console.log(window.ENV.MAGIC_PUBLISHABLE_KEY)

hydrate(<RemixBrowser />, document)

View full answer

kiliman · 2022-04-27T22:26:29Z

kiliman
Apr 27, 2022
Maintainer

// entry.server.tsx
export type EnvironmentVariables = {
  MAGIC_PUBLISHABLE_KEY?: string
}

// entry.client.tsx
import type { EnvironmentVariables } from './entry.server'

declare global {
  var ENV: EnvironmentVariables
}

console.log(window.ENV.MAGIC_PUBLISHABLE_KEY)

hydrate(<RemixBrowser />, document)

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

How to tell TypeScript about browser environment variables? #3004

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

How to tell TypeScript about browser environment variables? #3004

Uh oh!

janhesters Apr 27, 2022

Replies: 1 comment

Uh oh!

kiliman Apr 27, 2022 Maintainer

janhesters
Apr 27, 2022

kiliman
Apr 27, 2022
Maintainer