Tecdiary

Asked 2 years ago

Hi,

I wanted to add another translation language to dashboard, I have completed every step from documentation(Chapter 4) and after third step I run npm install && npm run build i got broken frontend view: every link on the page is one after other and icons are too big it is like css and html it is not on right place.

My development specs:

node v18.12.1 mysqlnd 8.1.6

Can you please help?

Attachments

Dashboard-SSM (561.07 KB)

MS
Mian Saleem
Answered 2 years ago
Hello,

Was there any error when you run the command? Please share the installation url in private replty so that I can have a look.

Thank you
SP
Slavisa Petrovic
Answered 2 years ago
Mian Saleem Hi Mian,

I don’t have installation url, like I mentioned I have tried to translate it to my language and I got broken frontend. My development enviroment is XAMPP Version: 8.1.6 with: PHP 8.2.4 (cli) (built: Mar 14 2023 17:54:25) (ZTS Visual C++ 2019 x64) Copyright © The PHP Group Zend Engine v4.2.4, Copyright © Zend Technologies

node v18.12.1 mysqlnd 8.1.6

I am not getting any errors, all the files are properly built but it seem like something is not ok with CSS, please check page source from index page and div with id=“app”

Attachments
files (15.84 KB)
MS
Mian Saleem
Answered 2 years ago
Hello,

Please run npm run build again and let me know the output.

Thank you
SP
Slavisa Petrovic
Answered 2 years ago
Mian Saleem Hi,

Output is bellow:

$ npm run build

build vite build

vite v4.4.10 building for production… transforming (37) resources\js\Pages\Profile\Partials\LogoutOtherBrowserSessionsForm.vue warn - The content option in your Tailwind CSS configuration is missing or empty. warn - Configure your content sources or your generated CSS will be missing styles. warn - https://tailwindcss.com/docs/content-configuration ✓ 415 modules transformed. [plugin:vite:reporter] (!) C:/xampp/htdocs/m-work/lang/en.json is dynamically imported by C:\xampp\htdocs\m-work\resources\js\app.js but also statically imported by C:/xampp/htdocs/m-work/resources/js/Core/i18n.js, dynamic import will not move module into another chunk.

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

