🐛 [BUG] - Issue with "ajax" and "ajaxSearch" Call and Cart Functionality about falcon

[pibrom]

Hello,
I'm having a similar problem with AJAX calls.
Once the theme is installed V 3.1.1 via the ZIP archive in release, everything works fine, Ajax calls (search, add to cart) work as expected.
But once the assets folder has been recompiled via webpack, the Ajax calls no longer display the modal windows (product search or add-to-cart confirmation modal).
My Node parameters, hosting, etc. are the same.

[Oksydan]

Hi @Agnax, @pibrom,

looks like your files are missing module code.
Can you tell me how did you build your assets and what package manager and version are you using? (yarn/npm/pnpm)

Yes that url will return you that error it should contain exit if there is no ajax used. Actually we are using this controller only for that ajax request.

[pibrom]

Hello @Oksydan
I used npm to build my assets, my version is : 9.7.1
Webpack 5.76.3
I used only the command npm run watch to build.

Here's the log :

`PS D:\Romaric\Clients\EMC_Suspensions\site_ps17\perso_EMC\themes\emcshocks_dev> npm run watch

[email protected] watch
webpack watch --progress --mode=development

95% emitting emit(node:11356) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_.
(Use node --trace-deprecation ... to show where the warning was created)
assets by status 590 KiB [cached] 16 assets
assets by status 683 KiB [compared for emit]
assets by path js/.js 654 KiB
assets by chunk 257 KiB (id hint: vendors) 10 assets
+ 21 assets
assets by path css/.css 29.9 KiB
asset css/listing.css 4.98 KiB [compared for emit] (name: listing)
asset css/css_dynamic_modal__index_scss.css 4.48 KiB [compared for emit]
asset css/css_dynamic_dropdown__index_scss.css 4.33 KiB [compared for emit]
+ 10 assets
assets by status 490 KiB [emitted]
asset css/theme.css 297 KiB [emitted] (name: theme)
asset js/theme.js 192 KiB [emitted] (name: theme) 1 related asset
asset preload.html 711 bytes [emitted]
Entrypoint theme 685 KiB (965 KiB) = js/swipervendor.js 196 KiB css/theme.css 297 KiB js/theme.js 192 KiB 18 auxiliary assets
Entrypoint product 11.6 KiB (8.27 KiB) = css/product.css 2.4 KiB js/product.js 9.23 KiB 1 auxiliary asset
Entrypoint checkout 11.7 KiB (6.11 KiB) = css/checkout.css 3.52 KiB js/checkout.js 8.16 KiB 1 auxiliary asset
Entrypoint listing 133 KiB (139 KiB) = css/listing.css 4.98 KiB js/listing.js 128 KiB 1 auxiliary asset
runtime modules 25.8 KiB 81 modules
orphan modules 415 KiB [orphan] 53 modules
cacheable modules 676 KiB (javascript) 327 KiB (css/mini-extract)
modules by path ./node_modules/ 610 KiB (javascript) 2.71 KiB (css/mini-extract)
modules by path ./node_modules/swiper/ 238 KiB (javascript) 2.71 KiB (css/mini-extract) 86 modules
modules by path ./node_modules/bootstrap/js/ 110 KiB 13 modules
+ 10 modules
modules by path ./js/ 65.4 KiB 36 modules
modules by path ./css/ 450 bytes (javascript) 324 KiB (css/mini-extract)
modules by path ./css/dynamic/ 250 bytes (javascript) 16.3 KiB (css/mini-extract) 10 modules
modules by path ./css/.scss 200 bytes (javascript) 308 KiB (css/mini-extract)
javascript modules 200 bytes 4 modules
css modules 308 KiB 4 modules
external "jQuery" 42 bytes [built] [code generated]
external "prestashop" 42 bytes [built] [code generated]
webpack 5.76.3 compiled successfully in 12463 ms
assets by status 1.43 MiB [cached] 61 assets
assets by status 298 KiB [emitted]
asset css/theme.css 297 KiB [emitted] (name: theme)
asset preload.html 711 bytes [emitted]
Entrypoint theme 685 KiB (965 KiB) = js/swipervendor.js 196 KiB css/theme.css 297 KiB js/theme.js 192 KiB 18 auxiliary assets
Entrypoint product 11.6 KiB (8.27 KiB) = css/product.css 2.4 KiB js/product.js 9.23 KiB 1 auxiliary asset
Entrypoint checkout 11.7 KiB (6.11 KiB) = css/checkout.css 3.52 KiB js/checkout.js 8.16 KiB 1 auxiliary asset
Entrypoint listing 133 KiB (139 KiB) = css/listing.css 4.98 KiB js/listing.js 128 KiB 1 auxiliary asset
cached modules 737 KiB (javascript) 29.9 KiB (css/mini-extract) 13.9 KiB (runtime) [cached] 231 modules
orphan modules 318 KiB [orphan] 1 module
cacheable modules 50 bytes (javascript) 297 KiB (css/mini-extract)
./css/theme.scss 50 bytes [built]
css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[3]!./css/theme.scss 297 KiB [built] [code generated]
webpack 5.76.3 compiled successfully in 6387 ms
`

