I am trying to use an environmental variable defined in my local .env
file in one of my turbo packages, but it always comes up as undefined
. I am using Turbo to manage my monorepo. The app is build in Next.js/React/Typescript
.
My folder structure looks like this:
apps
--pages
----home.tsx // calling the Map component here
--...
--packages
----ui
------src
--------atoms
----------Map
------------Map.tsx // using the env variable here
----------...
--------...
------...
----...
--...
package.json
turbo.json
...
My turbo.json
file looks like this:
{
"$schema": "https://turbo.build/schema.json",
"globalDependencies": ["**/.env.*local", ".env"],
"globalEnv": ["NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN"],
"pipeline": {
"build": {
"dependsOn": ["^build"],
"outputs": ["dist/**", ".next/**"]
},
"dev": {
"env": ["NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN"],
"outputs": ["dist/**", ".next/**"],
"cache": false
},
"lint": {
"outputs": []
}
}
}
My top level package.json
, the one for whole monorepo, looks like this:
{
"name": "microforest",
"version": "0.0.0",
"private": true,
"workspaces": [
"apps/*",
"packages/*"
],
"scripts": {
"build": "dotenv -- turbo run build",
"dev": "dotenv -- turbo run dev",
"lint": "turbo run lint",
"format": "prettier --write \"**/*.{ts,tsx,md}\""
},
"devDependencies": {
"dotenv-cli": "^7.1.0",
"eslint-config-custom": "*",
"prettier": "latest",
"turbo": "latest"
},
"engines": {
"node": ">=14.0.0"
},
"packageManager": "npm@8.15.0"
}
My Map.tsx
component looks like this:
import React from "react";
import ReactMapGL from "react-map-gl";
export const Map: React.FC = () => {
return (
<ReactMapGL
mapboxApiAccessToken={process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN}
></ReactMapGL>
);
};
The process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN
variable always comes up as undefined
. I've read the Turbo docs and tried all sorts of suggestions, but couldn't get it to work. Any idea what it might be?