Unable to support functions such as "optional chain" in QQ browser 10 or chrome 70

[yangdan8]

Describe the bug

Invalid Babel configuration

// App.vue

const num = window?.num ?? 9;
console.log(num);

// babel.config.js

module.exports = {
  presets: [
    "@vue/cli-plugin-babel/preset",
    "@babel/plugin-proposal-optional-chaining"
  ]
};

// vite.config.ts

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    (babel as any)(),
    // legacy({
    //   additionalLegacyPolyfills: ['@babel/plugin-proposal-optional-chaining'],
    //   targets: ['chrome 70']
    // })
  ],
  build: {
    target: ['es2015'],
    // target: ['chrome70']
  },
})

Reproduction

https://github.com/yangdan8/vite2-vue3-ts-demo

System Info

QQ browser 10
Chrome70

Used Package Manager

yarn

Logs

Uncaught SyntaxError: Unexpected token .

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[zhuanglong]

遇到同样的问题

[Porianesu]

同样的问题，请问现在有解决了嘛

[yangdan8]

同样的问题，请问现在有解决了嘛

尚未解决

[Porianesu]

同样的问题，请问现在有解决了嘛

尚未解决

好吧，谢谢答复

[WangShuXian6]

目前公司内统一使用内网系统，固定的chrome60浏览器，无法使用可选链语法～～～求大佬帮忙解决一下～～～

配置了 @vitejs/plugin-legacy 也无法使用可选链

[guansss]

vite 在 dev 模式下转译 sfc 时没有为 esbuild 指定输出目标，导致始终被输出为 esnext

目前的 workaround 是把使用了新特性的代码从 .vue 文件抽离到单独的 .js/ts 文件里，并且在 vite.config.js 里添加

esbuild: {
    target: 'es2015'
},

副作用是低于 es2020 时不能使用 import.meta

[yangdan8]

vite 在 dev 模式下转译 sfc 时没有为 esbuild 指定输出目标，导致始终被输出为 esnext

目前的 workaround 是把使用了新特性的代码从 .vue 文件抽离到单独的 .js/ts 文件里，并且在 vite.config.js 里添加

esbuild: {
    target: 'es2015'
},

副作用是低于 es2020 时不能使用 import.meta

这个不是正确的解决之道,请看最新的pr #5652

[powerdmy]

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import checker from 'vite-plugin-checker'
import vitePluginImp from 'vite-plugin-imp'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  return {
    plugins: [
      react({
        babel: {
          plugins: ['@babel/plugin-proposal-optional-chaining'],
        },
      }),
  }
})

@vitejs/plugin-react 或者 @vitejs/plugin-vue 应该支持传入babel配置，实测react可用

[wcldyx]

大佬们，vue的有解决方案了吗

[yangdan8]

大佬们，vue的有解决方案了吗

#5652

# vite.config.ts

esbuild: {
   target: 'chrome70',
}

[wcldyx]

大佬们，vue的有解决方案了吗

#5652

# vite.config.ts

plugins: [
  vue({
    target: 'chrome70',
  })
]

感谢大佬

[TLovers]

我也有这个问题～～～～～

[sodatea]

我确认一下，这个问题是说 dev 时无法在 Chrome 70 下使用 optional chaining 语法？build 后没问题？

[yangdan8]

我确认一下，这个问题是说 dev 时无法在 Chrome 70 下使用 optional chaining 语法？build 后没问题？

Yes

[sodatea]

这个场景 Vite 核心应该不会支持。

这是因为 Vite 默认的假设就是 dev 环境是跑在最新的浏览器上的，esbuild 只是拿来处理非标准的语法。
所以你之前提的 PR 也没有完全解决掉这个问题，那个 PR 只在是针对 lang="ts" 的处理中加了一个 target，普通的 script 因为完全没有经过 esbuild 处理，所以 ?? 语法仍然会保留，在 Chrome 70 下仍然会有问题。

---

不过引入第三方插件可以解决这个问题。

比如通过引入 rollup-plugin-esbuild:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import esbuild from 'rollup-plugin-esbuild'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    
    {
      ...esbuild({
        target: 'chrome70', 
        // 如有需要可以在这里加 js ts 之类的其他后缀
        include: /\.vue$/,
        loaders: {
          '.vue': 'js',
        },
      }),
      enforce: 'post',
    }
  ],
})

[sodatea]

legacy 插件没有用是因为 legacy 插件是用来生成和处理 <script nomodule> 的，dev 环境用的 <script type=module> 不经过 legacy 插件。

vite-babel-plugin 没有用是因为它只处理 build 场景：https://github.com/wingsico/vite-babel-plugin/blob/master/src/index.ts

理论上 @rollup/plugin-babel 经过配置也是能够处理这个问题的。不过用 rollup-plugin-esbuild 似乎更简单。

[sodatea]

我改了一下前面的示例配置。把兼容用的配置全都放在 enforce: 'post' 的 esbuild 插件里，应该要优于直接改 esbuild.target。
这样大概能够绕开 import.meta 的兼容问题。

[yangdan8]

{
      ...esbuild({
        target: 'chrome70', 
        // 如有需要可以在这里加 js ts 之类的其他后缀
        include: /\.vue$/,
        loaders: {
          '.vue': 'js',
        },
      }),
      enforce: 'post',
    }

没用的,继续报新的错误"Uncaught (in promise) TypeError: Cannot read properties of null (reading 'isCE')""

[sodatea]

这个报错不是同一个问题：vuejs/core#4344 (comment)

[yangdan8]

这个报错不是同一个问题：vuejs/vue-next#4344 (comment)

使用你给的配置才出现的这个问题,哈哈哈

[yangdan8]

这个报错不是同一个问题：vuejs/vue-next#4344 (comment)

已经找到问题,我另一个插件中使用了不同版本的vue导致的。最终确定您的这种增加一个plugin的方法可行。NB！
但是其相当于把已经经过esbuild转换的代码再次用esbuild执行了一次转换，该方案对比以上的API在性能上有损失