react-csvをvite環境で使うときのメモ

yarn dev

> hoge@1.0.0 dev
> vite

Pre-bundling dependencies:
  react
  react-dom
  @sentry/react
  @sentry/tracing
  axios
  (...and 32 more)
(this will be run only when your dependencies or config have changed)
 > node_modules/react-csv/src/components/Link.js:110:6: error: Unexpected "<"
    110 │       <a
        ╵       ^

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

// https://vitejs.dev/config/
export default defineConfig(({ command }) => {
  return { plugins: [react(), fixReactCsvPlugin(command)], server: {} };
});

function fixReactCsvPlugin(command) {
  const esbuildPlugin = {
    name: 'esbuild:resolve-fixes',
    setup: (build) => {
      build.onResolve({ filter: /react-csv$/ }, (args) => {
        return Promise.resolve({
          path: path.join(process.cwd(), './node_modules/react-csv/index.js'),
        });
      });
    },
  };

  return {
    name: 'resolve-fixes',
    config() {
      // only use the esbuild plugin during dev ("serve" command)
      if (command === 'serve') {
        return {
          optimizeDeps: {
            // development fixes
            esbuildOptions: {
              plugins: [esbuildPlugin],
            },
          },
        };
      }

      // build
      return {
        resolve: {
          // production fixes
          alias: [
            {
              find: 'react-csv',
              replacement: './node_modules/react-csv/index.js',
            },
          ],
        },
      };
    },
  };
}