Vite in libray mode fails to find exports when using a Rollup resolution alias

[loicraux]

Hi !

I am using ViteJS in a project that builds a library.

Most of the time, the library is built in "production mode" , but sometimes I need to build it in "development mode", that is to say not minified, for easier debugging.

But one of my dependencies is shaka-player, and its "main" file is the following (from its package.json) :

"main": "dist/shaka-player.compiled.js",

This is a optimized & minified file, with no logs enabled.

So when I build in development mode my library (video player) that makes use of shaka player, I actually want Vite/rollup to include the "debug" version of this dependency, that is available in node_modules/shaka-player/dist/shaka-player.compiled.debug.js

So for this purpose, when vite build is launched with the option --mode development, I define a resolution alias so that the dependency 'shaka-player' is resolved to this debug file.

But the problem is that this node_modules/shaka-player/dist/shaka-player.compiled.debug.js is not pretty-printed, making it hard to debug when included in the bundle.

So I added an extra step to prettify this file using Prettier, making a copy of it in /tmp, before defining the resolution alias.

My vite.config.ts boils down to this :

import { readFileSync, writeFileSync, existsSync, realpathSync } from 'fs';
import { tmpdir } from 'os';
import { resolve, join } from 'path';
import { createHash } from 'crypto';
import { hrtime } from 'process';

import { format } from 'prettier';
import type { Alias } from 'vite';
import { obfuscator } from 'rollup-obfuscator';
import { getASLLibraryViteConfig, assert } from '@asl-player/build-tools';

import * as packageJson from './package.json';

function getShakaPlayerDistJsFile(fileNameWithoutExtension: string): string {
    const shakaPlayerDistJsFile = resolve(__dirname, 'node_modules', 'shaka-player', 'dist', `${fileNameWithoutExtension}.js`);
    assert(existsSync(shakaPlayerDistJsFile), `Shaka Player dist. JS file ${shakaPlayerDistJsFile} does not exists ?! Exiting`);
    return shakaPlayerDistJsFile;
}

// Info: This takes about 2 to 3 milliseconds to execute
function getFileSHA256Checksum(filePath: string): string {
    const fileBuffer = readFileSync(filePath);
    const hashSum = createHash('sha256');
    hashSum.update(fileBuffer);
    return hashSum.digest('hex');
}

async function getOrCreatePrettierShakaPlayerDistJsFile(fileNameWithoutExtension: string): Promise<string> {
    const minifiedShakaPlayerDistJsFile = getShakaPlayerDistJsFile(fileNameWithoutExtension);
    const filePath = join(tmpdir(), [fileNameWithoutExtension, getFileSHA256Checksum(minifiedShakaPlayerDistJsFile), 'js'].join('.'));

    if (!existsSync(filePath)) {
        // eslint-disable-next-line no-console
        console.log(`Un-minified version of shaka-player dist. JS file ${filePath} does not exist, creating it...`);

        const startHRTime = hrtime();
        const unMinifiedSource = await format(readFileSync(minifiedShakaPlayerDistJsFile).toString(), {
            parser: 'babel',
            tabWidth: 4,
            singleQuote: true,
            printWidth: 140,
            trailingComma: 'none',
            endOfLine: 'lf'
        });

        writeFileSync(filePath, unMinifiedSource);
        assert(existsSync(filePath), `Failed to write the un-minified source to ${filePath} ?! Exiting`);
        // eslint-disable-next-line no-console
        console.log(
            `Successfully wrote the un-minified shaka-player dist. JS file ${filePath} (took ${Math.round(
                hrtime(startHRTime)[1] / 1_000_000
            )} ms) !`
        );
    }

    // Return the minified file path, w/o the .js extension
    return filePath.split('.').slice(0, -1).join('.');
}

async function getResolutionAliases(mode: 'development' | 'production'): Promise<Alias[]> {
    if (mode === 'production') {
        return [];
    }

    return [{ find: /^shaka-player$/, replacement: await getOrCreatePrettierShakaPlayerDistJsFile('shaka-player.compiled.debug') }];
}

