audius.community/vite.config.ts at main · AudiusProject/audius.community · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
import pages from '@hono/vite-cloudflare-pages'
import devServer from '@hono/vite-dev-server'
import react from '@vitejs/plugin-react'
import { UserConfig, defineConfig } from 'vite'
import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'
import { nodePolyfills } from 'vite-plugin-node-polyfills'
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
import fixReactVirtualized from 'esbuild-plugin-react-virtualized'
import path from 'path'

export default defineConfig(({ mode }) => {
  if (mode === 'client') {
    return {
      publicDir: 'public',
      assetsInclude: [
        '**/*.png',
        '**/*.jpg',
        '**/*.jpeg',
        '**/*.gif',
        '**/*.svg',
      ],
      plugins: [
        react(),
        nodePolyfills({
          globals: {
            process: true,
          },
        }),
        cssInjectedByJsPlugin()
      ],
      optimizeDeps: {
        esbuildOptions: {
          define: {
            global: 'globalThis'
          },
          plugins: [
            NodeGlobalsPolyfillPlugin({
              buffer: true,
              process: true
            }),
            fixReactVirtualized
          ]
        }
      },
      build: {
        rollupOptions: {
          input: './src/client/main.tsx',
          output: {
            entryFileNames: 'static/client/main.js',
          },
        },
      }
    } as UserConfig
  }

  return {
    plugins: [
      react(),
      pages({
        entry: 'src/index.tsx'
      }),
      devServer({
        entry: 'src/index.tsx'
      }),
      nodePolyfills({
        protocolImports: true,
        exclude: ['process']
      }),
    ],
    resolve: mode === 'production' ? {
      // Need to alias this because vite only wants to resolve the "browser" bundle
      alias: { '@audius/sdk': path.resolve(__dirname, 'node_modules/@audius/sdk/dist/index.esm.js') },
    } : {},
    optimizeDeps: {
      esbuildOptions: {
        define: {
          global: 'globalThis'
        },
        plugins: [
          NodeGlobalsPolyfillPlugin({
            buffer: true,
            process: true
          }),
          fixReactVirtualized
        ]
      }
    },
    ssr: {
      external: ['react', 'react-dom', 'process']
    },
    define: {
      'process.env': {},
    },
    build: {
      commonjsOptions: {
        transformMixedEsModules: true,
      }
    }
  } as UserConfig
})