webpack-cli Unknown argument and SyntaxError

Question

i'm new to prestashop theme development.

i had setup my local enviroment and all works fine.

i try to build a theme from the classic default theme.

i go into the _dev folted inside the theme and run "npm install".

next i run "npm run build" to run the script: "build": "NODE_ENV=production webpack --progress --colors --debug --display-chunks"

and i get the following error:

>     ADMIN@DESKTOP-5JOQKQA MINGW64 /c/laragon/www/PrestaShopDev/themes/prodet/_dev ((1.7.7.0))
>     $ npm run build
>     
>     > [email protected] build C:\laragon\www\PrestaShopDev\themes\prodet\_dev
>     > NODE_ENV=production webpack --progress --colors --debug --display-chunks
>     
>     [webpack-cli] Unknown argument: --colors
>     Did you mean --color?
>     [webpack-cli] Unknown argument: --debug
>     [webpack-cli] Unknown argument: --display-chunks
>     Note: This command was run via npm module 'win-node-env'
>     npm ERR! code ELIFECYCLE
>     npm ERR! errno 2
>     npm ERR! [email protected] build: `NODE_ENV=production webpack --progress --colors --debug
> --display-chunks`
>     npm ERR! Exit status 2
>     npm ERR!
>     npm ERR! Failed at the [email protected] build script.
>     npm ERR! This is probably not a problem with npm. There is likely additional logging output above.       
>     
>     npm ERR! A complete log of this run can be found in:
>     npm ERR!     C:\Users\ADMIN\AppData\Roaming\npm-cache\_logs\2020-12-11T16_17_37_009Z-debug.log

how can i fix it?

here is the package.json file:

{
  "name": "prestashop-classic-dev-tools",
  "version": "1.0.0",
  "description": "Tools to help while developing the Classic theme",
  "main": "index.js",
  "scripts": {
    "build": "NODE_ENV=production webpack --progress --colors --debug --display-chunks",
    "watch": "webpack --progress --colors --debug --display-chunks --watch"
  },
  "author": "PrestaShop",
  "license": "AFL-3.0",
  "devDependencies": {
    "autoprefixer": "^6.7.7",
    "babel-loader": "^8.2.2",
    "bootstrap": "4.0.0-alpha.5",
    "bootstrap-touchspin": "^3.1.1",
    "bourbon": "^4.2.6",
    "css-loader": "^5.0.1",
    "expose-loader": "^0.7.3",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.10.1",
    "flexibility": "^1.0.5",
    "jquery": "^3.5.1",
    "jquery-touchswipe": "^1.6",
    "jquery.browser": "^0.1.0",
    "material-design-icons": "^2.1.3",
    "node-sass": "^4.14.1",
    "notosans-fontface": "~1.0.1",
    "postcss-flexibility": "^1.0.2",
    "postcss-loader": "^1.3.3",
    "sass-loader": "^6.0.3",
    "style-loader": "^0.14.1",
    "tether": "^1.1.1",
    "velocity-animate": "^1.2.3",
    "webpack": "^5.10.0",
    "webpack-cli": "^4.2.0",
    "webpack-sources": "^0.1.0"
  }
}

my node version is:

$ node -v
v10.18.1

my npm version is:

$ npm -v
6.13.4

i really don't understand how to fix this.

Answer 1

I am also new to prestashop development. I had the same error.

I solved it using a second clone of the classic folder. the error is probably due to the webpack version. Here is the package.json

{
  "name": "prestashop-classic-dev-tools",
  "version": "1.0.0",
  "description": "Tools to help while developing the Classic theme",
  "main": "index.js",
  "scripts": {
    "build": "NODE_ENV=production webpack --progress --colors --debug --display-chunks",
    "watch": "webpack --progress --colors --debug --display-chunks --watch"
  },
  "author": "PrestaShop",
  "license": "AFL-3.0",
  "devDependencies": {
    "autoprefixer": "^6.7.7",
    "babel-loader": "^5.3.2",
    "bootstrap": "4.0.0-alpha.5",
    "bootstrap-touchspin": "^3.1.1",
    "bourbon": "^4.2.6",
    "css-loader": "^0.27.3",
    "expose-loader": "^0.7.3",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.10.1",
    "flexibility": "^1.0.5",
    "jquery": "^2.1.4",
    "material-design-icons": "^2.1.3",
    "node-sass": "^4.14.1",
    "notosans-fontface": "~1.0.1",
    "postcss-flexibility": "^1.0.2",
    "postcss-loader": "^1.3.3",
    "sass-loader": "^6.0.3",
    "style-loader": "^0.14.0",
    "tether": "^1.1.1",
    "velocity-animate": "^1.2.3",
    "webpack": "^2.2.1",
    "webpack-sources": "^0.1.0"
  }
}

in the clone after

npm install
npm run build

For me, it worked and compiles the theme