4

I'm updating my project to use turborepo and I'm encountering a strange behavior with turbo/no-undeclared-env-vars.

In the starter project I added a hello constant from the environment variables:

export default function Web() {
  const hello = process.env.HELLO;
  return (
    <div>
      <h1>{hello}</h1>
      <Button />
    </div>
  );
}

And when running npm run lint I get the expected error:

web:lint: ./pages/index.tsx
web:lint: 4:17  Error: $HELLO is not listed as a dependency in turbo.json  turbo/no-undeclared-env-vars

But when I add it to turbo.json and re-run npm run lint it still shows the error.

{
  "$schema": "https://turborepo.org/schema.json",
  "pipeline": {
    "build": {
      "dependsOn": ["^build", "$HELLO"],
      "outputs": ["dist/**", ".next/**"]
    },
    "lint": {
      "outputs": []
    },
    "dev": {
      "cache": false
    }
  }
}

It seems to be using the cache because if I remove the cache from apps/web/.next/.cache/.eslint and run it again it shows no error anymore.

It also works the other way. If I now remove the $HELLO from turbo.json and run npm run lint again it says there are not errors, while it should say that it is unlisted. Here as well, removing the cache manually shows it again but it seems to me that it should detect it automatically, no?

I also tried updating turbo.json not to use the cache during lint but that is also not helping:

{
  "$schema": "https://turborepo.org/schema.json",
  "pipeline": {
    "build": {
      "dependsOn": ["^build", "$HELLO"],
      "outputs": ["dist/**", ".next/**"]
    },
    "lint": {
      "outputs": [],
      "cache": false
    },
    "dev": {
      "cache": false
    }
  }
}

Any suggestions?

Thomas
  • 2,003
  • 18
  • 30

1 Answers1

5

In case you still need and answer or if anybody is like me and ended up here googling the issue, the solution was to add a new prop in the build object called env so your turbo.json would become

{
  "$schema": "https://turborepo.org/schema.json",
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/**", ".next/**"],
      "env": [
        "HELLO"
      ]

    },
    "lint": {
      "outputs": [],
      "cache": false
    },
    "dev": {
      "cache": false
    }
  }
}

note: no $ prefix needed.

When running turborepo on Vercel you also get some extra useful info like a codemod to fix your turbo.json file in your case by running

npx @turbo/codemod migrate-env-var-dependencies

in the root folder you'd get the right props in the json file.

One last thing, if you're using next and turborepo, your ENV vars, if they are needed in the frontend like your example, should be prefixed with NEXT_PUBLIC_ so in your case

const hello = process.env.NEXT_PUBLIC_HELLO;

with that change, turborepo will know that you're using that env var as part of a next project and the caching algorithm will behave accordingly

Matteo Hertel
  • 691
  • 2
  • 8
  • 18