public/build/registerSW.js public/build/manifest.webmanifest public/build/manifest.json public/build/assets/Welcome-ff344b3f.css public/build/assets/app-c8f4f2fa.css public/build/assets/InputError-4b49ee4f.js public/build/assets/SectionBorder-3e91d361.js public/build/assets/Label-45713b39.js public/build/assets/AuthenticationCard-c1b769ac.js public/build/assets/ActionMessage-a3ec8c0b.js public/build/assets/AuthenticationCardL public/build/assets/SectionTitle-13a201af.js public/build/assets/ValidationErrors-a57d2a3c.js public/build/assets/ActionSection-e1040b2a.js public/build/assets/Button-3359226b.js public/build/assets/DangerButton-00fbbafa.js public/build/assets/Checkbox-cbb92eb9.js public/build/assets/Input-eb7099a3.js public/build/assets/SecondaryButton-e8d0d9e8.js public/build/assets/TermsOfService-57396afe.js public/build/assets/PrivacyPolicy-24d831d1.js public/build/assets/DialogModal-df9dd2e2.js public/build/assets/v4-4a60fe23.js public/build/assets/TextInput-dc5f834d.js public/build/assets/FormSection-5767dda2.js public/build/assets/CheckBox-59ce5f35.js public/build/assets/LoadingButton-a0bf6692.js public/build/assets/Index-65253c62.js public/build/assets/Button-97a1773a.js public/build/assets/FileInput-7bd9ac15.js public/build/assets/ConfirmPassword-908e38f7.js public/build/assets/ForgotPassword-61308a46.js public/build/assets/VerifyEmail-78cd90d3.js public/build/assets/Show-342dd096.js public/build/assets/ResetPassword-a65b63b5.js public/build/assets/Modal-6db98214.js public/build/assets/TextareaInput-740add57.js public/build/assets/DeleteUserForm-2af6eb1b.js public/build/assets/Form-03da4afc.js public/build/assets/Login-8988c67b.js public/build/assets/Attachments-443b3b36.js public/build/assets/TwoFactorChallenge-8fcc84b1.js public/build/assets/UpdatePasswordForm-a2e0a1c9.js public/build/assets/Register-e21aaa50.js public/build/assets/Import-bb97fcd5.js public/build/assets/Import-220204ae.js public/build/assets/Import-6d83b76b.js public/build/assets/Import-ead0ed3f.js public/build/assets/Form-247a270c.js public/build/assets/Form-b51dd703.js public/build/assets/UpdateProfileInform public/build/assets/Details-ab710ffb.js public/build/assets/Details-37fd6ab6.js public/build/assets/LogoutOtherBrowserS public/build/assets/Form-cc9db9d8.js public/build/assets/Form-3564206b.js public/build/assets/SearchFilter-3abeecd0.js public/build/assets/List-3bf7104d.js public/build/assets/SelectInput-be286309.js public/build/assets/ApiTokenManager-0056f664.js public/build/assets/List-fe739c16.js public/build/assets/List-a89c459d.js public/build/assets/TwoFactorAuthentica public/build/assets/Index-30141b11.js public/build/assets/Dashboard-3ef79950.js public/build/assets/List-3e945310.js public/build/assets/List-91d470d6.js public/build/assets/AutoCompleteApi-e36ea33f.js public/build/assets/List-f86af801.js public/build/assets/Form-1efd3fd7.js public/build/assets/Form-deec5772.js public/build/assets/List-195fd7d9.js public/build/assets/List-aa839ade.js public/build/assets/Form-0a1ccf49.js public/build/assets/Welcome-a683ff9a.js public/build/assets/List-612663ac.js public/build/assets/tr-f4218a2a.js public/build/assets/index.m-696346f4.js public/build/assets/es-1bcdc539.js public/build/assets/AppLayout-189e9198.js public/build/assets/JsBarcode-07119e64.js public/build/assets/app-05619ace.js 0.15 kB 0.19 kB 32.24 kB │ gzip: 2.69 kB 1.26 kB │ gzip: 0.36 kB 5.93 kB │ gzip: 1.75 kB 0.26 kB │ gzip: 0.22 kB 0.28 kB │ gzip: 0.22 kB 0.34 kB │ gzip: 0.26 kB 0.46 kB │ gzip: 0.32 kB 0.46 kB │ gzip: 0.32 kB ogo-2df50fc8.js 0.46 kB │ gzip: 0.34 kB 0.50 kB │ gzip: 0.31 kB 0.51 kB │ gzip: 0.36 kB 0.52 kB │ gzip: 0.34 kB 0.52 kB │ gzip: 0.36 kB 0.54 kB │ gzip: 0.37 kB 0.55 kB │ gzip: 0.37 kB 0.60 kB │ gzip: 0.38 kB 0.61 kB │ gzip: 0.39 kB 0.64 kB │ gzip: 0.43 kB 0.64 kB │ gzip: 0.43 kB 0.75 kB │ gzip: 0.45 kB 0.87 kB │ gzip: 0.46 kB 0.90 kB │ gzip: 0.52 kB 0.99 kB │ gzip: 0.57 kB 1.08 kB │ gzip: 0.63 kB 1.12 kB │ gzip: 0.71 kB 1.18 kB │ gzip: 0.61 kB 1.24 kB │ gzip: 0.49 kB 1.52 kB │ gzip: 0.78 kB 1.53 kB │ gzip: 0.85 kB 1.59 kB │ gzip: 0.90 kB 1.75 kB │ gzip: 0.92 kB 1.86 kB │ gzip: 0.87 kB 2.00 kB │ gzip: 0.87 kB 2.20 kB │ gzip: 0.94 kB 2.25 kB │ gzip: 1.19 kB 2.25 kB │ gzip: 1.04 kB 2.30 kB │ gzip: 1.06 kB 2.35 kB │ gzip: 1.13 kB 2.41 kB │ gzip: 1.26 kB 2.45 kB │ gzip: 1.12 kB 2.58 kB │ gzip: 0.95 kB 2.96 kB │ gzip: 1.17 kB 3.01 kB │ gzip: 1.41 kB 3.07 kB │ gzip: 1.44 kB 3.08 kB │ gzip: 1.44 kB 3.19 kB │ gzip: 1.49 kB 3.51 kB │ gzip: 1.30 kB 3.51 kB │ gzip: 1.31 kB ationForm-f59bacdc.js 3.91 kB │ gzip: 1.70 kB 3.94 kB │ gzip: 1.55 kB 3.97 kB │ gzip: 1.56 kB essionsForm-06e88c7f.js 3.97 kB │ gzip: 1.79 kB 4.23 kB │ gzip: 1.50 kB 4.31 kB │ gzip: 1.66 kB 4.53 kB │ gzip: 1.63 kB 5.96 kB │ gzip: 2.35 kB 6.27 kB │ gzip: 2.32 kB 6.50 kB │ gzip: 2.50 kB 7.13 kB │ gzip: 2.85 kB 7.34 kB │ gzip: 2.86 kB tionForm-64d60f22.js 7.49 kB │ gzip: 2.65 kB 7.82 kB │ gzip: 2.55 kB 7.87 kB │ gzip: 2.05 kB 8.27 kB │ gzip: 3.01 kB 8.27 kB │ gzip: 3.01 kB 8.48 kB │ gzip: 3.58 kB 9.08 kB │ gzip: 3.34 kB 9.92 kB │ gzip: 3.84 kB 10.07 kB │ gzip: 3.87 kB 12.08 kB │ gzip: 4.11 kB 12.11 kB │ gzip: 4.11 kB 12.58 kB │ gzip: 2.50 kB 12.66 kB │ gzip: 4.06 kB 13.85 kB │ gzip: 4.38 kB 14.78 kB │ gzip: 5.92 kB 18.11 kB │ gzip: 6.54 kB 28.61 kB │ gzip: 9.29 kB 40.94 kB │ gzip: 8.08 kB 60.42 kB │ gzip: 11.85 kB 317.00 kB │ gzip: 103.92 kB

