Question: Website Layout Broken After Running Npm Run Build

Website Layout Broken After Running Npm Run Build

G'Day, I have successfully installed the app on my localhost and it was working fine. I then followed the instructions to translate the app to my language. I have done the following:

AM

Alessandro Masciadri

Asked

G’Day,

I have successfully installed the app on my localhost and it was working fine. I then followed the instructions to translate the app to my language.

I have done the following:

  • copied the folder lang/en and renamed into lang/it
  • copied the file lang/en.json and renamed into lang/it.json
  • added this line { "value": "it", "label": "Italian", "flag": "IT" }, into the file lang/languages.json
  • run npm i
  • run npm run build

Unfortunately, the front end layout is now broken (attached screenshot). Any idea how to fix it?

Attachments
  • MS

    Mian Saleem

    Answered

    Hello,

    Was the command completed successfully?

    If yes then please check the console in browser developer tools for error and check the like @vite in the resources/views/app.blade.php that should be @vite('resources/js/app.js', '')

  • N

    Nishad

    Answered

    Copy the /public/css folder from the originally downloaded WIMS package and replace the css folder /resources/css on your installed application then run “npm run build”

  • AM

    Alessandro Masciadri

    Answered

    Unfortunately neither of the above solution fixed the issue. I was actually able to get back to a working layout copying entirely the public folder. However, as soon as I redo the command npm rub build the app layout brakes down again.

    This is the output of the command:

    > rm -rf ./public/assets && vite build

vite v5.4.11 building for production...
✓ 740 modules transformed.
[plugin:vite:reporter] [plugin vite:reporter] 
(!) /app/lang/en.json is dynamically imported by /app/resources/js/app.js but also statically imported by /app/resources/js/Core/i18n.js, dynamic import will not move module into another chunk.

[plugin:vite:reporter] [plugin vite:reporter] 
(!) /app/lang/languages.json is dynamically imported by /app/resources/js/app.js but also statically imported by /app/resources/js/Core/i18n.js, dynamic import will not move module into another chunk.

