Theo's Typesafe Cult•2y ago

Error: npm lint not seeing env type

I converted my existing project over to use the same template as ct3a. However, when I run npm run lint it throws a @typescript-eslint/no-unsafe-member-access error for every place in my codebase where I import { env } from "~/env.mjs", saying env is an any type. I can't seem to figure out what is causing this, since vscode still shows the env type when I hover over the import and I've double checked that my eslintrc.cjs and tsconfig.json are setup correctly.

8 Replies

Alejo•2y ago

Does your tsconfig.json's "include" field look like this?

//...
  "include": [
    ".eslintrc.cjs",
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "**/*.cjs",
    "**/*.mjs"
  ],
//...

//...
  "include": [
    ".eslintrc.cjs",
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "**/*.cjs",
    "**/*.mjs"
  ],
//...

stillmotionOP•2y ago

Yeah it's exactly that. I've copy pasted it from the t3ca repo

Alejo•2y ago

Hm, do you have more than one .eslintrc file? by default most projects have .eslinrc.json whereas ct3a uses a .cjs file

stillmotionOP•2y ago

just the one .cjs file The fact VSCode can see the type, but eslint can't see it is a sign eslint isn't configured correctly

Alejo•2y ago

Ah, I thought this error was when you ran eslint, not a VSCode-only error Seems like VSCode eslint extension may be loading default configs instead of the proper .eslintrc file

stillmotionOP•2y ago

I cleared my next cache and the error finally started to show inline in vscode. However, when I hover over the env import, it still shows the valid type. Running npm lint still errors. Here's an example output:

./src/server/utils/r2.ts
10:26  Error: Invalid type "any" of template literal expression.  @typescript-eslint/restrict-template-expressions
10:26  Error: Unsafe member access .R2_ACCOUNT_ID on an `any` value.  @typescript-eslint/no-unsafe-member-access
12:7  Error: Unsafe assignment of an `any` value.  @typescript-eslint/no-unsafe-assignment
12:20  Error: Unsafe member access .R2_ACCESS_KEY_ID on an `any` value.  @typescript-eslint/no-unsafe-member-access
13:7  Error: Unsafe assignment of an `any` value.  @typescript-eslint/no-unsafe-assignment
13:24  Error: Unsafe member access .R2_SECRET_ACCESS_KEY on an `any` value.  @typescript-eslint/no-unsafe-member-access

./src/server/utils/r2.ts
10:26  Error: Invalid type "any" of template literal expression.  @typescript-eslint/restrict-template-expressions
10:26  Error: Unsafe member access .R2_ACCOUNT_ID on an `any` value.  @typescript-eslint/no-unsafe-member-access
12:7  Error: Unsafe assignment of an `any` value.  @typescript-eslint/no-unsafe-assignment
12:20  Error: Unsafe member access .R2_ACCESS_KEY_ID on an `any` value.  @typescript-eslint/no-unsafe-member-access
13:7  Error: Unsafe assignment of an `any` value.  @typescript-eslint/no-unsafe-assignment
13:24  Error: Unsafe member access .R2_SECRET_ACCESS_KEY on an `any` value.  @typescript-eslint/no-unsafe-member-access

import { env } from "~/env.mjs"

export const getR2Client = () => {
  return new S3Client({
    region: "auto",
    endpoint: `https://${env.R2_ACCOUNT_ID}.r2.cloudflarestorage.com`,
    credentials: {
      accessKeyId: env.R2_ACCESS_KEY_ID || "",
      secretAccessKey: env.R2_SECRET_ACCESS_KEY || "",
    },
  })
}

import { env } from "~/env.mjs"

export const getR2Client = () => {
  return new S3Client({
    region: "auto",
    endpoint: `https://${env.R2_ACCOUNT_ID}.r2.cloudflarestorage.com`,
    credentials: {
      accessKeyId: env.R2_ACCESS_KEY_ID || "",
      secretAccessKey: env.R2_SECRET_ACCESS_KEY || "",
    },
  })
}

And here's an example of my env.mjs

import { z } from "zod"
import { createEnv } from "@t3-oss/env-nextjs"

export const env = createEnv({
  /**
   * Specify your server-side environment variables schema here. This way you can ensure the app
   * isn't built with invalid env vars.
   */
  server: {
    R2_ACCOUNT_ID: z.string().min(1),
    R2_ACCESS_KEY_ID: z.string().min(1),
    R2_SECRET_ACCESS_KEY: z.string().min(1),
  },

  /**
   * Specify your client-side environment variables schema here. This way you can ensure the app
   * isn't built with invalid env vars. To expose them to the client, prefix them with
   * `NEXT_PUBLIC_`.
   */
  client: {
  },

  /**
   * You can't destruct `process.env` as a regular object in the Next.js edge runtimes (e.g.
   * middlewares) or client-side so we need to destruct manually.
   */
  runtimeEnv: {
    R2_ACCOUNT_ID: process.env.R2_ACCOUNT_ID,
    R2_ACCESS_KEY_ID: process.env.R2_ACCESS_KEY_ID,
    R2_SECRET_ACCESS_KEY: process.env.R2_SECRET_ACCESS_KEY,
  },
})

import { z } from "zod"
import { createEnv } from "@t3-oss/env-nextjs"

export const env = createEnv({
  /**
   * Specify your server-side environment variables schema here. This way you can ensure the app
   * isn't built with invalid env vars.
   */
  server: {
    R2_ACCOUNT_ID: z.string().min(1),
    R2_ACCESS_KEY_ID: z.string().min(1),
    R2_SECRET_ACCESS_KEY: z.string().min(1),
  },

  /**
   * Specify your client-side environment variables schema here. This way you can ensure the app
   * isn't built with invalid env vars. To expose them to the client, prefix them with
   * `NEXT_PUBLIC_`.
   */
  client: {
  },

  /**
   * You can't destruct `process.env` as a regular object in the Next.js edge runtimes (e.g.
   * middlewares) or client-side so we need to destruct manually.
   */
  runtimeEnv: {
    R2_ACCOUNT_ID: process.env.R2_ACCOUNT_ID,
    R2_ACCESS_KEY_ID: process.env.R2_ACCESS_KEY_ID,
    R2_SECRET_ACCESS_KEY: process.env.R2_SECRET_ACCESS_KEY,
  },
})

Nothing out of the ordinary, so i'm assuming it's a config issue

Alejo•2y ago

Yeah, seems like like an odd config issue, are you maybe on an old version of node or typescript or something?

stillmotionOP•2y ago

yeah i'll check I've narrowed it down to commenting out this part of the .eslintrc.cjs:

  overrides: [
    {
      extends: ["plugin:@typescript-eslint/recommended-requiring-type-checking"],
      files: ["*.ts", "*.tsx"],
      parserOptions: {
        project: path.join(__dirname, "tsconfig.json"),
      },
    },
  ],

  overrides: [
    {
      extends: ["plugin:@typescript-eslint/recommended-requiring-type-checking"],
      files: ["*.ts", "*.tsx"],
      parserOptions: {
        project: path.join(__dirname, "tsconfig.json"),
      },
    },
  ],

Gaming

Programming

Error: npm lint not seeing env type