hackal Posts - Answer Overflow

hackal

Explore posts from servers

•Created by hackal on 4/28/2025 in #❓・help

Nuxt + Cloudflare Pages + Cloudflare Environments + Wrangler.json

Hi, I'm having issue with deploying to cloudflare pages. How can I specify which environment I use from wrangler.json? My wrangler json

/**
 * For more details on how to configure Wrangler, refer to:
 * https://developers.cloudflare.com/workers/wrangler/configuration/
 */
{
    "$schema": "node_modules/wrangler/config-schema.json",
    "name": "app-prod-us-*****",
    "main": "./.output/server/index.mjs",
    "compatibility_date": "2025-04-24",
    "assets": {
        "binding": "ASSETS",
        "directory": "./.output/public/"
    },
    "observability": {
        "enabled": true
    },
    "routes": [
        {
            "pattern": "app.*****.com",
            "custom_domain": true
        }
    ],
    "vars": {
        "NUXT_PUBLIC_BASE_URL": "https://us.api.*****.com",
        "NUXT_PUBLIC_COOKIE_DOMAIN": ".*****.com",
        "NUXT_PUBLIC_ENV": "production",
        "NUXT_PUBLIC_WS_BASE_URL": "wss://us.api.*****.com"
    },
    "env": {
        "prod-eu": {
            "routes": [
                {
                    "pattern": "eu.app.*****.com",
                    "custom_domain": true
                }
            ],
            "vars": {
                "NUXT_PUBLIC_BASE_URL": "https://eu.api.*****.com",
                "NUXT_PUBLIC_COOKIE_DOMAIN": ".*****.com",
                "NUXT_PUBLIC_ENV": "production",
                "NUXT_PUBLIC_WS_BASE_URL": "wss://eu.api.*****.com"
            }
        },
        "staging-us": {
            "routes": [
                {
                    "pattern": "develop.app.*****.com",
                    "custom_domain": true
                }
            ],
            "vars": {
                "NUXT_PUBLIC_BASE_URL": "https://staging.us.api.*****.com",
                "NUXT_PUBLIC_COOKIE_DOMAIN": ".*****.com",
                "NUXT_PUBLIC_ENV": "staging",
                "NUXT_PUBLIC_WS_BASE_URL": "wss://staging.us.api.*****.com"
            }
        },
        "staging-eu": {
            "routes": [
                {
                    "pattern": "staging.eu.app.*****.com",
                    "custom_domain": true
                }
            ]
        }
    }
}

/**
 * For more details on how to configure Wrangler, refer to:
 * https://developers.cloudflare.com/workers/wrangler/configuration/
 */
{
    "$schema": "node_modules/wrangler/config-schema.json",
    "name": "app-prod-us-*****",
    "main": "./.output/server/index.mjs",
    "compatibility_date": "2025-04-24",
    "assets": {
        "binding": "ASSETS",
        "directory": "./.output/public/"
    },
    "observability": {
        "enabled": true
    },
    "routes": [
        {
            "pattern": "app.*****.com",
            "custom_domain": true
        }
    ],
    "vars": {
        "NUXT_PUBLIC_BASE_URL": "https://us.api.*****.com",
        "NUXT_PUBLIC_COOKIE_DOMAIN": ".*****.com",
        "NUXT_PUBLIC_ENV": "production",
        "NUXT_PUBLIC_WS_BASE_URL": "wss://us.api.*****.com"
    },
    "env": {
        "prod-eu": {
            "routes": [
                {
                    "pattern": "eu.app.*****.com",
                    "custom_domain": true
                }
            ],
            "vars": {
                "NUXT_PUBLIC_BASE_URL": "https://eu.api.*****.com",
                "NUXT_PUBLIC_COOKIE_DOMAIN": ".*****.com",
                "NUXT_PUBLIC_ENV": "production",
                "NUXT_PUBLIC_WS_BASE_URL": "wss://eu.api.*****.com"
            }
        },
        "staging-us": {
            "routes": [
                {
                    "pattern": "develop.app.*****.com",
                    "custom_domain": true
                }
            ],
            "vars": {
                "NUXT_PUBLIC_BASE_URL": "https://staging.us.api.*****.com",
                "NUXT_PUBLIC_COOKIE_DOMAIN": ".*****.com",
                "NUXT_PUBLIC_ENV": "staging",
                "NUXT_PUBLIC_WS_BASE_URL": "wss://staging.us.api.*****.com"
            }
        },
        "staging-eu": {
            "routes": [
                {
                    "pattern": "staging.eu.app.*****.com",
                    "custom_domain": true
                }
            ]
        }
    }
}