PWA v0.14.7 mode generateSW precache 81 entries (740.37 KiB) files generated public\build\sw.js public\build\workbox-fc255c04.js ✓ built in 5.97s
MS
Mian Saleem
Answered 2 years ago
Hello,

Yes, build done. Are you still getting the same page? Is there any ssl or https involved? I mean do you access the localhost over http or https? Please check the browser console for errors too.

Thank you
SP
Slavisa Petrovic
Answered 2 years ago
Mian Saleem Hi,

Build is ok but still broken afterwards. It is like I don’t have proper CSS styling and HTML tags. Please check the images for login page, it is the same when I enter login details dashboard is broken.

Attachments
1 (182.49 KB)
2 (114.57 KB)
SP
Slavisa Petrovic
Answered 2 years ago
Mian Saleem Also I am not using any ssl or https only localhost enviroment on XAMPP, just wanted to try out everything and enter a new traslation before I upload to server.
MS
Mian Saleem
Answered 2 years ago
Hello,

You can see the 404 error in console, please check the network tab for the url.

Please check the following
1. APP_URL in .env file
2. Try the dev command npm run dev and then access the site
Thank you
SP
Slavisa Petrovic
Answered 2 years ago
Mian Saleem Hi,

I got the same as before. Please check npm run dev output:

PS C:\xampp\htdocs\m-work> npm run dev

dev vite

VITE v4.4.10 ready in 772 ms

➜ Local: http://localhost:5173/ ➜ Network: use --host to expose ➜ press h to show help

LARAVEL v10.14.1 plugin v0.7.8

➜ APP_URL: http://127.0.0.1:8000

warn - The content option in your Tailwind CSS configuration is missing or empty. warn - Configure your content sources or your generated CSS will be missing styles. warn - https://tailwindcss.com/docs/content-configuration

Mian Saleem

Answered 2 years ago

Hello,

I can’t guess what’s wrong. If you can install on live server I can help you check.

The content option should not be missing. Did you modify the config file? The tailwind config file content are

  content: [
    './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
    './vendor/laravel/jetstream/**/*.blade.php',
    './storage/framework/views/*.php',
    './resources/views/**/*.blade.php',
    './resources/js/**/*.vue',
  ],

Thank you

0	Votes
10	Answers
1,150	Views

Frontend View Broken After Npm Install

Hi, I wanted to add another translation language to dashboard, I have completed every step from documentation(Chapter 4) and after third step I run `npm install && npm run build` i got br

Question: Frontend View Broken After Npm Install

Frontend View Broken After Npm Install

Hi, I wanted to add another translation language to dashboard, I have completed every step from documentation(Chapter 4) and after third step I run `npm install && npm run build` i got br