vite启动时，低版本chrome浏览器报错对可选链操作符不支持

wfwfwf128 commented 2 years ago

重现方法

chrome浏览器版本：65.0.3325.181

代码为 npm init ssr-app my-ssr-project初始化选择的 midway-react-ssr 版本使用yarn start:vite 启动

具体报错

示例样式是乱的，看chrome控制台，报错 _Uncaught (in promise) SyntaxError: Unexpected token ._
再看具体发现是可选链操作符不支持，没有转成es5

尝试的方案

尝试采用rollup/plugin-babel的方式来解决，但没有用（不知道是否是我配置有误），修改config.ts配置如下:

import type { UserConfig } from 'ssr-types'
import { babel } from '@rollup/plugin-babel';
const vConfig = () => {
  return {
    client: {
      defaultPluginOptions: {
      },
      extraPlugin: [
        babel({
          babelHelpers: 'bundled',
          // babelHelpers: 'runtime',
          exclude: 'node_modules/**',
          "presets": [
            [
              "@babel/preset-env",
              {
                "modules": false,
                "useBuiltIns": "usage",
                "corejs": "2", // 新增
                "targets": {
                  "chrome": "58",
                  "ie": "10"
                }
              }
            ]
          ],
          plugins: [
            // "@babel/plugin-transform-runtime",
            "@babel/plugin-proposal-optional-chaining",
            "@babel/plugin-proposal-nullish-coalescing-operator",
          ]
        }),
      ]
    },
    server: {
      defaultPluginOptions: {
      },
      extraPlugin: [
        babel({
          babelHelpers: 'bundled',
          // babelHelpers: 'runtime',
          exclude: 'node_modules/**',
          "presets": [
            [
              "@babel/preset-env",
              {
                "modules": false,
                "useBuiltIns": "usage",
                "corejs": "2", // 新增
                "targets": {
                  "chrome": "58",
                  "ie": "10"
                }
              }
            ]
          ],
          plugins: [
            // "@babel/plugin-transform-runtime",
            "@babel/plugin-proposal-optional-chaining",
            "@babel/plugin-proposal-nullish-coalescing-operator",
          ]
        }),
      ]
    }
  }
}

const userConfig: UserConfig = {
  viteConfig: vConfig
}
export { userConfig }

期望的结果

如果是配置问题，求正确配置

zhangyuang commented 2 years ago

include tsx

发自我的iPhone

