Vite: ビルド後にCJSモジュールで.defaultが必要になる

1
2
3
4
5
6

// Before（開発では動くが本番で壊れる）
import SomeComponent from 'some-cjs-library';

// After
import SomeComponentModule from 'some-cjs-library';
const SomeComponent = SomeComponentModule.default || SomeComponentModule;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    commonjsOptions: {
      transformMixedEsModules: true,
      // または特定のモジュールを指定
      include: [/node_modules/],
    },
  },
});

1
2
3
4
5
6

// vite.config.js
export default defineConfig({
  optimizeDeps: {
    include: ['problematic-cjs-library'],
  },
});

1
2

// module.exports = { foo, bar } の場合
import { foo, bar } from 'some-cjs-library';

1
2

const module = await import('some-cjs-library');
const SomeComponent = module.default;

1
2

# ESMをサポートするバージョンや代替ライブラリを検討
npm install some-library@latest

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// vite.config.js
import commonjs from '@rollup/plugin-commonjs';

export default defineConfig({
  plugins: [
    commonjs({
      requireReturnsDefault: 'auto',
    }),
  ],
});