SyntaxError：无效的正则表达式答案

【问题标题】：SyntaxError: Invalid regular expressionSyntaxError：无效的正则表达式
【发布时间】：2021-09-11 05:27:18
【问题描述】：

我将 webpack 版本从 4.0.0 更新到 5.52.1，使用 'bin/webpack' 编译后，结果是 webpack 5.52.1 编译成功
但是，我有如下错误消息

SyntaxError: Invalid regular expression: /^(https?://)?((([a-zd]([a-zd-]*[a-zd])*).)+[a-z]{2,}|((d{1,3}.){3}d{1,3}))(:d+)?(/[-a-zd%_.~+]*)*(?[&a-zd%_.~+=-]*)?(#[-a-zd_]*)?$/: Invalid group
    at new RegExp (<anonymous>)
    at /node_modules/webpack/lib/javascript/JavascriptParser.js:410:24
    at Hook.eval [as call] (eval at create (/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:16)
    at JavascriptParser.evaluateExpression (/node_modules/webpack/lib/javascript/JavascriptParser.js:3150:25)
    at JavascriptParser.getRenameIdentifier (/node_modules/webpack/lib/javascript/JavascriptParser.js:1366:23)
    at JavascriptParser.walkVariableDeclaration (/node_modules/webpack/lib/javascript/JavascriptParser.js:2058:31)
    at JavascriptParser.walkStatement (/node_modules/webpack/lib/javascript/JavascriptParser.js:1566:10)
    at JavascriptParser.walkStatements (/node_modules/webpack/lib/javascript/JavascriptParser.js:1427:9)
    at /node_modules/webpack/lib/javascript/JavascriptParser.js:1601:9
    at JavascriptParser.inBlockScope (/node_modules/webpack/lib/javascript/JavascriptParser.js:3048:3)
.
.
.
webpack 5.52.1 compiled successfully

我对此一无所知，因为我可以在没有错误消息的情况下使用 webpack 4.0.0 进行编译，但是在迁移到 webpack 5.52.1 后，我在 /node_modules/ 的 new RegExp 处遇到了错误webpack/lib/javascript/JavascriptParser.js 并且没有 /^(https?://)?(((a-zd).)+[a-z]{2,} |((d{1,3}.){3}d{1,3}))(:d+)?(/[-a-zd%_.~+])(? [&a-zd%_.~+=-])?(#[-a-zd_]*)?$/ 在我的脚本中谁能告诉我如何找到根本原因并修复这

资源：
rails：6.1.4
webpacker：6.0.0.rc.2
webpack：5.52.1
webpack-cli：4.8.0

【问题讨论】：

标签： ruby-on-rails webpack webpacker

【解决方案1】：

您忘记了(? 后面的冒号并且丢失了反斜杠，在构造函数中将它们加倍：

new RegExp('^(https?://)?((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|((\\d{1,3}\\.){3}\\d{1,3}))(:\\d+)?(/[-a-z\\d%_.~+]*)*(?:[&a-z\\d%_.~+=-]*)?(#[-a-z\\d_]*)?$')

否则使用正则表达式：

/^(https?:\/\/)?((([a-z\d]([a-z\d-]*[a-z\d])*)\.)+[a-z]{2,}|((\d{1,3}\.){3}\d{1,3}))(:\d+)?(\/[-a-z\d%_.~+]*)*(?:[&a-z\d%_.~+=-]*)?(#[-a-z\d_]*)?$/

【讨论】：

现在，我可以通过以下步骤 1) 修复它。从“webpacker”更改为“shakapacker” 2）。从 "const componentRequireContext = require.context("components", true);" 更新语法to "const componentRequireContext = require.context("components", true, /^(https?:\/\/)?((([a-z\d]([a-z\d-]*[a-z\d])* )\.)+[a-z]{2,}|((\d{1,3}\.){3}\d{1,3}))(:\d+)?(\/[-a-z\ d%_.~+]*)*(?:[&a-z\d%_.~+=-]*)?(#[-a-z\d_]*)?$/ );"

【解决方案2】：

您需要通过假装反斜杠来逃避正则表达式中的斜杠。此外，您在倒数第二组的开头有一个多余的?：

^(https?:\/\/)?((([a-zd]([a-zd-]*[a-zd])*).)+[a-z]{2,}|((d{1,3}.){3}d{1,3}))(:d+)?(\/[-a-zd%_.~+]*)*([&a-zd%_.~+=-]*)?(#[-a-zd_]*)?$

【讨论】：

【解决方案3】：

我可以通过以下步骤修复它

从 webpacker 更改为 shakapacker
从 const componentRequireContext = 更新语法 require.context("组件", true); 到常量 componentRequireContext = require.context("组件", true, /^(https?://)?(((a-z\d).)+[a-z]{2,}|((\d{1,3}.){3}\d{1, 3}))(:\d+)?(/[-a-z\d%_.~+])(?:[&a-z\d%_.~+=-] em>)?(#[-a-z\d_]*)?$/ );

【讨论】：