`import` inside story returns 404

[theonelucas]

Hi, I can run storybook with yarn storybook:

But when I try to load a story named inputdate.js:

import InputDate from '@/components/Ui/Form/InputDate.vue';

export default {
  components: { InputDate },
  title: 'Form/Date',
};

const Template1 = (args) => ({
  components: { InputDate },
  setup() {
    return { args };
  },
  template: `<c-input-date v-model="value" @change="change" />`,
});

export const SingleDate = Template1.bind({});
SingleDate.args = {
  value: '',
  change: (date) => {}
};

The server breaks with:

11:19:04 PM [vite] Internal server error: Cannot read properties of undefined (reading 'get')
  Plugin: vue-docgen
  File: /usr/src/components/Ui/Form/InputDate.vue
      at Object.getArgFromDecorator [as default] (/usr/src/node_modules/vue-docgen-api/dist/utils/getArgFromDecorator.js:30:9)
      at classDisplayNameHandler (/usr/src/node_modules/vue-docgen-api/dist/script-handlers/classDisplayNameHandler.js:35:51)
      at /usr/src/node_modules/vue-docgen-api/dist/parse-script.js:158:82
      at step (/usr/src/node_modules/vue-docgen-api/dist/parse-script.js:52:23)
      at Object.next (/usr/src/node_modules/vue-docgen-api/dist/parse-script.js:33:53)
      at /usr/src/node_modules/vue-docgen-api/dist/parse-script.js:27:71
      at new Promise (<anonymous>)
      at __awaiter (/usr/src/node_modules/vue-docgen-api/dist/parse-script.js:23:12)
      at /usr/src/node_modules/vue-docgen-api/dist/parse-script.js:156:120
      at Array.map (<anonymous>)
      at /usr/src/node_modules/vue-docgen-api/dist/parse-script.js:156:88
      at step (/usr/src/node_modules/vue-docgen-api/dist/parse-script.js:52:23)
      at Object.next (/usr/src/node_modules/vue-docgen-api/dist/parse-script.js:33:53)
      at fulfilled (/usr/src/node_modules/vue-docgen-api/dist/parse-script.js:24:58)

And the browser request:

This is my main.js storybook config:

const vite = require('vite');
const path = require('path');
const vue = require('@vitejs/plugin-vue');
const env = vite.loadEnv(undefined, 'env');

module.exports = {
  stories: [
    "../stories/**/*.@(js|jsx|ts|tsx)"
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ],
  framework: "@storybook/vue3",
  core: {
    builder: "storybook-builder-vite"
  },
  async viteFinal(config) {
    return {
      ...config,
      plugins: [
        ...config.plugins,
        vue({ include: [/\.vue$/], })
      ],
      resolve: {
        ...config.resolve,
        alias: {
          ...config.resolve.alias,
          '@': path.resolve(__dirname, '../'),
          'vue': 'vue/dist/vue.esm-bundler.js'
        }
      },
      server: {
        ...config.server,
        host: 'localhost',
        hmr: {
          ...config.server.hmr,
          protocol: 'wss',
          host: env.VITE_APP_DOMAIN,
          port: 443
        }
      }
    };
  },
}

If I do change the path in alias.resolve to anything else it breaks, which means the file is being read initially. I ran out of ideas of what might be causing this, if somebody has any please let me know, thanks!

[joshwooding]

@theonelucas That version of the beta isn't supported yet. Work is in progress in https://github.com/eirslett/storybook-builder-vite/pull/144

[IanVS]

@theonelucas I see you've made updates to the vite config to support the newer versions of storybook, but I think that you don't want to spread the existing server.hmr config in this case, because there are some properties there which cause trouble. So, try removing the line ...config.server.hmr,, and maybe that will help.

[theonelucas]

@theonelucas That version of the beta isn't supported yet. Work is in progress in #144

I downgrade it to 6.4.0-beta.19 but it still didn't work. I created a reproduction repository if you wish to inspect, thanks.

[theonelucas]

@theonelucas I see you've made updates to the vite config to support the newer versions of storybook, but I think that you don't want to spread the existing server.hmr config in this case, because there are some properties there which cause trouble. So, try removing the line ...config.server.hmr,, and maybe that will help.

I tried removing the entire config.server block and running it locally but got the same error. I created a reproduction repository, if you wish to inspect, thanks.

[joshwooding]

@theonelucas The reproduction needs a little tweaking with the import statement in inputdate.ts. But I think this issue is the same as: https://github.com/storybookjs/storybook/issues/14052