For my application when I'm trying to run the buildDev script from my package.json I am getting the error:
[webpack-cli] SyntaxError: Invalid regular expression: /(\p{Uppercase_Letter}+|\p{Lowercase_Letter}|\d)(\p{Uppercase_Letter}+)/: Invalid escape
at pathToArgumentName (c:\tfs\Agility\Branches\AgilityMakeover\Client\Web\AgilityItemViewer\node_modules\webpack\lib\cli.js:67:4)
at addFlag (c:\tfs\Agility\Branches\AgilityMakeover\Client\Web\AgilityItemViewer\node_modules\webpack\lib\cli.js:207:16)
at traverse (c:\tfs\Agility\Branches\AgilityMakeover\Client\Web\AgilityItemViewer\node_modules\webpack\lib\cli.js:284:21)
at traverse (c:\tfs\Agility\Branches\AgilityMakeover\Client\Web\AgilityItemViewer\node_modules\webpack\lib\cli.js:340:23)
at traverse (c:\tfs\Agility\Branches\AgilityMakeover\Client\Web\AgilityItemViewer\node_modules\webpack\lib\cli.js:289:24)
at Object.getArguments (c:\tfs\Agility\Branches\AgilityMakeover\Client\Web\AgilityItemViewer\node_modules\webpack\lib\cli.js:349:2)
at WebpackCLI.getBuiltInOptions (c:\tfs\Agility\Branches\AgilityMakeover\Client\Web\AgilityItemViewer\node_modules\webpack-cli\lib\webpack-cli.js:892:41)
at makeCommand (c:\tfs\Agility\Branches\AgilityMakeover\Client\Web\AgilityItemViewer\node_modules\webpack-cli\lib\webpack-cli.js:1053:22)
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:182:7)
The buildDev script is:
"buildDev": "npm run unsetReadOnly && webpack --env NODE_ENV=local && ECHO Completed at %TIME% ",
The thing I'm finding confusing is if I go to my terminal and do:
npm run unsetReadOnly && webpack --env NODE_ENV=local && ECHO Completed at %TIME%
It works absolutely fine with no errors but doing npm run buildDev gets me that error.
What could be causing that? I'm not sure if this has anything to do with it but I am using:
webpack: 5.70.0 webpack-cli: 4.9.2
Edit:
I'm not sure if maybe this would have something to do with it but this is my webpack.config.js:
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
mode: 'development',
context: __dirname,
output: {
path: __dirname,
filename: '[name].bundle.js'
},
devtool: 'eval-cheap-module-source-map',
entry: {
'Content/CSS/bundles/common': './Content/CSS/commonCss.js',
'Scripts/bundles/common': ['babel-polyfill', './Scripts/common.js'],
'Scripts/bundles/gdpr_dm': ['babel-polyfill', './Areas/Gdpr/DataMappingApp/main.jsx'],
'Scripts/bundles/gdpr_dma': ['babel-polyfill', './Areas/Gdpr/GdprListAdminApp/main.jsx'],
'Scripts/bundles/gdpr_sar': ['babel-polyfill', './Areas/Gdpr/SarApp/main.jsx'],
'Scripts/bundles/support_columns': ['babel-polyfill', './Areas/Support/GridColumnsAdminApp/main.jsx'],
'Scripts/bundles/vendor': [
'react', 'react-router', 'react-dom',
'react-router-dom', 'redux', 'react-redux',
'@progress/kendo-ui/js/kendo.core', '@progress/kendo-dropdowns-react-wrapper',
'@progress/kendo-grid-react-wrapper', '@progress/kendo-ui/js/kendo.grid.js',
'@progress/kendo-ui/js/kendo.tooltip', '@progress/kendo-ui/js/kendo.multiselect'
],
'Scripts/bundles/admin_area': ['babel-polyfill', './Areas/Admin/scripts/admin_area.js']
},
module: {
rules: [
{
test: /\.jsx?$/,
include: [
path.join(__dirname, '/Areas/Gdpr/DataMappingApp/'),
path.join(__dirname, '/Areas/Gdpr/GdprListAdminApp/'),
path.join(__dirname, '/Areas/Gdpr/SarApp/'),
path.join(__dirname, '/Areas/Support/GridColumnsAdminApp/'),
path.join(__dirname, '/common_scripts/')
],
use: [{
loader: 'babel-loader',
}]
},
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
{
test: /\.(png|jpe?g|gif)$/,
use: [{ loader: 'url-loader',
options: {
limit: 4096,
name: '[name].[ext]&useRelativePath=true&publicPath=../'
}
}]
}
]
},
plugins: [
new MiniCssExtractPlugin(),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
}),
new webpack.ProvidePlugin({
__assign: ['tslib', '__assign'],
__extends: ['tslib', '__extends'],
}),
],
resolve: {
extensions: ['.js', '.jsx'/*, ".tsx", ".ts"*/],
fallback: {
"fs": false,
"crypto": require.resolve("crypto-browserify"),
"https": require.resolve("https-browserify"),
"stream": require.resolve("stream-browserify"),
"path": require.resolve("path-browserify"),
"http": require.resolve("stream-http"),
},
alias: {
common_scripts: path.resolve(__dirname, 'common_scripts'),
process: "process/browser"
}
},
};
and my package.json:
{
"main": "index.js",
"scripts": {
"compile": "babel --presets es2015 -d /tests common_scripts/",
"test": "npm run compile && mocha --require babel-core/register jsdom-global/register common_scripts/**/*tests.js Areas/Gdpr/DataMappingApp/**/*tests.js Areas/Gdpr/GdprListAdminApp/**/*tests.js Areas/Gdpr/scripts/*.tests.js Areas/Support/GridColumnsAdminApp/**/*tests.js --reporter spec",
"buildDev": "npm run unsetReadOnly && webpack --env NODE_ENV=local && ECHO Completed at %TIME% ",
"buildDevB": "npm run unsetReadOnly && webpack --env NODE_ENV=local && ECHO Completed at %TIME% && echo \u0007 ",
"buildProd": "npm run unsetReadOnly",
"lint": "eslint Areas/Gdpr/DataMappingApp/** Areas/Gdpr/GdprListAdminApp/** Areas/Support/GridColumnsAdminApp/** Areas/Gdpr/SarApp/** common_scripts/**",
"unsetReadOnly": "attrib -R Content\\kendo\\2017.1.223\\Bootstrap\\*.png /S",
"bell": "echo \u0007",
"preinstall": "npx npm-force-resolutions"
},
"author": "BusinessPort",
"license": "ISC",
"resolutions": {
"js-yaml": "^3.11.3",
"is-svg": "^4.2.2"
},
"devDependencies": {
"@babel/core": "^7.17.8",
"@babel/plugin-proposal-object-rest-spread": "7.17.3",
"@babel/preset-env": "^7.16.11",
"@babel/preset-react": "^7.16.7",
"babel-cli": "^6.18.0",
"babel-eslint": "^8.2.3",
"babel-loader": "^8.2.4",
"babel-plugin-es6-promise": "^1.1.1",
"babel-plugin-module-resolver": "^3.1.1",
"babel-plugin-transform-object-assign": "^6.22.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"chai": "^4.1.2",
"css-loader": "^6.7.1",
"eslint": "^8.12.0",
"eslint-import-resolver-babel-module": "^4.0.0",
"eslint-import-resolver-webpack": "^0.9.0",
"eslint-plugin-import": "^2.11.0",
"eslint-plugin-react": "^7.7.0",
"file-loader": "^6.2.0",
"jsdom": "^11.10.0",
"jsdom-global": "^3.0.2",
"mini-css-extract-plugin": "2.4.0",
"mocha": "^9.2.2",
"node": "^9.8.0",
"script-loader": "^0.7.2",
"source-map-support": "0.4.3",
"style-loader": "^0.20.3",
"ts-loader": "^3.5.0",
"typescript": "^2.6.2",
"url-loader": "^4.1.1",
"webpack": "^5.70.0",
"webpack-cli": "^4.9.2"
},
"dependencies": {
"@popperjs/core": "^2.11.4",
"@progress/kendo-data-query": "^1.2.2",
"@progress/kendo-dateinputs-react-wrapper": "^2018.2.620",
"@progress/kendo-dropdowns-react-wrapper": "^2018.1.221",
"@progress/kendo-grid-react-wrapper": "^2018.1.221",
"@progress/kendo-react-dropdowns": "^0.5.1",
"@progress/kendo-theme-bootstrap": "^5.2.0",
"@progress/kendo-theme-default": "^2.50.0",
"@progress/kendo-ui": "^2018.1.411",
"@progress/kendo-validator-react-wrapper": "^2018.1.221",
"@progress/kendo-window-react-wrapper": "^2018.1.221",
"acorn": "^8.7.0",
"babel-polyfill": "^6.26.0",
"bootstrap": "^5.1.3",
"braces": "^3.0.2",
"es6-promise": "^4.2.4",
"glob-parent": "^6.0.2",
"is-extglob": "^2.1.1",
"jquery": "3.6.0",
"prop-types": "^15.6.1",
"react": "^16.3.1",
"react-dom": "^16.3.1",
"react-redux": "^5.0.7",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-router-redux": "^4.0.8",
"redux": "^4.1.2",
"redux-thunk": "^2.4.1",
"webpack-dev-server": "^4.7.4"
}
}
Finally figured it out, the issue was caused by having:
"node": "^9.8.0",
in the devDependencies in package.json. Removing this solved the issue and I can now run npm run BuildDev with no issues