[Agnax]

Hello @pibrom and @Oksydan

I also use npm v8.1.0 and webpack v5.53.0.
To perform the build, I use Windows 10 21H2, and the server is running on Linux, which I didn't mention before.

To build, I mix between npm run build and npm run watch, and the result is always the same: the ajax and ajaxsearch calls don't work.

I haven't modified anything in the package.json, so it's the same default configuration.

Here, I'll show you the log:

95% emitting emit(node:11648) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
        Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
        Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.
(Use `node --trace-deprecation ...` to show where the warning was created)
assets by status 590 KiB [cached] 16 assets
assets by status 1.15 MiB [emitted]
  assets by path js/*.js 845 KiB
    assets by chunk 257 KiB (id hint: vendors)
      asset js/vendors-node_modules_bootstrap_js_src_util_js-node_modules_popper_js_dist_esm_popper_js.js 93.1 KiB [emitted] (id hint: vendors) 1 related asset
      asset js/vendors-node_modules_bootstrap_js_src_modal_js.js 27.4 KiB [emitted] (id hint: vendors) 1 related asset
      + 8 assets
    + 22 assets
  assets by path css/*.css 328 KiB
    asset css/theme.css 298 KiB [emitted] (name: theme)
    asset css/listing.css 4.98 KiB [emitted] (name: listing)
    asset css/css_dynamic_modal__index_scss.css 4.48 KiB [emitted]
    asset css/css_dynamic_dropdown__index_scss.css 4.33 KiB [emitted]
    + 10 assets
asset preload.html 699 bytes [compared for emit]
Entrypoint theme 686 KiB (965 KiB) = js/swipervendor.js 196 KiB css/theme.css 298 KiB js/theme.js 192 KiB 18 auxiliary assets
Entrypoint product 11.6 KiB (8.27 KiB) = css/product.css 2.4 KiB js/product.js 9.23 KiB 1 auxiliary asset       
Entrypoint checkout 11.7 KiB (6.11 KiB) = css/checkout.css 3.52 KiB js/checkout.js 8.16 KiB 1 auxiliary asset   
Entrypoint listing 133 KiB (139 KiB) = css/listing.css 4.98 KiB js/listing.js 128 KiB 1 auxiliary asset
runtime modules 25.7 KiB 81 modules
orphan modules 415 KiB [orphan] 53 modules
cacheable modules 676 KiB (javascript) 328 KiB (css/mini-extract)
  modules by path ./node_modules/ 610 KiB (javascript) 2.71 KiB (css/mini-extract)
    modules by path ./node_modules/swiper/ 238 KiB (javascript) 2.71 KiB (css/mini-extract) 86 modules
    modules by path ./node_modules/bootstrap/js/ 110 KiB 13 modules
    + 10 modules
  modules by path ./js/ 65.4 KiB 36 modules
  modules by path ./css/ 450 bytes (javascript) 325 KiB (css/mini-extract)
    modules by path ./css/dynamic/ 250 bytes (javascript) 16.3 KiB (css/mini-extract) 10 modules
    modules by path ./css/*.scss 200 bytes (javascript) 309 KiB (css/mini-extract)
      javascript modules 200 bytes 4 modules
      css modules 309 KiB 4 modules
external "jQuery" 42 bytes [built] [code generated]
external "prestashop" 42 bytes [built] [code generated]
webpack 5.76.3 compiled successfully in 11472 ms
assets by status 1.72 MiB [cached] 62 assets
asset preload.html 699 bytes [emitted]
Entrypoint theme 686 KiB (965 KiB) = js/swipervendor.js 196 KiB css/theme.css 298 KiB js/theme.js 192 KiB 18 auxiliary assets
Entrypoint product 11.6 KiB (8.27 KiB) = css/product.css 2.4 KiB js/product.js 9.23 KiB 1 auxiliary asset
Entrypoint checkout 11.7 KiB (6.11 KiB) = css/checkout.css 3.52 KiB js/checkout.js 8.16 KiB 1 auxiliary asset     
Entrypoint listing 133 KiB (139 KiB) = css/listing.css 4.98 KiB js/listing.js 128 KiB 1 auxiliary asset
cached modules 737 KiB (javascript) 328 KiB (css/mini-extract) 13.9 KiB (runtime) [cached] 232 modules
orphan modules 319 KiB [orphan] 1 module
./css/theme.scss 50 bytes [built]
webpack 5.76.3 compiled successfully in 4776 ms

[Oksydan]

Hi,

I tried to reproduce an issue with node version 18.12.1 and npm version 18.12.1 but everything is working as expected 😕.
It just looks like you are missing that modules assets. It should compile those files and include them in theme.js files.

modules by path ../../../modules/ 15.9 KiB (javascript) 580 bytes (css/mini-extract)
  modules by path ../../../modules/is_favoriteproducts/_theme_dev/src/ 7.72 KiB (javascript) 580 bytes (css/mini-extract) 6 modules
  modules by path ../../../modules/is_searchbar/_theme_dev/src/js/theme/ 3.92 KiB 2 modules
  ../../../modules/is_shoppingcart/_theme_dev/src/js/theme/index.js 2.81 KiB [built] [code generated]
  ../../../modules/is_themecore/_theme_dev/src/js/listing/index.js 1.42 KiB [built] [code generated]

Could you check if for example rootProject/modules/is_searchbar/_theme_dev/src/js/theme/index.js file exists in your project?
BTW I recommend using dev script instead of watch script for development. Watch script won't load your changes live with HMR.
I am not sure if your problem is windows specific problem 🤔. Are you using windows WSL?
You can also add check what extraEntries your webpack config is trying to add. Go to themes/falcon/_dev/webpack/webpack.vars.js, find:

      const extraEntries = [];

      for (const workspace of workspaces) {
        extraEntries.push(...glob.sync(`${workspace}/src/js/${entry}/index.js`));
        extraEntries.push(...glob.sync(`${workspace}/src/css/${entry}/index.scss`));
      }

and add after that for of:

console.log(extraEntries);
process.exit(0);

Then run npm run build and check output in your terminal.

It should contains a least:

  '../../../modules/is_searchbar/_theme_dev/src/js/theme/index.js',
  '../../../modules/is_shoppingcart/_theme_dev/src/js/theme/index.js',

If you are using is_favoriteproducts module is should log:

  '../../../modules/is_favoriteproducts/_theme_dev/src/js/theme/index.js',
  '../../../modules/is_searchbar/_theme_dev/src/js/theme/index.js',
  '../../../modules/is_shoppingcart/_theme_dev/src/js/theme/index.js',
  '../../../modules/is_favoriteproducts/_theme_dev/src/css/theme/index.scss'

[Agnax]

Apologies for the delay, I was running some tests because I didn't know about adding modules to the project folder. Thank you so much for your patience with all my questions.

Unfortunately, when I followed your instructions to add:

console.log(extraEntries);
process.exit(0);

It only displays an empty array.
I also installed the same version of Node and updated npm.

Should I update something else?

I'm not using Windows WSL, but after this comment, I'll install it to see if it works. If not, I'll also try using a Live USB with Linux to see if it works.

What else could be causing my array to be empty?

[Agnax]

Solved!

I have solved the problem. The issue was in the package.json file under the WorkSpaces section.

During these days without a response, I have been investigating (although I also attended to other unrelated matters, hence the delay).
But basically, my modules are not located at "../../../modules/*/_theme_dev/"

