[Bug]: e.charCodeAt is not a function with @babel/plugin-proposal-unicode-property-regex

[sin-ack]

💻

• Would you like to work on a fix?

How are you using Babel?

Other (Next.js, Gatsby, vue-cli, ...)

Input code

"Testör asdföasdf".toLocaleLowerCase().replace(/(^|\P{L})\w/gu, c => c.toLocaleUpperCase());
// Expected output: Testör Asdföasdf

There's also this, but I think the necessary Unicode data is missing because it fails with repl.jsx: Unknown property: L:
https://babeljs.io/repl/#?browsers=defaults%2C%20not%20ie_mob%2011&build=&builtIns=false&corejs=3.6&spec=false&loose=false&code_lz=M4OgLg9gMhDGCGAbApjA7sgTgYXsZAFAJQibIAOi8shA9AQHoA-AOgAoDeUAvkS2rQDmAVwA0AAljiAvAD5J4aHCTIAquXJZc-YkQDcAKCA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=env%2Creact%2Cstage-2&prettier=false&targets=&version=7.15.7&externalPlugins=%40babel%2Fplugin-proposal-unicode-property-regex%407.14.5&assumptions=%7B%7D

Configuration file name

.babelrc

Configuration

{
  "presets": ["next/babel"],
  "plugins": [["styled-components", { "ssr": true, "pure": true }]]
}

Current and expected behavior

Current behavior
The following error when the compiled code is run:

TypeError: e.charCodeAt is not a function
    at Array.map (<anonymous>)
    at Array.map (<anonymous>)
    at Array.map (<anonymous>)

Expected behavior
To not crash. The example code works in Node 16.

Environment

• Babel version: 7.15.5
• Node version: 16.3.0
• npm/Yarn version: 1.22.10
• OS: Gentoo GNU/Linux
• Monorepo: yes

Possible solution

Not quite sure, since I can't get compiled code output on the playground.

Additional context

No response

[JLHwung]

There is a bundling issue in @babel/plugin-proposal-unicode-property-regex (likely fixed in #13767). As a workaround, use the preset-env in REPL and it works.

I can not reproduce e.charCodeAt is not a function error. The generated code does not contain StringCharCodeAt call anyway. Can you provide a reproduction repo?

[sin-ack]

Unfortunately I cannot readily provide the code as this is a work project. However, the snippet was taken from this function:

export default function capitalize(s: string): string {
  return s.toLocaleLowerCase().replace(/(^|\P{L})\w/gu, c => c.toLocaleUpperCase());
}

The babel config is attached in the issue comment, and there is no specific Webpack configuration in next.config.js. The Next version is 11.1. I will try to create a reproduction repo soon and update this issue.

[babel-bot]

Hi @sin-ack! This issue is missing some important information we'll need to be able to reproduce this issue.

Please understand that we receive a high volume of issues, and there are only a limited number of volunteers that help maintain this project. The easier it is for us to decipher an issue with the info provided, the more likely it is that we'll be able to help.

Please make sure you have the following information documented in this ticket:

1. Your Babel configuration (typically from .babelrc or babel.config.js)
2. The current (incorrect) behavior you're seeing
3. The behavior you expect
4. A short, self-contained example

Please provide either a link to the problem via the repl, or if the repl is insufficient, a new and minimal repository with instructions on how to build/replicate the issue.

[JLHwung]

Maybe related: mathiasbynens/regexpu-core#13 (comment)

Do you have multiple versions of regenerate in your node_modules?

[sin-ack]

Sorry, I forgot about this issue. Will provide a minimal repro in a few days.