[Bug] builder-vite throws an internal error "Right-hand side of 'instanceof' is not callable"

[ghost]

What version of vite are you using?

4.2.0

System info and storybook versions

System: OS: macOS 13.3.1 (a) (22E772610a) CPU: Apple M1 Max Binaries: Node: v16.13.2 npm: 8.19.3 npmPackages: "@storybook/addon-essentials": "^7.0.12", "@storybook/addon-interactions": "^7.0.12", "@storybook/addon-links": "^7.0.12", "@storybook/blocks": "^7.0.12", "@storybook/testing-library": "^0.1.0", "@storybook/vue3": "^7.0.12", "@storybook/vue3-vite": "^7.0.12", "@types/node": "^18.15.11", "@vitejs/plugin-vue": "^4.1.0", "@vitest/coverage-c8": "^0.31.0", "jsdom": "^22.0.0", "react": "^18.2.0", "react-dom": "^18.2.0", "sass": "^1.62.1", "storybook": "^7.0.12", "typescript": "^4.9.3", "vite": "^4.2.0", "vitest": "^0.31.0", "vue-tsc": "^1.2.0"

Describe the Bug

I get an error when run storybook for one of my components.

Error: Right-hand side of 'instanceof' is not callable

TypeError: Right-hand side of 'instanceof' is not callable at assertType (http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-O4OSJQ7D.js?v=5b9460ca:5225:19) at validateProp (http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-O4OSJQ7D.js?v=5b9460ca:5195:39) at validateProps (http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-O4OSJQ7D.js?v=5b9460ca:5178:5) at initProps (http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-O4OSJQ7D.js?v=5b9460ca:4891:5) at setupComponent (http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-O4OSJQ7D.js?v=5b9460ca:7604:3) at mountComponent (http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-O4OSJQ7D.js?v=5b9460ca:6293:7) at processComponent (http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-O4OSJQ7D.js?v=5b9460ca:6271:9) at patch (http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-O4OSJQ7D.js?v=5b9460ca:5960:11) at ReactiveEffect.componentUpdateFn [as fn] (http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-O4OSJQ7D.js?v=5b9460ca:6388:11) at ReactiveEffect.run (http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-O4OSJQ7D.js?v=5b9460ca:665:19)

Component code:

<script setup lang="ts">
import { PropType } from 'vue';
import { ColumnSettings } from '../types/ColumnSettings';
import { DataGridValidator } from '../validators/DataGrid';

const props = defineProps({
  columns: {
    type: Object as PropType<ColumnSettings[]>,
    required: true,
    validator: DataGridValidator
  },
});
</script>

<template>
  <div class="data-grid">
    <div class="grid-container">
    </div>
  </div>
</template>

Component story:

import { ColumnSettings } from "@/components/DataGrid/types/ColumnSettings";
import { DataGrid } from "../components/DataGrid";
import type { Meta, StoryObj } from "@storybook/vue3";

const meta: Meta<typeof DataGrid> = {
  title: 'Components/DataGrid',
  component: DataGrid,
  argTypes: {
  }
};

export default meta;

type Story = StoryObj<typeof DataGrid>;

const columns: ColumnSettings[] = [
  {
    title: 'Column 1',
    width: 200,
    hidden: false,
    sortable: false,
    filterable: false
  }
];

export const Basic: Story = {
  argTypes: meta.argTypes,
  args: {
    columns
  },
  render: (args) => {
    return {
      components: { DataGrid },
      template: `
        <DataGrid :columns="columns" />
      `,
      props: args,
    };
  },
};

Link to Minimal Reproducible Example

No response

Participation

• [ ] I am willing to submit a pull request for this issue.

[IanVS]

This looks to be an error thrown from either your code or a dependency. Can you please create a minimal reproduction using https://storybook.new?

[ghost]

The solution to solve the issue:

1. props inside the render method should be an array of strings, where each string represents a property name.
2. usage of setup method instead of passing props: args works as well

[IanVS]

Thanks for reporting back with the solution!