Instead, they are located at: "../modules/*/_theme_dev/" in relation to the package.json file.

Here is my folder structure:
├── assets
│ ├── css
│ ├── fonts
│ ├── img
│ ├── img-dist
│ ├── js
│ └── preload.html
├── cache
├── config
│ ├── assets.yml
│ └── theme.yml
├── _dev
│ ├── css
│ ├── img
│ ├── js
│ ├── node_modules
│ ├── package.json <--------
│ ├── package-lock.json
│ ├── webpack
│ ├── webpack.config.js
│ └── yarn.lock
├── falcon.zip
├── LICENSE.md
├── Makefile
\├── modules
│ ├── blockreassurance
│ ├── contactform
│ ├── is_imageslider
│ ├── is_searchbar
│ ├── is_shoppingcart
│ ├── is_themecore
│ ├── productcomments
│ ├── ps_advertising
│ ├── ps_banner
│ ├── ps_bestsellers
│ ├── ps_brandlist
│ ├── ps_categoryproducts
│ ├── ps_categorytree
│ ├── ps_contactinfo
│ ├── ps_crossselling
│ ├── ps_currencyselector
│ ├── ps_customeraccountlinks
│ ├── ps_customersignin
│ ├── ps_emailalerts
│ ├── ps_emailsubscription
│ ├── ps_facetedsearch
│ ├── ps_featuredproducts
│ ├── psgdpr
│ ├── ps_imageslider
│ ├── ps_languageselector
│ ├── ps_legalcompliance
│ ├── ps_linklist
│ ├── ps_mainmenu
│ ├── ps_newproducts
│ ├── ps_productinfo
│ ├── ps_rssfeed
│ ├── ps_sharebuttons
│ ├── ps_socialfollow
│ ├── ps_specials
│ ├── ps_supplierlist
│ └── ps_viewedproduct
├── package-lock.json
├── preview.png
├── README.md
└── templates
├── catalog
├── checkout
├── cms
├── components
├── contact.tpl
├── customer
├── errors
├── index.tpl
├── layouts
├── page.tpl
└── _partials

It's most likely that I made a mistake at some point. I apologize for that. However, if anyone else encounters the same issue, I recommend verifying if the modules are being added to the correct folder.

Thank you for your patience and sorry for the inconvenience!

[pibrom]

Thanks for thé solution !
I'm on vacations these 2 following weeks, so I'll try this solution when I get back to work.

[Oksydan]

HI @pibrom @Agnax,

that's not proper solution.
You modules should stay inside root/modules folder. Not inside theme folder.

../../../modules

should take you up to root modules folder and there your js/css source files should exists.

Unfortunately I wasn't able to reproduce an issue. In fact I have no idea how to reproduce it. If you are inside themes/theme_name/_dev that ../../../ should take you up to root folder.

[Agnax]

I know it's not an appropriate solution, but now that you mention it, it's most likely that those who experience this issue don't have PrestaShop installed locally, only the theme like in my case.

Honestly, I was a bit lazy to do a local installation, I just wanted to work with the theme. However, I also don't want to work improperly, so I will install PrestaShop locally. That will most likely solve the original problem.

Once again, thank you very much for your patience, @Oksydan.