Prestashop: Suspicious behaviour found while compiling theme.css file

[dineshbadrukhiya]

I had opened PR #11424 and modified _tinymce.scss file.
Then to compile admin-dev/themes/new-theme
I had run command npm install
then run npm run build to compile the files
But after running this command I got "NODE_ENV" is not recognized as an internal or external command, operable program or batch file.
Then I run command npm install -g win-node-env
and compilation done successfully but as on Github Desktop it was showing list of 26 changed files.
Content changes in below files
admin-dev\themes\new-theme\package-lock.json
admin-dev\themes\new-theme\public\backup.bundle.js
admin-dev\themes\new-theme\public\invoices.bundle.js
admin-dev\themes\new-theme\public\main.bundle.js
admin-dev\themes\new-theme\public\meta.bundle.js
admin-dev\themes\new-theme\public\order_delivery.bundle.js
admin-dev\themes\new-theme\public\product_preferences.bundle.js
admin-dev\themes\new-theme\public\stock.bundle.js
admin-dev\themes\new-theme\public\theme.css
admin-dev\themes\new-theme\public\translations.bundle.js
admin-dev\themes\new-theme\public\webservice.bundle.js

No content changes found in below file but in the list
admin-dev\themes\new-theme\package.json
admin-dev\themes\new-theme\public\catalog.bundle.js
admin-dev\themes\new-theme\public\catalog_product.bundle.js
admin-dev\themes\new-theme\public\email.bundle.js
admin-dev\themes\new-theme\public\geolocation.bundle.js
admin-dev\themes\new-theme\public\imports.bundle.js
admin-dev\themes\new-theme\public\improve_design_positions.bundle.js
admin-dev\themes\new-theme\public\localization.bundle.js
admin-dev\themes\new-theme\public\logs.bundle.js
admin-dev\themes\new-theme\public\module.bundle.js
admin-dev\themes\new-theme\public\module_card.bundle.js
admin-dev\themes\new-theme\public\order_preferences.bundle.js
admin-dev\themes\new-theme\public\payment_preferences.bundle.js
admin-dev\themes\new-theme\public\sql_manager.bundle.js
admin-dev\themes\new-theme\public\translation_settings.bundle.js

I’m posting this here as @matks suggested me, to investigate this suspicious behaviour with .js files

[matks]

Thanks for the bug report @dineshbadrukhiya 😄 the first track we can follow is to check on Windows machine whether we can reproduce your behavior

[marionf]

@khouloudbelguith Can you try to reproduce this one on Windows ?

[khouloudbelguith]

Hi @marionf,

Steps that I folowed:

1. Install PrestaShop cloned from this repository on windows 10
2. Edit the file /admin-dev/themes/new-theme/scss/components/_tinymce.sass Line 558 from background-color: #005fb3 to background-color: #005fb3 !important
3. Run npm install
4. Run npm run build => I have the same error "NODE_ENV" is not recognized as an internal or external command
   
5. Run npm install -g win-node-env => OK
6. Run npm run build => compilation done successfully => on Github Desktop it was showing list

chunk    {0} main.bundle.js, theme.css (main) 1.84 MB [entry] [rendered]
chunk    {1} stock.bundle.js (stock) 1.35 MB [entry] [rendered]
chunk    {2} translations.bundle.js (translations) 1.26 MB [entry] [rendered]
chunk    {3} product_page.bundle.js (product_page) 642 kB [entry] [rendered]
chunk    {4} categories.bundle.js (categories) 84.9 kB [entry] [rendered]
chunk    {5} meta.bundle.js (meta) 54.4 kB [entry] [rendered]
chunk    {6} customer.bundle.js (customer) 53.9 kB [entry] [rendered]
chunk    {7} cms_page.bundle.js (cms_page) 55.8 kB [entry] [rendered]
chunk    {8} webservice.bundle.js (webservice) 52.2 kB [entry] [rendered]
chunk    {9} email.bundle.js (email) 45.8 kB [entry] [rendered]
chunk   {10} profiles.bundle.js (profiles) 41.3 kB [entry] [rendered]
chunk   {11} contacts.bundle.js (contacts) 41.4 kB [entry] [rendered]
chunk   {12} language.bundle.js (language) 45 kB [entry] [rendered]
chunk   {13} employee.bundle.js (employee) 38.6 kB [entry] [rendered]
chunk   {14} supplier.bundle.js (supplier) 40.5 kB [entry] [rendered]
chunk   {15} sql_manager.bundle.js (sql_manager) 40 kB [entry] [rendered]
chunk   {16} currency.bundle.js (currency) 33.4 kB [entry] [rendered]
chunk   {17} logs.bundle.js (logs) 26.1 kB [entry] [rendered]
chunk   {18} backup.bundle.js (backup) 17.9 kB [entry] [rendered]
chunk   {19} module.bundle.js (module) 66.2 kB [entry] [rendered]
chunk   {20} invoices.bundle.js (invoices) 19.6 kB [entry] [rendered]
chunk   {21} module_card.bundle.js (module_card) 16.2 kB [entry] [rendered]
chunk   {22} translation_settings.bundle.js (translation_settings) 8.88 kB [entry] [rendered]
chunk   {23} imports.bundle.js (imports) 17.7 kB [entry] [rendered]
chunk   {24} product_preferences.bundle.js (product_preferences) 8.33 kB [entry] [rendered]
chunk   {25} catalog.bundle.js (catalog) 5.84 kB [entry] [rendered]
chunk   {26} themes.bundle.js (themes) 3.88 kB [entry] [rendered]
chunk   {27} tax.bundle.js (tax) 3.82 kB [entry] [rendered]
chunk   {28} order_preferences.bundle.js (order_preferences) 4.09 kB [entry] [rendered]
chunk   {29} improve_design_positions.bundle.js (improve_design_positions) 12.4 kB [entry] [rendered]
chunk   {30} catalog_product.bundle.js (catalog_product) 19.3 kB [entry] [rendered]
chunk   {31} order_delivery.bundle.js (order_delivery) 4.21 kB [entry] [rendered]
chunk   {32} payment_preferences.bundle.js (payment_preferences) 4.08 kB [entry] [rendered]
chunk   {33} geolocation.bundle.js (geolocation) 3.8 kB [entry] [rendered]
chunk   {34} localization.bundle.js (localization) 1.25 kB [entry] [rendered]
chunk   {35} form_popover_error.bundle.js (form_popover_error) 2.77 kB [entry] [rendered]
Child extract-text-webpack-plugin:
    chunk    {0} extract-text-webpack-plugin-output-filename 64.9 kB [entry] [rendered]
