Support for external vue

Is your feature request related to a problem? Please describe. I’m using vue.global.js in rails application through unpkg link and having vue inside ViteJs application. I would like to tell Vite to do not import vue from modules but make a reference to window.Vue. (use the external one)

Describe the solution you’d like It would be awesome to have code what allows us to modify modules resolution. eg.: vite.config.ts

alias: {
  "vue": "window.Vue"
}

or any better alternative what allows us to use one global Vue.

[sionzee]

@yyx990803 Passing an external to rollupInputOptions won’t solve development mode. It still complains about presence of two Vue applications. Is there a way how to tell Vite to search Vue from Vue.global.js? Your code solves only bundling process.

[elwynelwyn]

I had the same issue for React where the existing page had a global copy of React loaded, which I needed to use in my new ViteJS bundled component. Rollup externals worked perfectly for the production build, but in development Vite was sending a second instance of React, which results in errors from React:

Error: Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

This plugin looked like it should work around this issue: https://github.com/lceric/vite-plugin-resolve-externals

However unfortunately I had issues with the plugin (perhaps due to running on Windows? or just PEBKAC?) so ended up using a modified version of the plugin:

function resolveExternalsPlugin(
    externals: Record<string, string> = {}
) {
    const extractId = (id: string): string => {
        // match blah/node_modules/.vite/foo.js?1234
        const match = id.match(/^.*\/node_modules\/\.vite\/(.+)\.js.*$/i);
        if (match && match.length === 2) {
            return match[1];
        }

        return id;
    };

    return {
        name: "vite-plugin-resolve-externals",
        config(config: UserConfig) {
            const { resolve } = config;
            Object.assign(externals, resolve.externals);
            return config;
        },
        resolveId(path: string) {
            const id = extractId(path);
            if (externals[id]) {
                return id;
            }
        },
        load(path: string) {
            const id = extractId(path);
            if (externals[id]) {
                return `const externals = window.${externals[id]};
    export default externals`;
            }
        },
    };
}

And in my vite.config.ts:

plugins: [
    resolveExternalsPlugin({
        react: 'React',
        'react-dom': 'ReactDOM'
    })
]

Hopefully that helps if others run into this situation.