require is not defined when using Lazy Loading Routes by vue-router

[shenX-2021]

Describe the bug

use Lazy Loading Routes by vue-router like the below code,

// router.js
createRouter({
  history: createWebHashHistory('/'),
  routes: [
    {
      path: '/',
      name: 'Home',
      component: () => import('/src/views/Home.vue')
    }
  ]
});

vite.config.js
export default defineConfig({
  // ...
  build: {
    target: ['chrome61']
  },
})

it is error console in browser

vendor.dcd75cb2.js:6 ReferenceError: require is not defined
    at index.a463ca0d.js:1

Reproduction

https://github.com/gxsandzxl/vite-bug-demo

System Info

System:
    OS: Windows 10 10.0.17763
    CPU: (4) x64 Intel(R) Core(TM) i5-6500 CPU @ 3.20GHz
    Memory: 3.63 GB / 11.88 GB
  Binaries:
    Node: 12.16.2 - D:\Program Files\node\node.EXE
    Yarn: 1.22.10 - D:\Program Files\node\npm_global\yarn.CMD
    npm: 7.16.0 - D:\Program Files\node\npm.CMD
  Browsers:
    Chrome: 92.0.4515.159
    Edge: Spartan (44.17763.831.0)
    Internet Explorer: 11.0.17763.771
  npmPackages:
    @vitejs/plugin-vue: ^1.6.0 => 1.6.0
    vite: ^2.5.1 => 2.5.1

Used Package Manager

npm

Logs

No response

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.

[Ttou]

may be affected by this issue #3469

[haoqunjiang]

chrome61 requires plugin-legacy.
The build.target documentation isn't in sync with the "Browser Compatibility" section, though. Needs to be fixed.

[shenX-2021]

@sodatea Actually, my purpose is preventing css rgba transform to hex color style. I make some try
if using plugin-legacy, Minify will transform rgba to hex color style.
if using build: { target: ['chrome61'] }, dynamic import will cause this issue.

if it is not a bug, how to achieve my purpose.

[haoqunjiang]

Could you please provide a reproduction?
And what exact browser targets are you aiming at?

[shenX-2021]

https://github.com/gxsandzxl/vite-bug-demo
android wechat browser, it does't support rrggbbaa style

[Ttou]

@sodatea
vite 2.5.0 use esbuild to minify css, this will transform rgba to rrggbbaa, android webview can't support it;
vite 2.5.1 fix color transform with set target with chrome61, but this will cause an other error: require is not defined

[haoqunjiang]

That's a quirk in Android WeChat WebView (or to say, Tencent X5, because Android QQ Browser has this issue too).

I can't find any other browser that supports native dynamic imports but not RGBA hex color…

---

There's no easy way to work around this issue at the moment.
esbuild only supports mainstream browsers as its target. None of them share the same quirk as Tencent X5.

So please:

1. Disable minify completely and set up your own JS/CSS minification tools;
2. Or, downgrade to Vite 2.4, set build.cleanCssOptions to disable compatibility.colors.hexAlpha (seems to be disabled by default)

[shenX-2021]

That's a quirk in Android WeChat WebView (or to say, Tencent X5, because Android QQ Browser has this issue too).

I can't find any other browser that supports native dynamic imports but not RGBA hex color…

There's no easy way to work around this issue at the moment.
esbuild only supports mainstream browsers as its target. None of them share the same quirk as Tencent X5.

So please:

1. Disable minify completely and set up your own JS/CSS modification tools;
2. Or, downgrade to Vite 2.4, set build.cleanCssOptions to disable compatibility.colors.hexAlpha (seems to be disabled by default)

all right, thanks a lot

[Ttou]

@sodatea Is it possible to provide an property for minify css: 'esbuild' or 'clean-css' ?

[Shinigami92]

@Ttou Exactly that
In today Vite Meeting we discussed that we want an option for build.cssMinifyTarget + some good documentation what it is doing and when it is needed

[xkelvinx666]

That's a quirk in Android WeChat WebView (or to say, Tencent X5, because Android QQ Browser has this issue too).

I can't find any other browser that supports native dynamic imports but not RGBA hex color…

There's no easy way to work around this issue at the moment. esbuild only supports mainstream browsers as its target. None of them share the same quirk as Tencent X5.

So please:

1. Disable `minify` completely and set up your own JS/CSS minification tools;

2. Or, downgrade to Vite 2.4, set [`build.cleanCssOptions`](https://vitejs.dev/config/#build-cleancssoptions) to disable [`compatibility.colors.hexAlpha`](https://github.com/clean-css/clean-css#compatibility-modes) (seems to be disabled by default)

There is the changelog about why rgba to hex esbuild hex docs. Accroding to this docs, I try to set target at 'chrome51', it will not change rgba to hex