Vite: production output not support ie11

[Forx-Js]

Describe the bug

1. Run vite build
2. Output dist does not support ie11,no error!

[underfin]

The vite output es module by default in build, you can use @rollup/plugin-babel to tranform outupt suppot ie11 .

[axetroy]

@underfin
Is there any document about how to use the rollup plugin?

I tried many times but it doesn't work, if anyone succeeds, please share your config. thx.

  rollupOutputOptions: {
    plugins: [
      getBabelOutputPlugin({
        presets: [['@babel/preset-env', { modules: 'umd' }]],
      }),
    ],
  },

[underfin]

I don't test it, look like you need add babel/polyfill and passed umd to the format of rollupOutputOptions.

[AgileInteractive]

const { getBabelOutputPlugin } = require('@rollup/plugin-babel');
const { build } = require('vite')
const path = require('path');

;(async () => {
    const result = await build({
        rollupOutputOptions: {
            plugins: [
                getBabelOutputPlugin({
                    configFile: path.resolve(__dirname, 'babel.config.js'),
                }),
            ]
        }
    })
})()

This makes babel work with vite. What is driving me nuts though is that I can't get babel polyfills to work (core-js).

When importing core-js in main.js, vite-rollup bundles the core-js code into the index.js, and then babel complains _Import of core-js was not found._

(Regarding ie11, I made babel polyfills work by manually adding the cdn-versions of core-js and regenerator-runtime. After this Vue itself stops working at "Proxy is undefined". Afaik this is something that is going to be fixed in a ie11 compatible build of Vue 3 in the future. My gripes isn't with ie11 though, it can wait, but I just wish core-js polyfills could work for other semi-old browser versions).

[underfin]

Use below code inside vite.config.js. Note: should install core-js @babel/core @babel/preset-env @babel/runtime.

import babel  from '@rollup/plugin-babel';

export default {
  rollupInputOptions: {
    plugins: [
      babel({
        presets: [[
          "@babel/preset-env",
          {
            "corejs": 2,
            "useBuiltIns": "usage",
            "targets": {
              "ie": "11"
            }
          }
        ]]
      })
    ],
  }
}

[0x30]

Use below code inside vite.config.js. Note: should install core-js @babel/core @babel/preset-env @babel/runtime.

import babel  from '@rollup/plugin-babel';

export default {
  rollupInputOptions: {
    plugins: [
      babel({
        presets: [[
          "@babel/preset-env",
          {
            "corejs": 2,
            "useBuiltIns": "usage",
            "targets": {
              "ie": "11"
            }
          }
        ]]
      })
    ],
  }
}

I follow the configuration but it can’t run normally. Is there something wrong?

https://github.com/0x30/vite-issues-779-es5

vue.js:273 Uncaught TypeError: _export is not a functio

[aleclarson]

I made vite-plugin-legacy for dead simple legacy support. Just waiting on #874 to be merged!

[0x30]

I made vite-plugin-legacy for dead simple legacy support. Just waiting on #874 to be merged!

There will be some problems when using vite-plugin-legacy in my project ReferenceError: Can't find variable: exports

import { Plugin } from "vite";

import { rollup } from "rollup";
import commonJS from "@rollup/plugin-commonjs";
import babel from "@rollup/plugin-babel";
import resolve from "@rollup/plugin-node-resolve";

const plugin: Plugin = {
  configureBuild: (viteConfig) => {
    return async (build) => {
      const [mainChunk] = build.assets;

      const filePath = require("path").resolve(
        viteConfig.root,
        viteConfig.outDir,
        viteConfig.assetsDir,
        mainChunk.fileName
      );

      const bundle = await rollup({
        input: filePath,
        plugins: [resolve(), commonJS(), babel()]
      });

      const { output } = await bundle.generate({
        format: "iife",
        sourcemap: viteConfig.sourcemap,
        sourcemapExcludeSources: true,
        inlineDynamicImports: true
      });

      build.assets.push(output[0]);
    };
  }
};

export default plugin;

After trying, some content has been deleted and it can run normally, but when vue router jumps, there is a blank page problem... it is beyond my ability.

I really hope someone can solve it..

[aleclarson]

@0x30 Open an issue with a minimal repro, and I'll take a look 👍

[0x30]

@0x30 Open an issue with a minimal repro, and I'll take a look 👍

@aleclarson Sorry, I found that maybe the conclusion I gave was too sloppy. I tried to build a project using vite-plugin-legacy. It is normal and compatible with lower versions...The previous error, maybe I made a mistake in the steps

The problem of page blanking still exists, and it exists in general vue-router-next projects. Even if the project does not do low-version compatibility operations, it seems that as long as it is of type Lazy<RouteComponent>, there will be some strange problems.
It is normal in npm run dev, but after npm run build, there will be problems

The problem is s.catch is not a function, this may be a bug of vue-router-next... I'm not sure

https://github.com/0x30/vite-779

[aleclarson]

@0x30 Please open a new issue: https://github.com/alloc/vite-plugin-legacy/issues/new