@vite(['resources/css/app.css', 'resources/js/app.js'])

@gych

Thanks Gych, I get this message from guest.blade and app.blade

Here is the vite config file; import { defineConfig } from 'vite'; import laravel from 'laravel-vite-plugin';

export default defineConfig({ plugins: [ laravel({ input: [ 'resources/css/app.css', 'resources/js/app.js', ], refresh: true, }), ], });

@bashiro Which error are you exactly getting?

just this?

 error at: @vite(['resources/css/app.css', 'resources/js/app.js'])

@gych Yes just that coming from the guest.blade and app.blade. This happened only after installing Breeze and Blade.

@rajeshtva

Thanks Raj,

The import file is already in the vite config file input: [ 'resources/css/app.css', 'resources/js/app.js', ],

Any idea ? I have even added the following bootstrap css and js

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></

@bashiro you can just reference them in layout. and don't use classes from them. or if it just for some pages like login & registration. you can use blade template to render them. In fact you can combine view() and inertia() in same project. they don't interfare. just use view() to render blade templates.

@rajeshtva Thanks, I am so new so how do I reference them?

@bashiro i mean you can just put these in the head of your app.blade.php like you normally would. it won't cause any problem. but problem might occur when you have conflicting class names and configuration. i mean bootstrap has some css class which it applies to whole dom tree. in that style conflict would definitely occur.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></

so i think you should focus on another approach, which is to create a separate layout(blade layout file). import bootstrap and css there in head. and use that layout in your login page. this would be neet.

@Snapey Thanks a lot. May be I have to create my own layout for the login page ? And by pass the guest and app blades ? I was thinking when they start to work then I can customize gradually. But May be I have to create my own pages and by pass them ? Thanks

@bashiro Which results do you now get when you use npm run build?

@gych I get error t SyntaxError: Unexpected token 'export'. I have been getting this error after installing breeze

i created the same project under laravel 11 and no errors. So I do not know whether is a good idea to use laravel 11 as new bee or I should just continue with 10? I use visual code What will you recommend ?

@bashiro Something might have gone wrong when you installed 10 but you can continue to use Laravel 11, its the latest release and if you keep using 10 soon you'll have to upgrade to 11 anyways.

Does the SyntaxError error you were getting point you to a specific file where this error occurs?

@gych Thanks gych for the reply. This is the error I get when I creta e a laravel 10 project. Previousely it does not happen. I tried to create a project on a different laptop and it was the same error. I am behind PC with V code It looks like the PostCSS config ia also an issue

vite v4.5.2 building for production...
transforming...
(node:19384) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.

(Use node --trace-warnings ... to show where the warning was created) [Failed to load PostCSS config: Failed to load PostCSS config (searchPath: C:/laravel-courses/ver-10): [SyntaxError] Unexpected token 'export' C:\laravel-courses\ver-10\postcss.config.js:1 export default { ^^^^^^

SyntaxError: Unexpected token 'export' at internalCompileFunction (node:internal/vm:77:18) at wrapSafe (node:internal/modules/cjs/loader:1288:20) at Module._compile (node:internal/modules/cjs/loader:1340:27) at Module._extensions..js (node:internal/modules/cjs/loader:1435:10) at Module.load (node:internal/modules/cjs/loader:1207:32) at Module._load (node:internal/modules/cjs/loader:1023:12) at cjsLoader (node:internal/modules/esm/translators:356:17) at ModuleWrap. (node:internal/modules/esm/translators:305:7) at ModuleJob.run (node:internal/modules/esm/module_job:218:25) at async ModuleLoader.import (node:internal/modules/esm/loader:329:24)]

Node.js v20.11.1

@bashiro

Add this to your package.json file

"type": "module",

Can you share the content of your postcss.config.js file?

@gych Thanks you very much. I added that and restarted Vcode . Then reinstalled breeze and manifest was created automatically. Then everything started working normal. Thank you very much. You've saved me headaches of days. Thanks. I can now continue with my tutorials.

@gych Here is the cotents of the postcss file export default { plugins: { tailwindcss: {}, autoprefixer: {}, }, };

@bashiro No problem :)

So now you don't get any errors when running npm run build?

@gych No I do not get any errors. It now works beautifully. Why is it that module if I may ask?

@bashiro It allowes you to use javascript ES6 (modules) and allows you to use import instead of require that was more used in the past.

Don't forget to mark your thread as solved by selecting the best answer. If you have more questions don't hesitate to reach out.