How to include Javascript AMD modules in a Vite project

Question

In my project using the Vite bundler, I have the two legacy AMD libraries azure-devops-extension-api and azure-devops-extension-sdk, but Vite only supports ESM modules. The means that if I in a javascript file have:

import * as API from `azure-devops-extension-api`

The browser will output Uncaught ReferenceError: define is not defined

Would it be possible to convert the AMD modules to ESM at build time using the rollup-plugin-amd plugin with build.rollupOptions, and in that case, what should my vite.config.ts look like?

[EDIT 1]

With the suggestion from @Dmitry Kotov it almost work, except for vitest which gives ReferenceError: define is not defined that indicates vitest operates on the AMD module before conversion.

Current vite.config.ts:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from 'tailwindcss'
import babel from 'vite-plugin-babel'
import commonjs from 'vite-plugin-commonjs'

export default defineConfig({
    base: '/',
    plugins: [
        react(),
        babel({
            babelConfig: {
                plugins: ['transform-amd-to-commonjs'],
            },
        }),
        commonjs(),
    ],
    server: {
        port: 8000,
    },
    css: {
        postcss: {
            plugins: [tailwindcss],
        },
    },
    build: {
        rollupOptions: {
            output: {
                assetFileNames: 'output.css',
            },
        },
    },
    define: {
        'process.env': {},
    },
})

And vitest.config.ts:

import { defineConfig } from 'vitest/config'

export default defineConfig({
    test: {
        reporters: ['default', 'junit'],
        coverage: {
            reporter: ['text', 'json', 'html', 'cobertura'],
            provider: 'istanbul',
        },
        environment: 'jsdom',
        globals: true,
        setupFiles: ['./src/common/test/test-setup.ts', 'dotenv/config'],
        exclude: ['**/node_modules/**', '**/temp/**'],
    },
})

"vite": "^4.5.1", "vitest": "^1.0.4"

[EDIT 2]

After posting an issue on the Github of vitest I got the following answer in order to get vitest to work with AMD modules:

By default, Vitest doesn't crawl your dependencies to pre-bundle them like Vite does. You can add both azure-devops-extension-sdk, azure-devops-extension-api to deps.optimizer.web.include, but currently Vitest also doesn't process those dependencies afterwards so commonjs plugin will not be applied which makes this useless in your case. However, it is possible to configure Vitest to process those files with both plugins by inlining them and specifying plugin options

Now, with the following vite.config.ts both vite and vitest processes the AMD modules correctly:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from 'tailwindcss'
import babel from 'vite-plugin-babel'
import commonjs from 'vite-plugin-commonjs'

/**
 * Configuration for ViteJS
 *
 * @url https://vitejs.dev/config/
 */
export default defineConfig({
    base: '/',
    plugins: [
        react(),
        babel({
            filter: /.*/,
            include: [/azure-devops-extension-api/, /azure-devops-extension-sdk/],
            babelConfig: {
                plugins: ['transform-amd-to-commonjs'],
            },
        }),
        commonjs({
            filter: (id) =>
                id.includes('azure-devops-extension-api') ||
                id.includes('azure-devops-extension-sdk'),
        }),
    ],
    server: {
        port: 8000,
    },
    css: {
        postcss: {
            plugins: [tailwindcss],
        },
    },
    build: {
        rollupOptions: {
            output: {
                assetFileNames: 'output.css',
            },
        },
    },
    define: {
        'process.env': {},
    },
    test: {
        reporters: ['default', 'junit'],
        coverage: {
            reporter: ['text', 'json', 'html', 'cobertura'],
            provider: 'istanbul',
        },
        environment: 'jsdom',
        globals: true,
        setupFiles: ['./src/common/test/test-setup.ts', 'dotenv/config'],
        // exclude: ['**/node_modules/**', '**/temp/**'],
        server: {
            deps: {
                inline: ['azure-devops-extension-sdk', 'azure-devops-extension-api'],
            },
        },
    },
})

Answer 1

Recently I solved the same issue.

First, convert the AMD module to a commonjs module (vite-plugin-babel + babel-plugin-transform-amd-to-commonjs), and then convert to ES6 module (vite-plugin-commonjs).

It works fine for me.

Here is vite plugins configuration snippet from my project

import babel from "vite-plugin-babel";
import commonjs from 'vite-plugin-commonjs'

export default defineConfig({
    // ...
    plugins: [
        // ...
        babel({
            babelConfig: {
                plugins: ["transform-amd-to-commonjs"],
            },
        }),
        commonjs()
        // ...
    ],
    // ...
});