------------------ 原始邮件 ------------------ 发件人: wfwfwf128 @.> 发送时间: 2022年1月13日 11:28 收件人: zhangyuang/ssr @.> 抄送: Subscribed @.***> 主题: Re: [zhangyuang/ssr] vite启动时，低版本chrome浏览器报错对可选链操作符不支持 (Issue #153)

重现方法

chrome浏览器版本：65.0.3325.181

代码为 npm init ssr-app my-ssr-project 初始化选择的 midway-react-ssr 版本使用yarn start:vite 启动

具体报错

示例样式是乱的，看chrome控制台，报错 Uncaught (in promise) SyntaxError: Unexpected token . 再看具体发现是可选链操作符不支持，没有转成es5

尝试的方案

尝试采用rollup/plugin-babel的方式来解决，但没有用（不知道是否是我配置有误），修改config.ts配置如下: import type { UserConfig } from 'ssr-types' import { babel } from @.*/plugin-babel'; const vConfig = () => { return { client: { defaultPluginOptions: { }, extraPlugin: [ babel({ babelHelpers: 'bundled', // babelHelpers: 'runtime', exclude: 'node_modules/*', "presets": [ [ @./preset-env", { "modules": false, "useBuiltIns": "usage", "corejs": "2", // 新增 "targets": { "chrome": "58", "ie": "10" } } ] ], plugins: [ // @./plugin-transform-runtime", @./plugin-proposal-optional-chaining", @.*/plugin-proposal-nullish-coalescing-operator", ] }), ] }, server: { defaultPluginOptions: { }, extraPlugin: [ babel({ babelHelpers: 'bundled', // babelHelpers: 'runtime', exclude: 'node_modules/*', "presets": [ [ @./preset-env", { "modules": false, "useBuiltIns": "usage", "corejs": "2", // 新增 "targets": { "chrome": "58", "ie": "10" } } ] ], plugins: [ // @./plugin-transform-runtime", @./plugin-proposal-optional-chaining", @.***/plugin-proposal-nullish-coalescing-operator", ] }), ] } } } const userConfig: UserConfig = { viteConfig: vConfig } export { userConfig }
期望的结果

如果是配置问题，求正确配置

— Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android. You are receiving this because you are subscribed to this thread.Message ID: @.***>

zhangyuang commented 2 years ago

哦不对是 extension tsx and 服务端不用配

发自我的iPhone

------------------ 原始邮件 ------------------ 发件人: wfwfwf128 @.> 发送时间: 2022年1月13日 11:28 收件人: zhangyuang/ssr @.> 抄送: Subscribed @.***> 主题: Re: [zhangyuang/ssr] vite启动时，低版本chrome浏览器报错对可选链操作符不支持 (Issue #153)

重现方法

chrome浏览器版本：65.0.3325.181

代码为 npm init ssr-app my-ssr-project 初始化选择的 midway-react-ssr 版本使用yarn start:vite 启动

具体报错

示例样式是乱的，看chrome控制台，报错 Uncaught (in promise) SyntaxError: Unexpected token . 再看具体发现是可选链操作符不支持，没有转成es5

尝试的方案

尝试采用rollup/plugin-babel的方式来解决，但没有用（不知道是否是我配置有误），修改config.ts配置如下: import type { UserConfig } from 'ssr-types' import { babel } from @.*/plugin-babel'; const vConfig = () => { return { client: { defaultPluginOptions: { }, extraPlugin: [ babel({ babelHelpers: 'bundled', // babelHelpers: 'runtime', exclude: 'node_modules/*', "presets": [ [ @./preset-env", { "modules": false, "useBuiltIns": "usage", "corejs": "2", // 新增 "targets": { "chrome": "58", "ie": "10" } } ] ], plugins: [ // @./plugin-transform-runtime", @./plugin-proposal-optional-chaining", @.*/plugin-proposal-nullish-coalescing-operator", ] }), ] }, server: { defaultPluginOptions: { }, extraPlugin: [ babel({ babelHelpers: 'bundled', // babelHelpers: 'runtime', exclude: 'node_modules/*', "presets": [ [ @./preset-env", { "modules": false, "useBuiltIns": "usage", "corejs": "2", // 新增 "targets": { "chrome": "58", "ie": "10" } } ] ], plugins: [ // @./plugin-transform-runtime", @./plugin-proposal-optional-chaining", @.***/plugin-proposal-nullish-coalescing-operator", ] }), ] } } } const userConfig: UserConfig = { viteConfig: vConfig } export { userConfig }
期望的结果

如果是配置问题，求正确配置

— Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android. You are receiving this because you are subscribed to this thread.Message ID: @.***>

wfwfwf128 commented 2 years ago

import type { UserConfig } from 'ssr-types'
import { babel } from '@rollup/plugin-babel';
const vConfig = () => {
  return {
    client: {
      defaultPluginOptions: {
      },
      extraPlugin: [
        babel({
          babelHelpers: 'bundled',
          // babelHelpers: 'runtime',
          exclude: 'node_modules/**',
          //  ['.js', '.jsx', '.es6', '.es', '.mjs'] 默认值
          extensions: ['.js', '.jsx', '.es6', '.es', '.mjs', '.tsx'],
          "presets": [
            [
              "@babel/preset-env",
              {
                "modules": false,
                "useBuiltIns": "usage",
                "corejs": "2", // 新增
                "targets": {
                  "chrome": "58",
                  "ie": "10"
                }
              }
            ]
          ],
          plugins: [
            // "@babel/plugin-transform-runtime",
            // "@babel/plugin-proposal-optional-chaining",
            // "@babel/plugin-proposal-nullish-coalescing-operator",
          ]
        }),
      ]
    },
    server: {
      defaultPluginOptions: {
      },
      // extraPlugin: [
      //   babel({
      //     babelHelpers: 'bundled',
      //     // babelHelpers: 'runtime',
      //     exclude: 'node_modules/**',
      //     "presets": [
      //       [
      //         "@babel/preset-env",
      //         {
      //           "modules": false,
      //           "useBuiltIns": "usage",
      //           "corejs": "2", // 新增
      //           "targets": {
      //             "chrome": "58",
      //             "ie": "10"
      //           }
      //         }
      //       ]
      //     ],
      //     plugins: [
      //       // "@babel/plugin-transform-runtime",
      //       "@babel/plugin-proposal-optional-chaining",
      //       "@babel/plugin-proposal-nullish-coalescing-operator",
      //     ]
      //   }),
      // ]
    }
  }
}

const userConfig: UserConfig = {
  viteConfig: vConfig
}
export { userConfig }

大佬说的对，分享一下正确配置

zhangyuang commented 2 years ago

close by https://github.com/zhangyuang/ssr/commit/8847197ff8065b40a883c37f107ee8eae8d32ba9

zhangyuang / ssr