Vue 3 + Storybook - Incompatibility with "@vueuse/core" library (and potentially all libraries that use export { x } from Y?)

[michealroberts]

I install storybook into my project as outlined here:

https://storybook.js.org/docs/vue/get-started/introduction

So npx storybook init into the root of my Vue 3 project.

I have a component which makes use of the @vueuse/core library. My component works perfectly and passes all of my jest.spec.ts tests.

My setup is as follows:

*.stories.ts file:

import CelestiaSkyViewer from './CelestiaSkyViewer.vue'

export default {
  title: 'Example/CelestiaSkyViewer',
  component: CelestiaSkyViewer,
}

./.storybook/main.js:

const path = require("path")

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-postcss"
  ],
  "webpackFinal": async (config) => {
    config.resolve.alias['@'] = path.resolve(__dirname, '../src')
    return config
  }
}

./.storybook/main.js:

import {
  app
} from '@storybook/vue3'

import CelestiaSkyViewer from '@/components/CelestiaSkyViewer/CelestiaSkyViewer.vue'

app.component('celestia-sky-viewer', CelestiaSkyViewer)

Yet, when I run npm run storybook I encounter the following stack trace errors:

ERROR in ./node_modules/@vueuse/core/index.mjs 763:19-27
Can't import the named export 'computed' from non EcmaScript module (only default export is available)

ERROR in ./node_modules/@vueuse/core/index.mjs 2568:22-30
Can't import the named export 'reactive' from non EcmaScript module (only default export is available)

I'm not sure what I need to do to get the following style of syntax working with storybook:

import {
  onKeyStroke,
  useDevicePixelRatio,
  useEventListener,
  useIntervalFn,
  useMouse,
  useMousePressed,
  useResizeObserver
} from '@vueuse/core'

Please let me know if any further details are needed for a full replication of the bug, essentially, I feel that it's not possible as storybooks currently stands to use @vueuse with storybooks?

Additional Information:

This is a typescript Vue 3 project ... if that is relevant to the discussions.

[webdesignberlin]

I found a fix via vueuse/vueuse#718 (comment)

if i add this in .storybook/main.js webpackfinal:

config.module.rules.push({
      test: /\.mjs$/,
      include: /node_modules/,
      type: "javascript/auto"
    });

hope it helps.
it fixed this problem for me. latest vue and vueuse versions.

[shilman]

@webdesignberlin should this be included in the default setup for vue3? If so, can you give a little more context? Thanks! 🙏

[webdesignberlin]

@shilman i use a basic vue 3 setup. (setup via cli). this snippet is just for the .storybook/main.js file. it is not a vue problem. not sure whether the problem is due to vueuse. but at least it's working again now.

[shilman]

We’re cleaning house! Storybook has changed a lot since this issue was created and we don’t know if it’s still valid. Please open a new issue referencing this one if:

• this is still a problem in SB 7.x
• you can provide a consistent reproduction in 7.x (at https://storybook.new/ or per repro docs).