export default getASLLibraryViteConfig(__dirname, packageJson, {
    doExportCSSFile: true,
    define: {
        __PLAYER_VERSION__: JSON.stringify(packageJson.version),
        __PLAYER_NAME__: JSON.stringify(packageJson.name)
    },
    plugins: (mode: 'development' | 'production') => (mode === 'production' ? [obfuscator()] : []),
    resolutionAliases: getResolutionAliases
});

I end up with such a JS file ...

/tmp/shaka-player.compiled.debug.b0d4914e1fdb0409084d49aaaea6d9dcef4ca8bb32530c3f47cb94dbc5e9ec7d.js

... that is used in my resolution alias...

The problem is that I get the following errors when building in dev mode :

 "util" is not exported by "../../../../../../../tmp/shaka-player.compiled.debug.b0d4914e1fdb0409084d49aaaea6d9dcef4ca8bb32530c3f47cb94dbc5e9ec7d.js", imported by "src/controls/CastToggleButton.ts".
│ file: /home/loraux/repos/gitlab-arte/asl-video-web-player/packages/player/src/controls/CastToggleButton.ts:1:20
│ 1: import { type cast, util, type extern } from 'shaka-player';
│                        ^
│ 2: import { assert, assertIsDefined } from '@asl-player/utils';
│ error during build:
│ RollupError: "util" is not exported by "../../../../../../../tmp/shaka-player.compiled.debug.b0d4914e1fdb0409084d49aaaea6d9dcef4ca8bb32530c3f47cb94dbc5e9ec7d.js", imported by "src/controls/CastToggleBu…
│     at error (file:///home/loraux/repos/gitlab-arte/asl-video-web-player/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:2245:30)
│     at Module.error (file:///home/loraux/repos/gitlab-arte/asl-video-web-player/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:13604:16)
│     at Module.traceVariable (file:///home/loraux/repos/gitlab-arte/asl-video-web-player/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:14029:29)
│     at ModuleScope.findVariable (file:///home/loraux/repos/gitlab-arte/asl-video-web-player/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:12547:39)
│     at ChildScope.findVariable (file:///home/loraux/repos/gitlab-arte/asl-video-web-player/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:7082:38)
│     at ClassBodyScope.findVariable (file:///home/loraux/repos/gitlab-arte/asl-video-web-player/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:7082:38)
│     at ChildScope.findVariable (file:///home/loraux/repos/gitlab-arte/asl-video-web-player/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:7082:38)
│     at FunctionScope.findVariable (file:///home/loraux/repos/gitlab-arte/asl-video-web-player/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:7082:38)
│     at ChildScope.findVariable (file:///home/loraux/repos/gitlab-arte/asl-video-web-player/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:7082:38)
│     at CatchScope.findVariable (file:///home/loraux/repos/gitlab-arte/asl-video-web-player/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:7082:38)

I don't get these errors when building in production mode, without any alias, using the "main" file defined package.json of shaka-player :

"main": "dist/shaka-player.compiled.js",

If I copy the prettified file /tmp/shaka-player.compiled.debug.xxx.js to node_modules/shaka-player/dist/shaka-player.compiled.js and then launch a production build, then everything is OK, it builds OK.

So the prettified file is OK, and I guess this is just a resolution issue by Rollup... I guess Rollup assumes the shaka-player package/module is in CommonJS format since there is no "type" entry in its package.json file, but fails to determine that the /tmp/shaka-player.compiled.debug.xxx.js file is also in CJS format... Hence the errors.... I am not sure though about these assumptions.

So I tried to make use of the customResolver option of @rollup/plugin-alias, but failed to make it work...

Do you guys have an idea of what could be wrong ? How can I make Rollup ingest this file ?

(Note: This used to work perfectly in WebPack resolution aliases)