Context conflict error in Nuxt 3 with @sidebase/nuxt-auth and Histoire Vue

[ElizeoRocha]

I'm currently working on a Nuxt 3 project with Vue 3 and have integrated the @sidebase/nuxt-auth module along with Histoire Vue. However, when running yarn story:dev, I encounter the following error:

500
Context conflict

at checkConflict (http://localhost:6006/node_modules/unctx/dist/index.mjs?v=8c24da30:6:13)
at Object.set (http://localhost:6006/node_modules/unctx/dist/index.mjs?v=8c24da30:40:9)
at callWithNuxt (http://localhost:6006/node_modules/nuxt/dist/app/nuxt.js?v=8c24da30:201:16)
at getRequestURLWN (http://localhost:6006/node_modules/@sidebase/nuxt-auth/dist/runtime/utils/callWithNuxt.mjs?v=8c24da30:4:42)
at getSession (http://localhost:6006/node_modules/@sidebase/nuxt-auth/dist/runtime/composables/authjs/useAuth.mjs?v=8c24da30:94:37)
at http://localhost:6006/node_modules/@sidebase/nuxt-auth/dist/runtime/plugin.mjs?v=8c24da30:10:46
at executeAsync (http://localhost:6006/node_modules/unctx/dist/index.mjs?v=8c24da30:111:19)
at Object.setup (http://localhost:6006/node_modules/@sidebase/nuxt-auth/dist/runtime/plugin.mjs?v=8c24da30:10:27)
at wrapper (http://localhost:6006/node_modules/nuxt/dist/app/nuxt.js?v=8c24da30:182:21)
at http://localhost:6006/node_modules/nuxt/dist/app/nuxt.js?v=8c24da30:106:58

Configuration Files:

Here are the relevant parts of my nuxt.config.ts:

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/tailwindcss',
    'nuxt-icon', // Integration with Icon Module
    '@pinia/nuxt', // Integration with Pinia
    '@sidebase/nuxt-auth', // Integration with Auth Module
    '@nuxtjs/robots',
    'nuxt-viewport',
  ],

  css: ['@/assets/css/main.css', '@/assets/css/roboto.css', '@/assets/css/ubuntu.css'],

  runtimeConfig: {
    public: {
      API_BASE_URL: process.env.API_BASE_URL,
      STAGING_MODE: process.env.STAGING_MODE,
      GOOGLE_PLACES_API_KEY: process.env.GOOGLE_PLACES_API_KEY,
      GETITFRONTEND_URL:
        process.env.STAGING_MODE === 'true'
          ? 'https://staging.get.it'
          : process.env.NODE_ENV === 'production'
          ? 'https://www.get.it'
          : 'http://localhost:3000',
    },
  },

  // App configuration
  app: {
    // Head configuration
    head: {
      // HTML attributes
      htmlAttrs: {
        lang: 'en', // Set the default language to English
      },
      title: '@ Get.It',
    },
  },
});

And my histoire.config.ts:

import { defineConfig } from 'histoire';
import { HstNuxt } from '@histoire/plugin-nuxt';
import { HstVue } from '@histoire/plugin-vue';

export default defineConfig({
  plugins: [HstVue(), HstNuxt()],
});

This issue seems to be related to the @sidebase/nuxt-auth module. Interestingly, removing this module resolves the conflict, allowing Histoire Vue to work as expected. I've scoured online resources but couldn't find a similar case, prompting me to seek assistance here.

Has anyone faced a similar context conflict when using @sidebase/nuxt-auth and Histoire Vue in a Nuxt 3 project? Any insights or suggestions on resolving this issue would be highly appreciated.

Thank you for your assistance!

[peterbud]

I disable nuxt-auth module when running Histoire.

isEnabled: !process.env.HISTOIRE,

It's not ideal, and with that you get warning of missing imports, but at least I can do component testing

[ElizeoRocha]

Thank you, Yes it partially solves it for components that don't use nuxt-auth but don't solve the problem because a lot of stories will not work because of auth dependences

[FlorientPlouvin]

Sorry to reopen the conversation, but I'm not sure what to do to correct the solution, I think I have a similar problem but in which file did you put the
isEnabled: !process.env.HISTORY,
Thanks in advance

[pasternake]

Here the step to find solution:
https://code.moussaclarke.co.uk/posts/mocking-imports-histoire-nuxt/