My deploy command (I test locally)

nuxt build && wrangler deploy

nuxt build && wrangler deploy

I get this error

- Redirected configurations cannot include environments but the following have been found:
        - prod-eu
        - staging-us
        - staging-eu
  
  
      Such configurations are generated by tools, meaning that one of the tools
      your application is using is generating the incorrect configuration.
      Report this issue to the tool's author so that this can be fixed there.
    - You have specified the environment "staging-us", but are using a redirected configuration,
  produced by a build tool such as Vite.
      You need to set the environment in your build tool, rather than via Wrangler.
      For example, if you are using Vite, refer to these docs:
  https://developers.cloudflare.com/workers/vite-plugin/reference/cloudflare-environments/

- Redirected configurations cannot include environments but the following have been found:
        - prod-eu
        - staging-us
        - staging-eu
  
  
      Such configurations are generated by tools, meaning that one of the tools
      your application is using is generating the incorrect configuration.
      Report this issue to the tool's author so that this can be fixed there.
    - You have specified the environment "staging-us", but are using a redirected configuration,
  produced by a build tool such as Vite.
      You need to set the environment in your build tool, rather than via Wrangler.
      For example, if you are using Vite, refer to these docs:
  https://developers.cloudflare.com/workers/vite-plugin/reference/cloudflare-environments/

https://nuxt.com/deploy/cloudflare and https://nitro.build/deploy/providers/cloudflare have no mentions of environemnt except for --env flag which can be used for specifying enviromnent for the wrangler deploy command. Adding that flag makes no difference.

4 replies

NNuxt

•Created by hackal on 3/27/2025 in #❓・help

useFetch not updating data ref when new request is triggered.

This is my simplified version of composable

const projectCache = () => useState("projectCache", () => ref({}))

const useProject = async (projectId: Ref<string>) => {
  const localId = ref(unref(projectId));

  watch(projectId, (newId) => {
    if (projectCache().value[newId]) {
      // project already in cache, we can set localId immediately
      localId.value = newId;
    }
  })

  const {
    data,
    execute,
  } = useFetch(() => `/my/url/${projectId}`, { immediate: false })

  watch(data, (updated) => {
    // new data from api, update cache and set the ID
    projectCache().value[data.value.id] = data.value;
    localId.value = data.value.id;
  })

  // check if we have project in cache
  if (!projectCache().value[unref(projectId)]) {
    // cache miss, we make the request and save to cache
    await execute();
    if (data.value) {
      // add/update data in cache
      projectCache().value[data.value.id] = data.value
    }
  }

  return {
    // always return from cache
    project: computed(() => projectCache().value[unref(localId)])
  }
}

const projectCache = () => useState("projectCache", () => ref({}))

const useProject = async (projectId: Ref<string>) => {
  const localId = ref(unref(projectId));

  watch(projectId, (newId) => {
    if (projectCache().value[newId]) {
      // project already in cache, we can set localId immediately
      localId.value = newId;
    }
  })

  const {
    data,
    execute,
  } = useFetch(() => `/my/url/${projectId}`, { immediate: false })

  watch(data, (updated) => {
    // new data from api, update cache and set the ID
    projectCache().value[data.value.id] = data.value;
    localId.value = data.value.id;
  })

  // check if we have project in cache
  if (!projectCache().value[unref(projectId)]) {
    // cache miss, we make the request and save to cache
    await execute();
    if (data.value) {
      // add/update data in cache
      projectCache().value[data.value.id] = data.value
    }
  }

  return {
    // always return from cache
    project: computed(() => projectCache().value[unref(localId)])
  }
}

