Search code examples
ruby-on-railswebpackwebpacker

SyntaxError: Invalid regular expression

I updated webpack version from 4.0.0 to 5.52.1 and after compiled with 'bin/webpack' the result is webpack 5.52.1 compiled successfully
But, I have the error message like the following

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

I have no idea about this because I can compile with webpack 4.0.0 without error message but after migrated to webpack 5.52.1 I got the error at new RegExp at /node_modules/webpack/lib/javascript/JavascriptParser.js and there is no /^(https?://)?(((a-zd).)+[a-z]{2,}|((d{1,3}.){3}d{1,3}))(:d+)?(/[-a-zd%_.~+])(?[&a-zd%_.~+=-])?(#[-a-zd_]*)?$/ in my script can anyone advise how can I find the root cause and fix this

Resources:
rails: 6.1.4
webpacker: 6.0.0.rc.2
webpack: 5.52.1
webpack-cli: 4.8.0

Solution

  • I can fix it with the following steps

    1. change from webpacker to shakapacker
    2. update the syntax from const componentRequireContext = require.context("components", true); to const componentRequireContext = require.context( "components", true, /^(https?://)?(((a-z\d).)+[a-z]{2,}|((\d{1,3}.){3}\d{1,3}))(:\d+)?(/[-a-z\d%_.~+])(?:[&a-z\d%_.~+=-])?(#[-a-z\d_]*)?$/ );