nuxt-modules / nuxt-modules/plausible

Local development breaks when adblocker is installed

Open
#51 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
119
Forks
7
PR merge metrics
No merged PRs in 30d

Description

When locally developping my nuxt application, i sometimes also launch it in my regular browser (chrome) with ublock origin lite installed.

Plausible is blocked by the adblocker, this causes my entire app to error since the fetch of the nuxt module is blocked and it breaks the nuxt pipeline and things like devtools dont show up.

My config (relevant parts:

export default defineNuxtConfig({
    compatibilityDate: "2026-09-07",
    devtools: {
        enabled: true,
    },

    modules: [
        ...
        "@nuxtjs/plausible",
    ],
    typescript: {
        typeCheck: "build",
    },

    runtimeConfig: {
        ...
        public: {
            ...
        },
    },

    nitro: {
        preset: "node-server",
    },

    // Plausible analytics configuration: https://nuxt.com/modules/plausible
    plausible: {
        apiHost: "https://my.plausible.domain",
        ignoredHostnames: ["localhost", "127.0.0.1"],
        autoOutboundTracking: true,
        fileDownloads: true,
        formSubmissions: true,
        domain: "my.actual.site.domain",
    },

    vite: {
        optimizeDeps: {
            include: ["@heroicons/vue/24/outline", "better-auth/vue", "@vue/devtools-core", "@vue/devtools-kit"],
        },
    },
});

The error thrown in the browser:

virtual:nuxt:.nuxt%2Fplugins.client.mjs:6 
GET http://localhost:3000/_nuxt/@fs/F:/my-path/node_modules/@nuxtjs/plausible/dist/runtime/plugin-preconnect.client.js?v=c39e737a net::ERR_BLOCKED_BY_CLIENT

(index):1 
Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: http://localhost:3000/_nuxt/@fs/F:/my-path/node_modules/nuxt/dist/app/entry.js?v=c39e737a

virtual:nuxt:.nuxt%2Fplugins.client.mjs:18  
GET http://localhost:3000/_nuxt/@fs/F:/my-path/node_modules/@nuxtjs/plausible/dist/runtime/plugin.client.js?v=c39e737a net::ERR_BLOCKED_BY_CLIENT

2 solutions i came up with:

  1. Disable the adblocker on this localhost test site:
    yes, logical solution, but i use multiple browsers and sometimes differnet addblockers, so a bit cumbersome.

  2. In my nuxt config:

...(process.env.NODE_ENV === "development" ? [] : ["@nuxtjs/plausible"]),

Only include plausible in production. Also, feasible, but i like to have it in dev aswell to test it out.

In production, this does not happen since the nuxt module gets compiled/transpiled into something that does not contain the string "plausible". 'Is there any way to achieve the same effect in development?

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the failure by running the Nuxt development server with uBlock Origin Lite enabled, then inspect the runtime/plugin-preconnect.client.js and runtime/plugin.client.js entry points named in the browser errors. Done means the development pipeline and devtools still load when Plausible is blocked, while Plausible remains available for development testing.

Written by the indexing model from the issue text.

Assessment

Tech stack
nuxt, typescript
Domain
build-system, developer-experience
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
65/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.