Vite bundled storybook lib test throws on any import that includes styled components

[indigo egret]

My Storybook 7 code is bundled up with Vite 4, but when I try to use it in other apps, anything that imports the lib throws in jest tests saying z is not a function where z is basically the styled in like styled.div.... Any clue on what may be causing that? I can provide package versions and stuff if it can help.

Vite bundled storybook lib test throws on any import that includes styled components

[remote beacon]

That sounds strange. Can you share what you structure looks like? Are you importing Storybook code in other packages? Or just the actual components? Can you share a screenshot of your directory structure, some code examples where it fails, and your package.jsons?

[indigo egret]

I'm building with Vite as a lib using the following vite config:

import * as path from 'path';
import { defineConfig } from 'vite';
import dts from 'vite-plugin-dts';
import react from '@vitejs/plugin-react';

module.exports = defineConfig({
  plugins: [
    dts({
      tsConfigFilePath: './tsconfig.prod.json',
      insertTypesEntry: true,
      afterDiagnostic: diagnostics => {
        if (diagnostics.length > 0) {
          process.exit(1);
        }
      },
    }),
    react(),
  ],
  build: {
    emptyOutDir: true,
    sourcemap: true,
    lib: {
      entry: path.resolve(__dirname, './src/index.ts'),
      name: 'BIMTrackReactComponents',
      fileName: format => `index.${format}.js`,
      formats: ['esm', 'cjs'],
    },
    chunkSizeWarningLimit: 1000,
    rollupOptions: {
      external: ['react', 'react-dom', 'styled-components', 'moment', '@emotion/react'],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
          'styled-components': 'styled',
        },
      },
    },
  },
});

And then importing that in other repos. I have 2 such repos I've tried importing it into, but both gave me that same styled error when running Jest tests. One repo is on Jest 24, React 17 and the other one is on Jest 29, React 18, and both give the same error during tests. Fwiw when I build with Vite 3 (with no other change than the version in package.json) everything is fine in the importing repos.

I'm aware this could be just Vite related, but since it's building my storybook repo I'm hoping someone here might have a clue.

[indigo egret]

As for the imports in the failing repos, they only import the components, not Storybook specific code.

[remote beacon]

Okay I see, this also sounds unrelated to Storybook. I don't have much experience with Jest's module resolution, so I don't think I can be of much help. Maybe someone else knows more about this. 😕