'show code' not displaying correct component stoorybook on build

[enri90]

The code example on "Show Code" of the Storybook not displaying correct component:
I don't understand why the code transforms me

import SearchForm from '@crm-front/component/SearchForm'
<SearchForm placeholder="Cerca" />

BUILD

DEV

.storybook/main.ts

import type { StorybookConfig } from '@storybook/react-vite';
import path, { resolve } from 'path';
import { PluginOption, mergeConfig } from 'vite';
import reactPlugin from '@vitejs/plugin-react';

const config: StorybookConfig = {
  stories: [
    '../stories/**/*.mdx',
    '../stories/**/*.stories.@(js|jsx|ts|tsx|mdx)',
    '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    '@storybook/addon-a11y',
    '@storybook/addon-designs',
    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: resolve('postcss')
        }
      }
    }
  ],
  core: {
    builder: '@storybook/builder-vite',
    disableTelemetry: true
  },
  framework: '@storybook/react-vite',
  docs: {
    autodocs: 'tag'
  },
  async viteFinal(config) {
    return mergeConfig(config, {
      define: {
        ...config.define
      },
      optimizeDeps: {
        include: ['storybook-dark-mode']
      },
      build: {
        minify: false,
        sourcemap: false,
        target: 'esnext',
      }
    });
  },
  typescript: {
    check: false,
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      compilerOptions: {
        allowSyntheticDefaultImports: false,
        esModuleInterop: false
      },
      shouldExtractLiteralValuesFromEnum: true,
      shouldRemoveUndefinedFromOptional: true,
      propFilter: prop =>
        prop.parent
          ? !/node_modules\/(?!@crm-front)/.test(prop.parent.fileName)
          : true
    }
  }
};

export default config;

[JF1994]

Exactly same problem here!!

My main.ts

import type { StorybookConfig } from "@storybook/react-vite";
import { withoutVitePlugins } from "@storybook/builder-vite";

const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-onboarding",
    "@storybook/addon-interactions",
    "@storybook/addon-designs"
  ],
  framework: {
    name: "@storybook/react-vite",
    options: {},
  },
  core: {
    builder: "@storybook/builder-vite",
  },
  docs: {
    autodocs: "tag",
  },
  async viteFinal(config) {
    return {
      ...config,
      plugins: await withoutVitePlugins(config.plugins, [
        "vite:lib-inject-css",
      ]),
    };
  },
};
export default config;

My package.json

{
 "version": "1.2.2",
  "main": "./lib/index.js",
  "module": "./lib/index.js",
  "types": "./lib/index.d.ts",
  "scripts": {
    "start": "storybook dev -p 3000",
    "build": "vite build",
    "build-storybook": "storybook build",
    "build-dev": "storybook build -o build",
    "build-prod": "vite build && storybook build -o ./build",
    "build-lib": "vite build",
    "preview": "vite preview",
    "postinstall": "husky install",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "commit": "cz"
  },
  "dependencies": {
    "@emotion/styled": "^11.11.0",
    "@semantic-release/changelog": "^6.0.3",
    "@semantic-release/commit-analyzer": "^11.0.0",
    "@semantic-release/git": "^10.0.1",
    "@semantic-release/gitlab": "^13.0.2",
    "@semantic-release/gitlab-config": "^14.0.0",
    "@semantic-release/npm": "^11.0.2",
    "@semantic-release/release-notes-generator": "^12.1.0",
    "axios": "^1.6.7",
    "commitizen": "^4.3.0",
    "dayjs": "^1.11.10",
    "husky": "^9.0.11",
    "install": "^0.13.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-plotly.js": "^2.6.0",
    "rollup-plugin-postcss": "^4.0.2",
    "styled-components": "^6.1.8",
    "tinycolor2": "^1.6.0",
    "vite-plugin-dts": "^3.7.2",
    "vite-plugin-lib-inject-css": "^1.3.0"
  },
  "devDependencies": {
    "@storybook/addon-designs": "^7.0.9",
    "@storybook/addon-essentials": "^7.6.15",
    "@storybook/addon-interactions": "^7.6.15",
    "@storybook/addon-links": "^7.6.15",
    "@storybook/addon-onboarding": "^1.0.11",
    "@storybook/blocks": "^7.6.15",
    "@storybook/react": "^7.6.15",
    "@storybook/react-vite": "^7.6.15",
    "@storybook/test": "^7.6.15",
    "@types/plotly.js": "^2.29.1",
    "@types/react": "^18.2.55",
    "@types/react-dom": "^18.2.19",
    "@types/react-plotly.js": "^2.6.3",
    "@types/tinycolor2": "^1.4.6",
    "@typescript-eslint/eslint-plugin": "^6.21.0",
    "@typescript-eslint/parser": "^6.21.0",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.56.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "eslint-plugin-storybook": "^0.6.15",
    "i": "^0.3.7",
    "npm": "^10.4.0",
    "postcss-cli": "^11.0.0",
    "storybook": "^7.6.15",
    "typescript": "^5.2.2",
    "vite": "<=5.1.0",
    "vite-plugin-scope-tailwind": "^1.1.10"
  },
  "peerDependencies": {
    "@mui/icons-material": "<=5.15.9",
    "@mui/lab": "<=5.0.0-alpha.165",
    "@mui/material": "<=5.15.9",
    "@mui/x-data-grid": "<=6.19.5",
    "@mui/x-date-pickers": "<=6.19.5",
    "autoprefixer": "<=10.4.17",
    "postcss": "<=8.4.35",
    "tailwindcss": "<=3.4.1"
  },
  "config": {
    "commitizen": {
      "path": "cz-conventional-changelog"
    }
  },
  "files": [
    "/lib"
  ]
}

My vite.config

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";
import dts from "vite-plugin-dts";
import { libInjectCss } from "vite-plugin-lib-inject-css";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), dts(), libInjectCss()],
  build: {
    lib: {
      entry: path.resolve(__dirname, "src/index.ts"),
      fileName: () => `index.js`,
      formats: ["cjs", "es"],
      name: "test-storybook",
    },
    rollupOptions: {
      external: ["react", "react-dom"],
      output: {
        globals: {
          react: "react",
          "react-dom": "ReactDOM",
        },
      },
      plugins: [],
    },
    sourcemap: true,
    emptyOutDir: true,
    outDir: "lib"
  },
  
});

[amandawallin]

I have the same problem! Let me know if you find a solution.