How to exclude files from Vite's dependency-analysis...

[karts-with-freaking-lasers]

Hello. This feels like a very "niche" question so I'm not sure how, or where, to ask. A discussion feels most appropriate, please be gentle.

Given:

Project structure

./
./src/
./src/client/
./src/server/
./src/utils/

Utils

Some shareables between client/server. One file in particular, needs to be excluded from the client:

• ./src/utils/logger.ts contains Winston
• Winston has an instruction like: process.something()
• A render issue occurs because process is not defined
  I went down the rabbit trail of trying to fix this, but the real issue is that vite is importing ./src/utils/logger.ts, still. I tried excluding it at least 5 different ways, even this morning attempting to exclude via tsconfig.json; again, to no avail.

    esbuild: {
      exclude: ["winston"]
    },

    import {readFile} from 'fs/promises';
    const {dependencies} = JSON.parse((await readFile(new URL('./package.json', import.meta.url))).toString());
    const entries = Object.keys(dependencies)
    .filter(value => !value.includes("winston"))
    .map(value => {
        let path = `./node_modules/${value}`;
        console.log(path);
        return path;
    });
    optimizeDeps: {
        entries,
        exclude: [ // never worked even a little bit. And no matter the "path".
            "../node_modules/winston",
            "../node_modules/winston-daily-rotate-file"
        ],
    ...
    }

    server: {
        force: true,
        watch: {
            ignored: "winston" // tried ./node_modules/winston* and several variations therein.
        }
    },

Some variations of the above 3 would allow the page to load and render, but then when Vite connects, it "optimizes imports" and pulls in ./src/utils/logger.ts, even though there is no reference to it in src/client. I first had src/utils/index.ts => import {logger} from "./logger", but that forced loading the logger into the client--which doesn't work. After the above, the initial load worked, because it wasn't viewing Winston as a dependency. But, then Vite determines, "Oh. I see you have a file there and since you have no way of telling me not to import that file, I'm gonna do it!" And this is where I'm at. I have no hair left.

Rabbit Trail:
I added the following to my svelte.config.js > kit > vite:

...
            optimizeDeps: {
                esbuildOptions: {
                    plugins: [
                        NodeGlobalsPolyfillPlugin({
                            process: true, // only needed for `./src/utils/logger.ts`, but that file shouldn't be imported.
                        }),
                    ]
                }
            }
...

This gets through undefined process, but now global is undefined. I added var global = global || window to my index.html, to no avail. I tried adding all kinds of exclude

Server

The server works fine:
node --experimental-specifier-resolution=node --loader ts-node/esm src/server --esm ./index.ts

Client

npx svelte-kit dev src/client --host --port 3001

// ./svelte.config.js
import preprocess from 'svelte-preprocess';
import less from 'svelte-preprocess';
import adapter from '@sveltejs/adapter-node';
import {NodeGlobalsPolyfillPlugin} from "@esbuild-plugins/node-globals-polyfill";
import * as path from "path";

/** @type {import('@sveltejs/kit').Config} */
export default {
    // Consult https://github.com/sveltejs/svelte-preprocess for more information about preprocessors
    preprocess: preprocess(less({})),
    kit: {
        adapter: adapter({
            out: 'build/client',
            precompress: false,
        }),
        files: {
            assets: 'src/client/static',
            lib: 'src/client/lib',
            routes: 'src/client/routes',
            template: 'src/client/app.html',
        },
        vite: {
            root: path.join(process.cwd(), "../"),
            server: {
                force: true,
            },
            optimizeDeps: {
                esbuildOptions: {
                    plugins: [
                        NodeGlobalsPolyfillPlugin({
                            process: true,
                        }),
                    ]
                }
            },
            clearScreen: true,
        }
    },
};

So. How do I exclude a file/files from vite so that /src/utils/logger.ts isn't imported and cannot cause me all the other headaches it is bringing with it? HAAAALP! :) <3

[bluwy]

The only way to exclude from Vite's dep analysis is to not import it, and it seems like down the module graph you imported src/utils/logger.ts from src/utils/index.ts? If src/utils/index.ts exports both client and server code, that may be the issue. It'd be best if you import src/utils/logger.ts directly when using it from a server-side code. That way each file works in client or server exclusively.

Let me know if that works for you, otherwise it would be easier to debug with a repro/codebase available to check out.

[karts-with-freaking-lasers]

Thank you so much for your time and response! I will take a look and report back sometime in the next 2 days.

[luucasrb]

Hi! Having the same issue here in Vue + Vite frontend and Nodejs server environment, with winston as a logger for both sides in a /common shared submodule calling import winston from 'winston'. Already tried a few things (such as NodeGlobalsPolyfillPlugin and NodeModulesPolyfillPlugin) that works for vite serve, but it's not applicable for the vite build process. Would appreciate any help!

For those who need help in the serve, it works for me:

import NodeGlobalsPolyfillPlugin from '@esbuild-plugins/node-globals-polyfill';
import NodeModulesPolyfillPlugin from '@esbuild-plugins/node-modules-polyfill';

...
    optimizeDeps: {
      esbuildOptions: {
        /** Enable 'util', 'Buffer', 'process' and 'global' packages in `vite serve` command.
         * Used to fix 'winston' dependencies: 'has-flag', 'supports-color' and 'chalk'
         * because those dependencies uses CommonJS (NodeJS builtin functions).
         */
        plugins: [
          NodeModulesPolyfillPlugin(),
          NodeGlobalsPolyfillPlugin({
            process: true,
          }),
        ],
      },
    },

[bluwy]

Using esbuild plugins only work in serve/dev, you should use Rollup plugins instead so it works in build too. There are several discussions in Vite regarding polyfilling nodejs modules.

[brendon]

I found that I needed to use an esbuild plugin in the dev environment as esbuild did the conversion of require('jquery') in one of the packages I use to a require_jquery() function and bundled the entirety of jquery in the process. I wanted to override this behaviour to just refer to a module that exports window.jQuery as a default. Is there a way to do this before esbuild gets its hands on things? I'd prefer to have one config that works across build environments.