reactjstypescriptaxiossocket.iovite

CRA Migration to Vite + React + TS Issues

I've been working on migrating a codebase from CRA to Vite. I have all of the code issues resolved but I'm running into issues with a number of the packages that I'm importing. I'm assuming it's all CommonJS problems, maybe? It's incredible how much easier CRA was for building to production.

Package issues so far:

Socket.io (4.8.1)

error during build:
node_modules/engine.io-client/build/esm/transport.js (2:9): "Emitter" is not exported by "node_modules/@socket.io/component-emitter/lib/cjs/index.js", imported by "node_modules/engine.io-client/build/esm/transport.js".
file: node_modules/engine.io-client/build/esm/transport.js:2:9

1: import { decodePacket } from "engine.io-parser";
2: import { Emitter } from "@socket.io/component-emitter";
            ^
3: import { installTimerFunctions } from "./util.js";
4: import { encode } from "./contrib/parseqs.js";

    at getRollupError (file:///node_modules/vite/node_modules/rollup/dist/es/shared/parseAst.js:397:41)
    at error (file:///

I've had this error for a number of items, and did this whole patch-package setup where I was manually setting the import to:

import { Emitter } from "@socket.io/component-emitter/lib/esm/index.js";

axios (1.8.3):

node_modules/axios/lib/platform/node/classes/FormData.js (1:7): "default" is not exported by "node_modules/form-data/lib/form_data.js", imported by "node_modules/axios/lib/platform/node/classes/FormData.js".

I did the similar thing:

import * as FormDataModule from 'form-data';

But I just keep going through the yarn build process and it's feeling like there has to be potentially a better way to resolve these issues. yarn dev works great and so far has no problems, but when I do a production build, rollup just becomes a nightmare.

Solution

  • Fix for Socket.io Issue

    Add this to vite.config.ts:

    resolve: {
  alias: {
    '@socket.io/component-emitter': '@socket.io/component-emitter/lib/esm/index.js',
  },
},

    Another General Fixes

    1. Install vite-plugin-node-polyfills and @rollup/plugin-commonjs:
    npm install vite-plugin-node-polyfills @rollup/plugin-commonjs --save-dev
    1. Add to vite.config.ts:
    import nodePolyfills from 'vite-plugin-node-polyfills';
import commonjs from '@rollup/plugin-commonjs';

export default defineConfig({
  plugins: [
    nodePolyfills(),
    commonjs({ include: /node_modules/ }),
  ],
});