vite: Legacy build fails on babel step

Describe the bug

The build with the legacy plugin active fails with an error from babel.

❯ npm run build

> vite-project@0.0.0 build
> tsc && vite build

vite v2.0.5 building for production...
✓ 21 modules transformed.
[legacy-post-process] [BABEL] unknown: .plugins[13][0] must be a string, object, function
error during build:
Error: [BABEL] unknown: .plugins[13][0] must be a string, object, function
    at assertPluginTarget (/Sites/vite-project/node_modules/@babel/standalone/babel.js:67416:12)
    at assertPluginItem (//Sites/vite-project/node_modules/@babel/standalone/babel.js:67390:6)
    at //Sites/vite-project/node_modules/@babel/standalone/babel.js:67373:15
    at Array.forEach (<anonymous>)
    at assertPluginList (/Sites/vite-project/node_modules/@babel/standalone/babel.js:67372:10)
    at /Sites/vite-project/node_modules/@babel/standalone/babel.js:67591:6
    at Array.forEach (<anonymous>)
    at validateNested (/Sites/vite-project/node_modules/@babel/standalone/babel.js:67567:22)
    at validate$3 (/Sites/vite-project/node_modules/@babel/standalone/babel.js:67558:11)
    at /Sites/vite-project/node_modules/@babel/standalone/babel.js:69754:15

Reproduction

Base config

import { defineConfig } from 'vite'
import legacy from '@vitejs/plugin-legacy'

export default defineConfig({
  plugins: [legacy({ targets: ['defaults', 'not IE 11'] })]
})

System Info

  • vite version: 2.0.5
  • Operating System: macOS Big Sur
  • Node version: 12.21.0
  • Package manager (npm/yarn/pnpm) and version: npm 7.6.0

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Reactions: 4
  • Comments: 17 (6 by maintainers)

Most upvoted comments

As a temporary workaround you can pin the @babel/standalone version to 7.13.9 in package.json:

"@babel/standalone": "7.13.9"

@mengelbrecht Where exactly are we supposed to pin @babel/standalone? Since it looks like plugin-legacy vendors it’s own version of @babel/standalone at ^7.12.12.

For those using yarn for their package manager, I got this working with

  "dependencies": {
    ...
  },
  "devDependencies": {
    ...
  },
  "resolutions": {
    "@vitejs/plugin-legacy/@babel/standalone": "7.13.9"
  }

Removing the env preset from legacy-post-process plugin causes the build to complete with success, so maybe something changed with how @babel/standalone handles the plugins? or the export from preset-env changed

I had the same problem.

my vite.config.ts file

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import legacy from '@vitejs/plugin-legacy'

export default defineConfig({
  plugins: [
    vue(),
    legacy({
      targets: ['defaults', 'not IE 11']
    })
  ],

  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  },

  build: {
    outDir: "./www",
  }
})

Yes! Issue is fixed with @babel/standalone@7.13.12.

It would be great if the plugin’s package.json would be updated with the updated @babel/standalone version number, but not necessary as it picks already the correct version as it is thanks to semver

npm uninstall @babel/standalone @vitejs/plugin-legacy && npm install @vitejs/plugin-legacy -D

@babel/standalone@7.13.12 has been published, RE-install vite-legacy can fix this issue.

yarn remove @vitejs/plugin-legacy && yarn add @vitejs/plugin-legacy --dev