rendering chunks (111)...
PWA v0.20.5
WARNING: "theme_color" is missing from the web manifest, your application will not be able to be installed
public/registerSW.js                                        0.13 kB
public/manifest.webmanifest                                 0.78 kB
public/manifest.json                                       60.83 kB │ gzip:   4.44 kB
public/assets/app-ComZMNmD.css                              4.52 kB │ gzip:   1.32 kB
public/assets/SectionBorder-BhNQHZX7.js                     0.26 kB │ gzip:   0.21 kB
public/assets/Label-CnLJ3ppa.js                             0.33 kB │ gzip:   0.25 kB
public/assets/SectionTitle-C09Hrcw-.js                      0.34 kB │ gzip:   0.26 kB
public/assets/InputError-D0vVUexW.js                        0.35 kB │ gzip:   0.27 kB
public/assets/AuthenticationCard-j5DVaPdy.js                0.42 kB │ gzip:   0.31 kB
public/assets/ActionMessage-DkjV2EZF.js                     0.45 kB │ gzip:   0.32 kB
public/assets/AuthenticationCardLogo-DAHSNPzJ.js            0.51 kB │ gzip:   0.36 kB
public/assets/ApplicationLogo-BTlL__tC.js                   0.51 kB │ gzip:   0.36 kB
public/assets/Input-CqSfLxP2.js                             0.51 kB │ gzip:   0.34 kB
public/assets/ActionSection-BxWGOh8t.js                     0.52 kB │ gzip:   0.34 kB
public/assets/DangerButton-DzHvE7-y.js                      0.56 kB │ gzip:   0.38 kB
public/assets/ValidationErrors-XghByvux.js                  0.56 kB │ gzip:   0.39 kB
public/assets/SecondaryButton-B14KTA5N.js                   0.58 kB │ gzip:   0.39 kB
public/assets/Checkbox-J6Yu4QSP.js                          0.63 kB │ gzip:   0.41 kB
public/assets/TermsOfService-C2kkW4Ts.js                    0.71 kB │ gzip:   0.46 kB
public/assets/PrivacyPolicy-CfthPVMO.js                     0.71 kB │ gzip:   0.46 kB
public/assets/DialogModal-0HuBL3Jh.js                       0.76 kB │ gzip:   0.45 kB
public/assets/v4-DvF23Exx.js                                0.82 kB │ gzip:   0.45 kB
public/assets/TrashedMessage-DjqNCIDl.js                    0.82 kB │ gzip:   0.51 kB
public/assets/Button-BEbimMcK.js                            1.08 kB │ gzip:   0.48 kB
public/assets/CheckBox-B-ysoEZp.js                          1.15 kB │ gzip:   0.67 kB
public/assets/LoadingButton-nRpT7Lvy.js                     1.20 kB │ gzip:   0.76 kB
public/assets/Error-97sbfORD.js                             1.21 kB │ gzip:   0.66 kB
public/assets/FormSection-BeGzXLXF.js                       1.30 kB │ gzip:   0.71 kB
public/assets/Dialog-bgTmda7J.js                            1.36 kB │ gzip:   0.74 kB
public/assets/TextareaInput-CWCB7eHv.js                     1.39 kB │ gzip:   0.76 kB
public/assets/SelectInput-CtACLJzU.js                       1.42 kB │ gzip:   0.78 kB
public/assets/ApplicationMark-OOlPl2lf.js                   1.62 kB │ gzip:   0.49 kB
public/assets/VerifyEmail-DTKyHtiG.js                       1.81 kB │ gzip:   0.97 kB
public/assets/ConfirmPassword-JWbq1Ksr.js                   1.85 kB │ gzip:   0.97 kB
public/assets/TextInput-BqVpDc4O.js                         1.87 kB │ gzip:   0.79 kB
public/assets/Show-BRt5-kNS.js                              1.96 kB │ gzip:   0.95 kB
public/assets/Show-CWrIJRcy.js                              2.03 kB │ gzip:   0.97 kB
public/assets/Show-CZ-UnMg-.js                              2.04 kB │ gzip:   0.97 kB
public/assets/Show-DO6xffyB.js                              2.04 kB │ gzip:   0.97 kB
public/assets/Show-Bn2myjWK.js                              2.07 kB │ gzip:   0.97 kB
public/assets/Show-BJGlaYjE.js                              2.18 kB │ gzip:   0.97 kB
public/assets/Modal-BdcSub5a.js                             2.18 kB │ gzip:   0.99 kB
public/assets/ForgotPassword-T0br-Ugm.js                    2.33 kB │ gzip:   1.18 kB
public/assets/DropdownLink-CT7DPOTY.js                      2.35 kB │ gzip:   1.09 kB
public/assets/Index-D4vyQmIz.js                             2.43 kB │ gzip:   0.95 kB
public/assets/SelectVariantModal-BI541z_W.js                2.56 kB │ gzip:   1.33 kB
public/assets/FileInput-CHx0lmoj.js                         2.57 kB │ gzip:   1.22 kB
public/assets/ResetPassword-BPAOXVWL.js                     2.59 kB │ gzip:   1.09 kB
public/assets/Trail-p6wDuGM8.js                             2.74 kB │ gzip:   1.28 kB
public/assets/throttle-DMpMg2gK.js                          2.78 kB │ gzip:   1.34 kB
public/assets/DeleteUserForm-D5-RSbKB.js                    2.83 kB │ gzip:   1.21 kB
public/assets/UpdatePasswordForm-Br3cpmAl.js                3.01 kB │ gzip:   1.10 kB
public/assets/TwoFactorChallenge-CuwDUVLq.js                3.06 kB │ gzip:   1.33 kB
public/assets/Login-CYf56-cd.js                             3.10 kB │ gzip:   1.42 kB
public/assets/Alerts-DE_Z3X8G.js                            3.24 kB │ gzip:   1.54 kB
public/assets/Import-DmbZgr4-.js                            3.33 kB │ gzip:   1.56 kB
public/assets/Import-D3Imtdvh.js                            3.36 kB │ gzip:   1.58 kB
public/assets/Import-CyPMb3u1.js                            3.36 kB │ gzip:   1.57 kB
public/assets/Register-7TjnJP6Y.js                          3.42 kB │ gzip:   1.38 kB
public/assets/Import-u6NAGPZ-.js                            3.43 kB │ gzip:   1.61 kB
public/assets/Pagination-Ch0ceMbj.js                        3.60 kB │ gzip:   1.24 kB
public/assets/Import-CImGSZkX.js                            3.82 kB │ gzip:   1.77 kB
public/assets/Import-yQnV2KDw.js                            3.82 kB │ gzip:   1.77 kB
public/assets/UpdateProfileInformationForm-nU_-O9GS.js      3.84 kB │ gzip:   1.59 kB
public/assets/Index-B0VOz104.js                             3.92 kB │ gzip:   1.88 kB
public/assets/Import-N9SgygH7.js                            3.93 kB │ gzip:   1.82 kB
public/assets/LogoutOtherBrowserSessionsForm-CCDTjBww.js    4.43 kB │ gzip:   1.91 kB
public/assets/Index-hRn62qTY.js                             4.48 kB │ gzip:   1.95 kB
public/assets/Index-FWLTTR1R.js                             4.81 kB │ gzip:   2.10 kB
public/assets/Index-DxMc32Zp.js                             5.22 kB │ gzip:   2.20 kB
public/assets/Index-BPGMbV9M.js                             5.49 kB │ gzip:   2.31 kB
public/assets/Index-C0kXu8JH.js                             5.64 kB │ gzip:   2.30 kB
public/assets/Index-BIOYl4V3.js                             5.65 kB │ gzip:   2.34 kB
public/assets/Form-CSxPG9UA.js                              5.96 kB │ gzip:   1.88 kB
public/assets/Form-Dv0nYXbm.js                              6.09 kB │ gzip:   2.27 kB
public/assets/Adjustment-CyXqAm2a.js                        6.19 kB │ gzip:   2.41 kB
public/assets/Details-ByFBj9kK.js                           6.20 kB │ gzip:   2.14 kB
public/assets/Form-CBahKvWU.js                              6.25 kB │ gzip:   2.25 kB
public/assets/AutoComplete-C6mr2vQ1.js                      6.27 kB │ gzip:   2.44 kB
public/assets/Transfer-CMpPKaBW.js                          6.28 kB │ gzip:   2.43 kB
public/assets/Checkin-BUdohsIa.js                           6.30 kB │ gzip:   2.44 kB
public/assets/Checkout-DMjspCG7.js                          6.33 kB │ gzip:   2.45 kB
public/assets/Details-DbSZPqAS.js                           6.57 kB │ gzip:   2.22 kB
public/assets/TwoFactorAuthenticationForm-DedS0xb4.js       6.80 kB │ gzip:   2.36 kB
public/assets/Details-DHVwZFQI.js                           7.01 kB │ gzip:   2.23 kB
public/assets/Form-CLzxOSQe.js                              7.21 kB │ gzip:   2.49 kB
public/assets/Form-DGOjba8y.js                              7.32 kB │ gzip:   2.63 kB
public/assets/SearchFilter-CgTmSZ-d.js                      7.48 kB │ gzip:   3.55 kB
public/assets/Details-BLiMoter.js                           7.62 kB │ gzip:   2.57 kB
public/assets/Details-DkuLeN-b.js                           7.74 kB │ gzip:   2.60 kB
public/assets/Index-AmgGOtOk.js                             7.94 kB │ gzip:   2.48 kB
public/assets/ApiTokenManager-CMgIdEwA.js                   8.21 kB │ gzip:   2.94 kB
public/assets/Form-DCP74QRM.js                              9.01 kB │ gzip:   3.02 kB
public/assets/Index-B79ckHmv.js                            10.45 kB │ gzip:   3.49 kB
public/assets/Index-CwEuRV0C.js                            10.55 kB │ gzip:   3.54 kB
public/assets/Index-DVNRbAD3.js                            10.60 kB │ gzip:   3.54 kB
public/assets/Index-SmA5dYC_.js                            10.69 kB │ gzip:   3.54 kB
public/assets/_baseIsEqual-Bf-KGvd3.js                     12.36 kB │ gzip:   5.00 kB
public/assets/Index-DJHAHOVK.js                            12.84 kB │ gzip:   4.10 kB
public/assets/Index-DTkDgz8B.js                            14.29 kB │ gzip:   3.98 kB
public/assets/Form-CnbyLEKn.js                             14.56 kB │ gzip:   4.37 kB
public/assets/Form-C7MT53nI.js                             21.57 kB │ gzip:   4.24 kB
public/assets/it-DvTgC80J.js                               22.14 kB │ gzip:   6.50 kB
public/assets/fr-C_MQm4GR.js                               22.73 kB │ gzip:   7.35 kB
public/assets/pt-kyGu0O9b.js                               23.30 kB │ gzip:   8.74 kB
public/assets/es-BBq6fVDy.js                               23.85 kB │ gzip:   8.80 kB
public/assets/bg-BCeZ6dM6.js                               24.15 kB │ gzip:  10.21 kB
public/assets/Form-CdHaYLMh.js                             24.58 kB │ gzip:   6.55 kB
public/assets/Form-C2StxA7M.js                             24.70 kB │ gzip:   6.57 kB
public/assets/Form-MiWD905j.js                             24.85 kB │ gzip:   6.62 kB
public/assets/Form-CzcEVNJr.js                             24.85 kB │ gzip:   6.58 kB
public/assets/AdminLayout-BcSp10G5.js                      29.18 kB │ gzip:   7.01 kB
public/assets/JsBarcode-C-9OWE7z.js                        60.32 kB │ gzip:  11.92 kB
public/assets/Index-JiUtuwj9.js                           300.57 kB │ gzip: 111.16 kB
public/assets/app-Bxpdjn0I.js                             368.43 kB │ gzip: 125.67 kB
✓ built in 3.33s

PWA v0.20.5
mode      generateSW
precache  350 entries (4429.97 KiB)
files generated
  public/sw.js
  public/workbox-e3490c72.js```
  • AM

    Alessandro Masciadri

    Answered

    All good my friends. It was a matter of permissions. When running npm run build changes the permissions to the assets folder. Once the right user permission are assigned everything get back to work.

    Thanks anyway for the great support.

    Cheers. Alex

  • N

    Nishad

    Answered

    It’s good to know that your problem has been solved!

  • Login to Reply
We use cookies, by continuing to browse the site you are agreeing to our use of cookies. Read more