DevTools not allowing inspection

[drewbaker]

Version

@nuxtjs/storybook: 4.3.2
nuxt: 2.15.18
VueDev Tools: 6.2.1

Reproduction Link

1. https://github.com/funkhaus/fuxt
2. Duplicate and rename .example.env to .env.
3. npm install
4. npm run storybook

Steps to reproduce

You'll see that in both the main mode, and the "open canvas in new tab" mode that you can't access Vue DevTools.

It never worked in the main mode, that is fine. But in the "new tab mode" it used to work. I'm not sure whats broken. I suspect it's due to the vue-template-compiler package...

What is Expected?

Vue DevTools should work in new tab.

What is actually happening?

See this screenshot:

[drewbaker]

OK so if I create a Nuxt plugin, and then add Vue.config.devtools = true to it, DevTools will work.

But if I add the following to my nuxt.config.js file, DevTools will not work:

build: {
    devtools: true,
}

So it seems that nuxt-storybook is setting devtools = false for some reason.

Ideally when running npx nuxt storybook it should show devtools right? Why does it think I want to hide them?

[drewbaker]

My .nuxt-storybook/client.js file has the following in it:

// Try to rehydrate SSR data from window
const NUXT = window.__NUXT__ || {}

const $config = NUXT.config || {}
if ($config._app) {
  __webpack_public_path__ = urlJoin($config._app.cdnURL, $config._app.assetsPath)
}

Object.assign(Vue.config, {"devtools":true,"silent":false,"performance":true})

[drewbaker]

Mystery deepens. If I use a Nuxt plugin to log out context.isDev it is true so still no idea what is stopping Vue devtools....

[drewbaker]

I got a workaround in the meantime, using a Nuxt plugin like this:

import Vue from "vue"
export default function ({ isDev }) {
    Object.assign(Vue.config, { devtools: isDev })
}

Not perfect because this makes it impossible to overide DevTools to show in production environments. But it at least gets DevTools working in the meantime.

[aminimalanimal]

@drewbaker Thank you so much for this workaround.

[existe-deja]

I confirm the bug but not the workaround. Still impossible to inspect the code with devtools (FF or Chrome) in the storybook iframe embed or the standalone view too.

node v16.18.0
@nuxtjs/storybook 4.3.2
vue devtools 6.4.5
nuxt 2.15.8

[drewbaker]

I confirm the bug but not the workaround. Still impossible to inspect the code with devtools (FF or Chrome) in the storybook iframe embed or the standalone view too.

node v16.18.0
@nuxtjs/storybook 4.3.2
vue devtools 6.4.5
nuxt 2.15.8

The work around is setup on our boilerplate and we use it all the time, same version numbers you have. So perhaps something else is conflicting? Can you provide a repo?

https://github.com/funkhaus/fuxt/blob/master/plugins/devtools.client.js

[existe-deja]

@drewbaker, sorry, I didn't try on a fresh install and it works. I should have some conflicts.

[existe-deja]

I just found using lazy loading for translation of nuxt i18n module is responsible of the side effect.

[existe-deja]

After trying lot of things, this is my workaround:

• create a global storybook decorator in .storybook/preview.js

export * from '~~/.nuxt-storybook/storybook/preview.js'
import Vue from 'vue'

const withVueDevTools = () => {
  return {
    template: '<story />',
    mounted () {
      Vue.config.devtools = true
    }
  }
}

export const decorators = [withVueDevTools]

• set a special ENV var when I run storybook locally in package.json

"scripts": {
  "storybook:dev": "STORYBOOK_DEV=true nuxt storybook --ci --quiet",
  "..."
}

• conditionally use the lazy loading property for i18n in nuxt.config.js

import en from './lang/en'

export default {
  ...
  i18n: {
    langDir: 'lang/',
    lazy: !process.env.STORYBOOK_DEV,
    vueI18n: {
      messages: process.env.STORYBOOK_DEV ? { en } : {}
    }
  }
}

The global decorator replace the needs of a plugin

[manuelodelain]

Thanks @existe-deja and @drewbaker! I confirm the bug and the conflict with Nuxt I18n. But I want to keep the lazy translations because of HMR. Still stuck here :/

[manuelodelain]

Here is a minimal repro https://github.com/manuelodelain/nuxt-storybook-i18n-devtools

[tobiasdiez]

v4 of this module is no longer actively supported. Please try the newest version and open an new issue if the problem persists. Thank you for your understanding.