Vite Library Mode and default imports from dependencies

[robballou]

I have created a component library with Vite + TS and use library mode to export that to commonjs & es. Within the library and within vite, everything works as expected. When using this library in a consuming project, we have had a couple problems around dependencies that use default exports. In vite, something like:

import styled from '@emotion/styled';

Will correctly have styled pointed at the dependency's default export. But in our consuming library, we get an error with q is not a function where q=require('@emotion/styled'). With debugging, I can see that this is because q is now pointed directly at the whole module, but it should be pointed at the default.

I have yet to land on the correct solution for either the library end or the consuming project to fix it. We have a hack in place for one such issue we encountered where we essentially check the import on the library side: const emotion = typeof styled === 'function' ? styled : styled.default. But that seems very hacky to put into place everywhere. The consuming projects do usually need a change to use moduleResolution: nodeNext (or node16) so I don't know if that is also related.

Anyone have an idea of how our publish library could work better in the consuming projects?

Library side tsconfig.json:

"compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true,
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "allowJs": true,
    "esModuleInterop": false,
    // "checkJs": true,

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": false,
    "noFallthroughCasesInSwitch": true,
    // ...

Library side tsconfig.node.json:

{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

Library's vite config:

plugins: [
    react({ jsxRuntime: 'classic' }),
    noBundlePlugin(),
    {
      ...dts({
        copyDtsFiles: true,
        include: ['**/*.ts', '**/*.tsx', '**/*.js'],
        exclude: [
          'src/vite-env.d.ts',
          '**/*.test.ts',
          '**/*.test.tsx',
          '**/Demo.tsx',
          'node_modules',
          '__VLS_types.d.ts',
        ],
      }),
    },
  ],
  esbuild: {
    loader: 'tsx',
    include: ['src/**/*.js', 'src/**/*.ts', 'src/**/*.jsx', 'src/**/*.tsx'],
  },
  build: {
    sourcemap: true,
    lib: {
      entry: resolve(__dirname, 'src/lib/main.ts'),
      name: 'ModuleLibrary',
      formats: ['cjs', 'es'],
    },
    rollupOptions: {
      external: [
        'react',
        'react-dom',
        //...
      ],
      output: {
        generatedCode: 'es2015',
      },
    },
  },
  optimizeDeps: {
    esbuildOptions: {
      loader: {
        '.js': 'jsx',
      },
    },
  },

[howlettt]

I ran into a similar issue and managed to fix it by adding the following to the library's Vite config

rollupOptions: {
  output: {
    interop: "auto",
  },
}

Docs: https://rollupjs.org/configuration-options/#output-interop

[howlettt]

I ran into another similar case where a package I was using exported some components strangely, I worked around it by adding a alias:

  resolve: {
    alias: [{ find: "@mui/icons-material", replacement: "@mui/icons-material/esm" }],
  },

[robballou]

Thank you! I believe interop: auto did help tremendously. It seemed like this was also mostly in cases where we had a consuming project that was using webpack + babel to consume the common JS output from this library.

Additionally, I also separated formats by using which may help as well but unclear if that just helped:

output: [{
  format: 'esm',
  preserveModules: true,
  interop: 'auto',
  entryFileNames: (entry) => {
    return `${entry.name}.mjs`;
  },
}, /* cjs definition */]

[guillaume-docquier-vention]

Thanks for this! I had the same issue with Vite 6 and import styled from "styled-components" being incorrectly transpiled to const styled = require("styled-components")

interop: "auto" did it!