I have the following issue. I call the composable in two components and pass the same id (ref) as arg const { data } = await useProject(projectId) when the projectId changes I see that useFetch will fire two requests however watch(data, (updated) => { is called only in one instance. Why that could be?

19 replies

NNuxt

•Created by hackal on 3/12/2025 in #❓・help

Plugins not automatically typed

Hi, Having issues with automatically typing my plugins. Here is my plugin.

import type { FetchOptions } from "ofetch";
import { defineNuxtPlugin } from "nuxt/app";

export default defineNuxtPlugin(() => {
  const {
    public: { baseUrl },
  } = useRuntimeConfig();
  const { $refreshCredentials } = useNuxtApp();
  const stateAccessToken = useAccessToken();

  const setupAuthHeaders = (options: FetchOptions, token: string) => {
    const headers = (options.headers ||= {});
    if (Array.isArray(headers)) {
      headers.push(["Authorization", `Bearer ${token}`]);
    } else if (headers instanceof Headers) {
      headers.set("Authorization", `Bearer ${token}`);
    } else {
      headers.Authorization = `Bearer ${token}`;
    }
  };

  const api = $fetch.create({
    retryStatusCodes: [401],
    retry: 1,
    baseURL: baseUrl,
    onRequest(context) {
      if (stateAccessToken.value) {
        setupAuthHeaders(context.options, stateAccessToken.value);
      }
    },
    async onResponseError(context) {
      if (context.response?.status !== 401) return;
      const accessToken = await $refreshCredentials();
      if (accessToken === null) return;
      setupAuthHeaders(context.options, accessToken);
    },
  });

  const operatorAPI = (baseUrl: string) => {
    return $fetch.create({
      retryStatusCodes: [401],
      retry: 1,
      baseURL: baseUrl + "/api/operator",
      onRequest(context) {
        if (stateAccessToken.value) {
          setupAuthHeaders(context.options, stateAccessToken.value);
        }
      },
      async onResponseError(context) {
        if (context.response?.status !== 401) return;
        const accessToken = await $refreshCredentials();
        if (accessToken === null) return;
        setupAuthHeaders(context.options, accessToken);
      },
    });
  };

  const orgApi = (orgId: string) => {
    return $fetch.create({
      retryStatusCodes: [401],
      retry: 1,
      baseURL: `${baseUrl}/api/org/${orgId}`,
      onRequest(context) {
        if (stateAccessToken.value) {
          setupAuthHeaders(context.options, stateAccessToken.value);
        }
      },
      async onResponseError(context) {
        if (context.response?.status !== 401) return;
        const accessToken = await $refreshCredentials();
        if (accessToken === null) return;
        setupAuthHeaders(context.options, accessToken);
      },
    });
  };

  return {
    provide: {
      api,
      orgApi,
      operatorAPI,
    },
  };
});

import type { FetchOptions } from "ofetch";
import { defineNuxtPlugin } from "nuxt/app";

export default defineNuxtPlugin(() => {
  const {
    public: { baseUrl },
  } = useRuntimeConfig();
  const { $refreshCredentials } = useNuxtApp();
  const stateAccessToken = useAccessToken();

  const setupAuthHeaders = (options: FetchOptions, token: string) => {
    const headers = (options.headers ||= {});
    if (Array.isArray(headers)) {
      headers.push(["Authorization", `Bearer ${token}`]);
    } else if (headers instanceof Headers) {
      headers.set("Authorization", `Bearer ${token}`);
    } else {
      headers.Authorization = `Bearer ${token}`;
    }
  };

  const api = $fetch.create({
    retryStatusCodes: [401],
    retry: 1,
    baseURL: baseUrl,
    onRequest(context) {
      if (stateAccessToken.value) {
        setupAuthHeaders(context.options, stateAccessToken.value);
      }
    },
    async onResponseError(context) {
      if (context.response?.status !== 401) return;
      const accessToken = await $refreshCredentials();
      if (accessToken === null) return;
      setupAuthHeaders(context.options, accessToken);
    },
  });

  const operatorAPI = (baseUrl: string) => {
    return $fetch.create({
      retryStatusCodes: [401],
      retry: 1,
      baseURL: baseUrl + "/api/operator",
      onRequest(context) {
        if (stateAccessToken.value) {
          setupAuthHeaders(context.options, stateAccessToken.value);
        }
      },
      async onResponseError(context) {
        if (context.response?.status !== 401) return;
        const accessToken = await $refreshCredentials();
        if (accessToken === null) return;
        setupAuthHeaders(context.options, accessToken);
      },
    });
  };

  const orgApi = (orgId: string) => {
    return $fetch.create({
      retryStatusCodes: [401],
      retry: 1,
      baseURL: `${baseUrl}/api/org/${orgId}`,
      onRequest(context) {
        if (stateAccessToken.value) {
          setupAuthHeaders(context.options, stateAccessToken.value);
        }
      },
      async onResponseError(context) {
        if (context.response?.status !== 401) return;
        const accessToken = await $refreshCredentials();
        if (accessToken === null) return;
        setupAuthHeaders(context.options, accessToken);
      },
    });
  };

  return {
    provide: {
      api,
      orgApi,
      operatorAPI,
    },
  };
});

When I do full text search in my project folder I do not see any generated type for $api, $orgApi or $operatorAPI. Is there any other you need to help me debug this? Overall I'm having a terrible experience with TS+Nuxt+WebStorm.

8 replies

NNuxt

•Created by hackal on 1/14/2025 in #❓・help

[nitro] Dynamic require of "crypto" is not supported

I'm trying to import a package in api route.

import { CodeSandbox } from '@codesandbox/sdk'

const runtimeConfig = useRuntimeConfig()
const sdk = new CodeSandbox(runtimeConfig.codeSandboxApiKey);

export default defineEventHandler(async (event) => {
})

import { CodeSandbox } from '@codesandbox/sdk'

const runtimeConfig = useRuntimeConfig()
const sdk = new CodeSandbox(runtimeConfig.codeSandboxApiKey);

export default defineEventHandler(async (event) => {
})

I'm getting this error:

ERROR  [nitro] [uncaughtException] Dynamic require of "crypto" is not supported

  at <anonymous> (node_modules/@codesandbox/sdk/dist/esm/index.js:11:9)
  at node_modules/uuid/dist/cjs/rng.js (node_modules/@codesandbox/sdk/dist/esm/index.js:197:20)
  at __require2 (node_modules/@codesandbox/sdk/dist/esm/index.js:14:49)
  at node_modules/uuid/dist/cjs/v1.js (node_modules/@codesandbox/sdk/dist/esm/index.js:216:20)
  at __require2 (node_modules/@codesandbox/sdk/dist/esm/index.js:14:49)
  at node_modules/uuid/dist/cjs/index.js (node_modules/@codesandbox/sdk/dist/esm/index.js:626:19)
  at __require2 (node_modules/@codesandbox/sdk/dist/esm/index.js:14:49)
  at node_modules/@codesandbox/pitcher-common/dist/Id.js (node_modules/@codesandbox/sdk/dist/esm/index.js:675:18)
  at __require2 (node_modules/@codesandbox/sdk/dist/esm/index.js:14:49)
  at node_modules/@codesandbox/pitcher-common/dist/index.js (node_modules/@codesandbox/sdk/dist/esm/index.js:15222:16)

ERROR  [nitro] [uncaughtException] Dynamic require of "crypto" is not supported

  at <anonymous> (node_modules/@codesandbox/sdk/dist/esm/index.js:11:9)
  at node_modules/uuid/dist/cjs/rng.js (node_modules/@codesandbox/sdk/dist/esm/index.js:197:20)
  at __require2 (node_modules/@codesandbox/sdk/dist/esm/index.js:14:49)
  at node_modules/uuid/dist/cjs/v1.js (node_modules/@codesandbox/sdk/dist/esm/index.js:216:20)
  at __require2 (node_modules/@codesandbox/sdk/dist/esm/index.js:14:49)
  at node_modules/uuid/dist/cjs/index.js (node_modules/@codesandbox/sdk/dist/esm/index.js:626:19)
  at __require2 (node_modules/@codesandbox/sdk/dist/esm/index.js:14:49)
  at node_modules/@codesandbox/pitcher-common/dist/Id.js (node_modules/@codesandbox/sdk/dist/esm/index.js:675:18)
  at __require2 (node_modules/@codesandbox/sdk/dist/esm/index.js:14:49)
  at node_modules/@codesandbox/pitcher-common/dist/index.js (node_modules/@codesandbox/sdk/dist/esm/index.js:15222:16)

Any idea what is going wrong here?

5 replies

NNuxt

•Created by hackal on 9/19/2024 in #❓・help

Automatic typing of plugins

I have copied 1:1 this https://nuxt.com/docs/guide/recipes/custom-usefetch and I noticed that useNuxtApp().$api is not typed and doing cmd+click will send me to node_modules/nuxt/dist/app/nuxt.d.ts -> interface _NuxtApp. How/where can I check the auto generated types for plugins? I want to see if the issue is with my language server or the type generation.

1 replies

NNuxt

•Created by hackal on 7/30/2024 in #❓・help

Hard time with getting cookies from server to browser

Hi, I have my own REST api with my own JWT+refresh token authentication. I have decided to have a proxy via nuxt server to my API and now i'm trying to implement the refresh token logic for auth. I have implemented simple proxy that also handles the refresh logic but I am having hard time saving the new credentials back to cookies from server to browser where they are stored originally. Am I missing something? Thanks for help. Simple example: app.vue

<script lang="ts" setup>
const { data: user } = await useFetch<User>('/api/v1/user');
</script>

<script lang="ts" setup>
const { data: user } = await useFetch<User>('/api/v1/user');
</script>

server/api/[...route].ts

import {appendResponseHeader, H3Event} from "h3";

const refreshCredentials = async (event: H3Event) => {
    const refreshToken = getCookie(event, 'X-Refresh-Token');

    const response = await $fetch.raw<any>('<my api url>/auth/refresh', {
        method: "POST",
        baseURL: baseUrl,
        headers: {
            'X-Refresh-Token': refreshToken,
        }
    }

    const { accessToken, refreshToken } = response._data
  
    appendResponseHeader(event, 'set-cookie', 'X-Access-Token=' + newAccessToken + '; Path=/;')
    setCookie(event, 'X-Access-Token', newAccessToken)
    appendResponseHeader(event, 'set-cookie', 'X-Refresh-Token=' + newRefreshToken + '; Path=/;')
    setCookie(event, 'X-Refresh-Token', newRefreshToken)

    return {
        accessToken,
    }
}

export default defineEventHandler(async (event) => {
    const route = getRouterParam(event, 'route');
    const url = '<my api url>' + route;
    const accessToken = getCookie(event, 'X-Access-Token');

    return $fetch(url, {
        method: event.node.req.method,
        headers: {
            ...event.node.req.headers,
            Authorization: `Bearer ${accessToken}`
        },
        retry: 1,
        retryStatusCodes: [401],
        body,
        onResponse: async (context) => {
            if (context.response.status === 401) {
                const { accessToken } = refreshCredentials(event)

                context.options.headers = {
                    ...context.options.headers,
                    Authorization: `Bearer ${accessToken}`,
                }
            }
        },
    });
})

import {appendResponseHeader, H3Event} from "h3";

const refreshCredentials = async (event: H3Event) => {
    const refreshToken = getCookie(event, 'X-Refresh-Token');

    const response = await $fetch.raw<any>('<my api url>/auth/refresh', {
        method: "POST",
        baseURL: baseUrl,
        headers: {
            'X-Refresh-Token': refreshToken,
        }
    }

    const { accessToken, refreshToken } = response._data
  
    appendResponseHeader(event, 'set-cookie', 'X-Access-Token=' + newAccessToken + '; Path=/;')
    setCookie(event, 'X-Access-Token', newAccessToken)
    appendResponseHeader(event, 'set-cookie', 'X-Refresh-Token=' + newRefreshToken + '; Path=/;')
    setCookie(event, 'X-Refresh-Token', newRefreshToken)

    return {
        accessToken,
    }
}

export default defineEventHandler(async (event) => {
    const route = getRouterParam(event, 'route');
    const url = '<my api url>' + route;
    const accessToken = getCookie(event, 'X-Access-Token');

    return $fetch(url, {
        method: event.node.req.method,
        headers: {
            ...event.node.req.headers,
            Authorization: `Bearer ${accessToken}`
        },
        retry: 1,
        retryStatusCodes: [401],
        body,
        onResponse: async (context) => {
            if (context.response.status === 401) {
                const { accessToken } = refreshCredentials(event)

                context.options.headers = {
                    ...context.options.headers,
                    Authorization: `Bearer ${accessToken}`,
                }
            }
        },
    });
})

2 replies

NNuxt

•Created by hackal on 4/25/2023 in #❓・help

Issue with Total Blocking Time in performance metrics in pagespeed

Hi, I'm trying to improve the score on pagespeed but I'm consistently getting Total Blocking Time with 10s+ (50s+ on mobile). https://pagespeed.web.dev/analysis/https-acreom-com/mgnzvfu4vc?form_factor=desktop Only thing it says it that I should minimize main thread work (which took 34seconds). The site is 99% static, with little bit of js for some interactivity. Thanks in advance for any help/suggestions. Hosted with netlify, nuxt version 3.4.2

3 replies

Gaming

Programming