Child extract-text-webpack-plugin:
    chunk    {0} extract-text-webpack-plugin-output-filename 67.3 kB [entry] [rendered]
Child extract-text-webpack-plugin:
    chunk    {0} extract-text-webpack-plugin-output-filename 2.04 MB [entry] [rendered]

1. Run git status => I have this list:

 modified:   admin-dev/themes/new-theme/public/backup.bundle.js
        modified:   admin-dev/themes/new-theme/public/catalog.bundle.js
        modified:   admin-dev/themes/new-theme/public/catalog_product.bundle.js
        modified:   admin-dev/themes/new-theme/public/categories.bundle.js
        modified:   admin-dev/themes/new-theme/public/cms_page.bundle.js
        modified:   admin-dev/themes/new-theme/public/contacts.bundle.js
        modified:   admin-dev/themes/new-theme/public/currency.bundle.js
        modified:   admin-dev/themes/new-theme/public/customer.bundle.js
        modified:   admin-dev/themes/new-theme/public/email.bundle.js
        modified:   admin-dev/themes/new-theme/public/employee.bundle.js
        modified:   admin-dev/themes/new-theme/public/form_popover_error.bundle.js
        modified:   admin-dev/themes/new-theme/public/geolocation.bundle.js
        modified:   admin-dev/themes/new-theme/public/imports.bundle.js
        modified:   admin-dev/themes/new-theme/public/improve_design_positions.bundle.js
        modified:   admin-dev/themes/new-theme/public/invoices.bundle.js
        modified:   admin-dev/themes/new-theme/public/language.bundle.js
        modified:   admin-dev/themes/new-theme/public/localization.bundle.js
        modified:   admin-dev/themes/new-theme/public/logs.bundle.js
        modified:   admin-dev/themes/new-theme/public/main.bundle.js
        modified:   admin-dev/themes/new-theme/public/meta.bundle.js
        modified:   admin-dev/themes/new-theme/public/module.bundle.js
        modified:   admin-dev/themes/new-theme/public/module_card.bundle.js
        modified:   admin-dev/themes/new-theme/public/order_delivery.bundle.js
        modified:   admin-dev/themes/new-theme/public/order_preferences.bundle.js
        modified:   admin-dev/themes/new-theme/public/payment_preferences.bundle.js
        modified:   admin-dev/themes/new-theme/public/product_page.bundle.js
        modified:   admin-dev/themes/new-theme/public/product_preferences.bundle.js
        modified:   admin-dev/themes/new-theme/public/profiles.bundle.js
        modified:   admin-dev/themes/new-theme/public/sql_manager.bundle.js
        modified:   admin-dev/themes/new-theme/public/stock.bundle.js
        modified:   admin-dev/themes/new-theme/public/supplier.bundle.js
        modified:   admin-dev/themes/new-theme/public/theme.css
        modified:   admin-dev/themes/new-theme/public/themes.bundle.js
        modified:   admin-dev/themes/new-theme/public/translation_settings.bundle.js
        modified:   admin-dev/themes/new-theme/public/translations.bundle.js
        modified:   admin-dev/themes/new-theme/public/webservice.bundle.js
        modified:   admin-dev/themes/new-theme/scss/components/_tinymce.sass
        modified:   package-lock.json
        modified:   package.json

=> Issue reproduced with develop branch.

Thanks!

[eternoendless]

We have been experiencing this weird behavior as well, both on Mac and Linux. The last time I checked a diff from the output, there were some slight, non-functional differences according to the local configuration. I think the installed Node/NPM version has something to do with it.

To avoid unnecessary conflicts, it's best to to avoid committing those files if the source file wasn't modified.

[PierreRambaud]

Should we need to force the Node/NPM version? at least a minimum, which is not really defined from now

[NeOMakinG]

node/npm version can cause dist files non-functional differences, but as we don't push assets anymore, it won't do any conflict.

Also our supported version is now in the documentation, we can close this one!

If you experience some bugs with webpack, just open it again (it has been really improved last months).