Cloudflare Developers•7mo ago

Env Vars in Worker

Hi, I am having an issue using an environment variable in my Worker code. I have set the environment variable in my Worker's dashboard, and am trying to access it in my Worker JS code, but it won't work. When I console log the env var it either shows up as 'Null' or 'Cannot read properties of undefined'. I have tried to simplify my code to see if I can pinpoint the issue, but am not sure what I'm doing wrong. Is it necessary to use a Wrangler file, or am I implementing it incorrectly?

addEventListener('fetch', event => {
    event.respondWith(handleRequest(event));
  });
  
  async function handleRequest(event) {
    const { env } = event;
    
    // Access the environment variable
    const myEnvVar = env.MAILCHIMP_API_KEY;
  
    // Log the environment variable
    console.log(

MY_ENV_VAR: ${myEnvVar}

);
  
    // Respond with a simple message
    return new Response(

Environment variable MAILCHIMP_API_KEY: ${myEnvVar}

, {
      headers: { 'Content-Type': 'text/plain' },
    });
  }

8 Replies

Hello, I’m Allie!•7mo ago

Try

export default {
  fetch(req, env) {
    const myEnvVar = env.MAILCHIMP_API_KEY;
  
    // Log the environment variable
    console.log(MY_ENV_VAR: ${myEnvVar});
  
    // Respond with a simple message
    return new Response(`Environment variable MAILCHIMP_API_KEY: ${myEnvVar}`, {
      headers: { 'Content-Type': 'text/plain' },
    });
  }
}

export default {
  fetch(req, env) {
    const myEnvVar = env.MAILCHIMP_API_KEY;
  
    // Log the environment variable
    console.log(MY_ENV_VAR: ${myEnvVar});
  
    // Respond with a simple message
    return new Response(`Environment variable MAILCHIMP_API_KEY: ${myEnvVar}`, {
      headers: { 'Content-Type': 'text/plain' },
    });
  }
}

michelleOP•7mo ago

I am new to Cloudflare so forgive me if this is obvious, but whenever I use 'export default' in my worker.js file it gives me this error: "Uncaught SyntaxError: Unexpected token 'export' at worker.js:1 (Code: 10021)" I can't figure out what I am missing, because in all their Worker documentation code examples they use examples with 'export default'.

Hello, I’m Allie!•7mo ago

Are you using the dashboard editor?

michelleOP•7mo ago

Yes Also using the dashboard to set the environment variables

Hello, I’m Allie!•7mo ago

Try creating a new Worker. It should look like this:

/**
 * Welcome to Cloudflare Workers! This is your first worker.
 *
 * - Run "npm run dev" in your terminal to start a development server
 * - Open a browser tab at http://localhost:8787/ to see your worker in action
 * - Run "npm run deploy" to publish your worker
 *
 * Learn more at https://developers.cloudflare.com/workers/
 */

export default {
  async fetch(request, env, ctx) {
    return new Response('Hello World!');
  },
};

/**
 * Welcome to Cloudflare Workers! This is your first worker.
 *
 * - Run "npm run dev" in your terminal to start a development server
 * - Open a browser tab at http://localhost:8787/ to see your worker in action
 * - Run "npm run deploy" to publish your worker
 *
 * Learn more at https://developers.cloudflare.com/workers/
 */

export default {
  async fetch(request, env, ctx) {
    return new Response('Hello World!');
  },
};

Link: https://dash.cloudflare.com/?to=/:account/workers-and-pages/create/workers/new

michelleOP•7mo ago

Trying this now! Why do you think the export isn't working with my current Worker though?

Hello, I’m Allie!•7mo ago

I'm not sure? I just wanted to try this to make sure it isn't across your entire account it is broken

michelleOP•7mo ago

Thank you for your help! I found the issue (in case anyone stumbles upon this thread later). It seems that my Worker was a 'Service Worker' but 'ES Modules' are the new and preferred Workers format. I don't know if there is a way to toggle this in the dashboard, but there seems to be a way to toggle it in wrangler files. Using the Service Worker version, env vars can be called directly (without the env. prefix). This article discusses it in more detail: https://developers.cloudflare.com/workers/reference/migrate-to-module-workers/

Cloudflare Docs

Migrate from Service Workers to ES Modules · Cloudflare Workers docs

Write your Worker code in ES modules syntax for an optimized experience.

Gaming

Programming

Env Vars in Worker