🐛 [BUG] - yarn dev not working

[onursonmez]

Description

I got this error:

root@server /var/www/site.com/web/themes/falcon/_dev # yarn dev yarn run v1.22.22 $ webpack serve --progress --mode=development --env devServer=true

[webpack-dev-server] "hot: true" automatically applies HMR plugin, you don't have to add it manually to your webpack configuration. [webpack-dev-server] [HPM] Proxy created: ** -> https://site.com 10% building 0/1 entries 0/0 dependencies 0/0 modules/var/www/clients/client0/web104/web/themes/falcon/_dev/node_modules/webpack-dev-server/lib/Server.js:2512 throw error; ^

Error: listen EADDRNOTAVAIL: address not available 2606:4700:3032::6815:4432:3505 at Server.setupListenHandle [as _listen2] (node:net:1800:21) at listenInCluster (node:net:1865:12) at GetAddrInfoReqWrap.doListen [as callback] (node:net:2014:7) at GetAddrInfoReqWrap.onlookup [as oncomplete] (node:dns:109:8) { code: 'EADDRNOTAVAIL', errno: -99, syscall: 'listen', address: '2606:4700:3032::6815:4432', port: 3505 }

Node.js v18.19.1 error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Node.js version

v18.19.1

php version

PHP 8.3

OS and it's version

Ubuntu

Browsers

No response

Required module/theme

build

Reproduction steps

I run yarn dev command and i got error:

root@server /var/www/site.com/web/themes/falcon/_dev # yarn dev
yarn run v1.22.22
$ webpack serve --progress --mode=development --env devServer=true

<w> [webpack-dev-server] "hot: true" automatically applies HMR plugin, you don't have to add it manually to your webpack configuration.
<i> [webpack-dev-server] [HPM] Proxy created: **  -> https://site.com
10% building 0/1 entries 0/0 dependencies 0/0 modules/var/www/clients/client0/web104/web/themes/falcon/_dev/node_modules/webpack-dev-server/lib/Server.js:2512
        throw error;
        ^

Error: listen EADDRNOTAVAIL: address not available 2606:4700:3032::6815:4432:3505
    at Server.setupListenHandle [as _listen2] (node:net:1800:21)
    at listenInCluster (node:net:1865:12)
    at GetAddrInfoReqWrap.doListen [as callback] (node:net:2014:7)
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (node:dns:109:8) {
  code: 'EADDRNOTAVAIL',
  errno: -99,
  syscall: 'listen',
  address: '2606:4700:3032::6815:4432',
  port: 3505
}

Node.js v18.19.1
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Logs

No response

[onursonmez]

I changed SERVER_ADDRESS=domain.com to SERVER_ADDRESS=0.0.0.0 then problem fixed

[Oksydan]

Hi @onursonmez,

It looks like you didn't configured your env properly. Did you read installation guide https://github.com/Oksydan/falcon?tab=readme-ov-file#installation? What is your shop domain? It's not Falcon problem at all tbh and error description is clear address not available 2606:4700:3032::6815:4432:3505.

[onursonmez]

my domain name is fegge.com

19 Mar 2024 Sal 02:41 tarihinde Igor Stępień @.***> şunu yazdı:

Hi @onursonmez https://github.com/onursonmez,

It looks like you didn't configured your env properly. Did you read installation guide https://github.com/Oksydan/falcon?tab=readme-ov-file#installation? What is your shop domain? It's not Falcon problem at all tbh and error description is clear address not available 2606:4700:3032::6815:4432:3505.

— Reply to this email directly, view it on GitHub https://github.com/Oksydan/falcon/issues/391#issuecomment-2005313666, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABZX4TJWHTQLRCOFODQ2U63YY53UBAVCNFSM6AAAAABE2F5DBCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAMBVGMYTGNRWGY . You are receiving this because you were mentioned.Message ID: @.***>

[Oksydan]

Are you trying to setup webpack dev server on production server? You shouldn't do it. If you can't use local environment you shouldn't use dev script and you should use just watch. BTW you should never run watch or dev command in production server especially dev since your js files contains a lot of extra code for development purpose and your store will be running rly slow. Especially on mobile devices. You should only deploy assets that comes from build script to production server.

[onursonmez]

I uploaded the files and modules to the fegge.com production server. I did yarn build and activated the theme. Am I doing it wrong? It seems to be working now on fegge.com?

[Oksydan]

No it's ok but that's just my digression about working with the theme 😄. Did you finally achieve to run webpack dev server on your local environment?

[onursonmez]

Yes, but the stripe payment module is not working. When I switch to Classic theme, the credit card form appears, but when Falcon theme is running, the form does not appear. On fegge.com you can add a product to the cart and see it. it doesn't give any error on the console. I am sending screenshots in the attachment.

[Oksydan]

Hi, it might be related to different template structure. Probably stripe module is replacing content instead of adding multiple PaymentOptions. You have to debug it, I can't help you with that. Many modules rely in some way on the classic theme structure and do not take different themes into account. This is not the right way to register paymentOptions and this kind of implementation may not work for many themes.

[onursonmez]

I made a small change to display the stripe credit card form. I am writing this in case others experience this.

I made a small change in themes/falcon/templates/checkout/_partials/steps/payment.tpl

Original code:

<input class="ps-shown-by-js custom-control-input{if $option.binary} binary{/if}" id="{$option.id}" data-module-name="{$option.module_name}" name="payment-option" type="radio" required {if $selected_payment_option == $option.id || $is_free} checked {/if}>

Modified code:

<span>

<input
class="ps-shown-by-js custom-control-input{if $option.binary} binary {/if}"
id="{$option.id}"
data-module-name="{$option.module_name}"
name="payment-option"
type="radio"
required
{if ($selected_payment_option == $option.id || $is_free) || ($payment_options|@count === 1 && $module_options|@count === 1)} checked {/if}
>

<span></span> </span>

I have not tampered with the stripe module, but I think it creates the credit card form in <span></span>. anyway, I did my job and I am very happy :)

[Oksydan]

Hi @onursonmez,

the problem has been solved and I am closing this issue.