[legacy-post-process] unknown: Unknown property: Ll

[tjk]

[legacy-post-process] unknown: Unknown property: Ll
error during build:
Error: unknown: Unknown property: Ll
    at matchProperty (/frontend/node_modules/@babel/standalone/babel.js:66815:11)
    at handleLoneUnicodePropertyNameOrValue (/frontend/node_modules/@babel/standalone/babel.js:66890:20)
    at getUnicodePropertyEscapeSet (/frontend/node_modules/@babel/standalone/babel.js:66900:13)
    at processTerm (/frontend/node_modules/@babel/standalone/babel.js:67044:24)
    at /frontend/node_modules/@babel/standalone/babel.js:67085:18
    at Array.map (<anonymous>)
    at processTerm (/frontend/node_modules/@babel/standalone/babel.js:67084:31)
    at /frontend/node_modules/@babel/standalone/babel.js:67085:18
    at Array.map (<anonymous>)
    at processTerm (/frontend/node_modules/@babel/standalone/babel.js:67084:31)
    at rewritePattern (/frontend/node_modules/@babel/standalone/babel.js:67175:5)
    at PluginPass.RegExpLiteral (/frontend/node_modules/@babel/standalone/babel.js:67305:26)
    at newFn (/frontend/node_modules/@babel/standalone/babel.js:47504:23)
    at NodePath._call (/frontend/node_modules/@babel/standalone/babel.js:45923:20)
    at NodePath.call (/frontend/node_modules/@babel/standalone/babel.js:45910:19)
    at NodePath.visit$1 [as visit] (/frontend/node_modules/@babel/standalone/babel.js:45958:33)

I'm trying to log out the code babel transform craps out on and noticed this (from monaco-editor dependency):

_modifyText(text, wordSeparators) {
  return (text
    .replace(/(\p{Ll})(\p{Lu})/gmu, '$1_$2')
    .replace(/([^\b_])(\p{Lu})(\p{Ll})/gmu, '$1_$2$3')
    .toLocaleLowerCase());

(essentially the code here: https://github.com/microsoft/vscode/blob/main/src/vs/editor/contrib/linesOperations/linesOperations.ts#L1058)

I looked in to https://babeljs.io/docs/en/babel-plugin-proposal-unicode-property-regex and tried to manually inject it into this plugin (I don't think there are hooks to configure babel standalone that is run?) but no success yet. Not sure if I'm doing it wrong or if this is a red herring... any guidance would be useful (even tips on debugging).

UPDATE: Not a red herring! Deleting those two lines using \p regex in monaco-editor caused the build to succeed! Now would just love your help to understand the underlying issue and hopefully the fix. :)

PS: Thanks for this amazing software!

System Info

• vite version: 2.0.1
• Operating System: MacOS 11.1
• Node version: v12.18.1
• Package manager: npm

plugins: [
  vite:config     'alias',
  vite:config     'vite-plugin-gql', <--------------------------- CUSTOM
  vite:config     'vite-plugin-vue-svg', <--------------------------- CUSTOM
  vite:config     'vite:dynamic-import-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite-plugin-vue2', <--------------------------- CUSTOM
  vite:config     'vite-plugin-vue-md', <--------------------------- CUSTOM
  vite:config     'legacy-generate-polyfill-chunk',
  vite:config     'legacy-env',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:build-html',
  vite:config     'commonjs',
  vite:config     'vite:data-uri',
  vite:config     'rollup-plugin-dynamic-import-variables',
  vite:config     'legacy-post-process',
  vite:config     'vite:import-analysis',
  vite:config     'vite:esbuild-transpile',
  vite:config     'vite:terser',
  vite:config     'vite:reporter'
  vite:config   ],

[mwwm1]

• - ****

[jonaskuske]

Yup, as soon as you use @babel/core and @babel/preset-env instead of @babel/standalone and its included env preset in the legacy plugin, the issue disappears. Not necessary to manually add the relevant Babel plugin. (not possible anyway as afaik those depend on @babel/core and aren't compatible with the standalone version)

[tjk]

Is there a quick workaround possible here? I imagine the more proper fix is to allow hooking into babel to add custom, required plugins? (and these would have to be written to be compatible with babel standalone?)

[jonaskuske]

If you just need a quick way to get it to work, try this:

npm i -D @babel/core @babel/preset-env module-alias

then add this to your package.json:

"_moduleAliases": {
  "@babel/standalone": "node_modules/@babel/core",
  "babel-preset-env": "node_modules/@babel/preset-env"
}

and in your vite.config.js add this as the very first line:

import 'module-alias/register'

Now when @vitejs/plugin-legacy requires Babel standalone, it'll actually get the full @babel/core because of the module alias :)

[tjk]

That worked! Thanks a bunch.

[jonaskuske]

This was fixed by Babel and released in version 7.13.0: https://github.com/babel/babel/blob/main/CHANGELOG.md#bug-bug-fix-5

[jonaskuske]

@tjk You can already remove the packages needed for the workaround, then just reinstall the dependencies and it'll work

(npm rm module-alias @babel/core @babel/preset-env && rm -rf node_modules && npm i)