Problems using decorators with Vite

[Juanjo-GEx]

Trying global decorators throws a server error:

[vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. You may need to install appropriate plugins to handle the .cjs file format, or if it's an asset, add "**/*.cjs" to `assetsInclude` in your configuration.

This is Vite's config file::

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

This is the Storybook configuration main.cjs file:

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions"
  ],
  "framework": "@storybook/react",
  "core": {
    "builder": "@storybook/builder-vite"
  },
  "features": {
    "storyStoreV7": true
  },
  async viteFinal(config, { configType }) {
    config.plugins = [
      ...config.plugins,
      require('@vitejs/plugin-react').default()
    ]
    return config;
  },
}

This is the use of decorators in preview.cjs:

import React from 'react'

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
  options: {
    storySort: (a, b) =>
      a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }),
  },
}

export const decorators = [
  (Story) => (
    <div style={{ margin: '3em' }}>
      <Story />
    </div>
  ),
];

[joshwooding]

Hi @Juanjo-GEx, Could you try naming the preview file preview.jsx. I have a suspicion that vite will only transpile React code in mjs, js,j sx, ts or tsx files.

[Juanjo-GEx]

Thanks for the answer josh. We are advancing.

I tell you the test cases:

1- Storybook running

• Run Storybook npm run storybook
• Rename the file preview.cjs to preview.jsx Result: Works
• Stop running Storybook
• Run Storybook again npm run storybook Result: Fails

throw new Error((0, _tsDedent.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    Error sorting stories with sort parameter ", ":\n\n  
  > ", "\n    \n    Are you using a V6-style sort function in V7 mode?\n\n    More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#v7-style-story-sort\n  "])), storySortParameter, err.message));
          ^
Error: Error sorting stories with sort parameter (a, b) => a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, {
  numeric: true
}):
> Cannot read properties of undefined (reading 'kind')
Are you using a V6-style sort function in V7 mode?

2- Storybook no running

• Run Storybook npm run storybook Result: Fails

The same error

Conclusion The error is produced by the command:

options: {
    storySort: (a, b) =>
      a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }),
  },

It is a temporary solution because it solves a problem but I cannot use the new features of the new version. Any suggestion?

[joshwooding]

@Juanjo-GEx The error text contains a link to the migration guide which gives you more information. I would encourage you to read: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#v7-style-story-sort

You should replace your sort with:

options: {
    storySort: (a,b) => a.title === b.title ? 0  : a.id.localeCompare(b.id, undefined, { numeric: true });
},

[Juanjo-GEx]

Indeed mate. You're right. Problem solved!

[IanVS]

Glad you got it working!