Error loading PostCSS config during Laravel Breeze installation

[khantseithu]

I am currently following the Laravel bootcamp in a Gitpod environment with Laravel Sail (docker option). While running the command php artisan breeze:install blade, I encountered the following error:

[vite:css] Failed to load PostCSS config (searchPath: /var/www/html): [SyntaxError] Unexpected token 'export'
/var/www/html/postcss.config.js:1
export default {
^^^^^^

SyntaxError: Unexpected token 'export'
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1178:20)
    at Module._compile (node:internal/modules/cjs/loader:1220:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
    at Module.load (node:internal/modules/cjs/loader:1119:32)
    at Module._load (node:internal/modules/cjs/loader:960:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

Additionally, here is an image depicting the error: screenshot

Steps to Reproduce:

1. Set up a Gitpod environment with Laravel Sail (docker option).
2. Run the command php artisan breeze:install blade.

Expected Behavior: The Laravel Breeze installation should proceed without any errors.

Actual Behavior: The installation process fails with the mentioned error related to loading the PostCSS config.

Please let me know if there are any suggestions or workarounds to resolve this issue. Thank you!

[ijpatricio]

Hello @khantseithu

I didn't receive the notification, just by chance I came here.

I'll check this real soon. It's related to the JS bundle, and to configurations regarding using CommonJS or ESModules.

I'll let you know real soon

[ijpatricio]

Ok, so I will have to include postcss.config.js on the template as well.

Can you show me the contents??

They should be compatible: tailwind.config.js and postcss.config.js

if module.exports, they should be extension .cjs

[wahyusa]

I have same issues with Laravel breeze installation and I don't know if it also affect the migration because in my case, I can't even do php artisan migrate , it said connection to database refused.

But I still can connect and access mysql shell.

Also while the URL to another routes is working correctly, the URL to the assets or might be vite assets was always pointed to https://0.0.0.0:5173/ rather than to my APP_URL or ASSET_URL provided in .env.

It was based on this code in the blade app layout

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

My current solution for that vite URL is to manually edit the hot file which is generated after running npm run dev and change the URL.

Environment : All command was running with ./vendor/bin/sail Running the project freshly via Gitpod URL

[ijpatricio]

Thank you for reporting. Hopefully this week I'll have the time and solve this. I think I'm also going to drop Sail, since the build takes forever. I'll keep MySQL in Docker, though.

Thanks

[wahyusa]

Thank you,

I got some references that might be useful

https://github.com/apolopena/gitpod-laravel-starter https://github.com/rakibdevs/laravel-docker

[ijpatricio]

@khantseithu @wahyusa

I could reproduce your problem.

The issue is related to what that Breeze command is scaffolding. After you run it, rename postcss.config.js to postcss.config.cjs and put this contents:

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
}

Also I removed Sail, as it felt too much to wait, for this purpose there would be no gains.

[ijpatricio]

Hey @khantseithu @wahyusa

I've updated the repo to make adding any Laravel Breeze flavor easy.

Bear in mind that we need to run one additional step, because the cloud nature in GitPod is not the same as locally, so we need to configure server link as SSL.

This is documented in the README file, please go through it and let me know if all went well, thanks!

@axonasif maybe you want to try it as well?? Not sure if you're a Laravel user, or do you know any that would be able to try it?

After a couple of people testing, I would blog and tweet about this, so people can easily try Laravel.

Maybe I can make a command that would do all automatically:

php artisan gitpod:breeze blade
php artisan gitpod:breeze vue
php artisan gitpod:breeze react
php artisan gitpod:breeze livewire

What do you think?

[ijpatricio]

Maybe I'm overcomplicating @axonasif

Maybe let's leave it as is. 😅

What I would like to do is to have a template (ready at boot) for Filament.

Would that be okay to start a new repo for that?

[axonasif]

Hi @ijpatricio 👋 Thanks for all your contributions 💪

I'm not familiar with this tech stack but I can certainly help with any gitpod configuration matters, I'll try to take a look tomorrow then get back to you 🙏

[ijpatricio]

Hey @axonasif 👋 My pleasure! 💪

Sure thing! You don't need to worry about anything for now. The double-check I would be comfortable having is with the Laravel stack by installing the different flavors of Breeze.

I tested myself with Blade. Also, another user in #12 is reporting everything is good, so... we're good!

PS: Just let me know if you would like to open a new repo gitpod-samples/template-filament?

[wahyusa]

Hi @ijpatricio, thanks for the update! I’ve given it a whirl with a fresh Laravel installation and Breeze, following the instructions in the README, and it’s all working like a charm.

By the way, it might be a good idea to include the php artisan migrate command in the README under the Breeze steps section. It could be really helpful for folks setting things up and avoid funny mistakes like I did before 😁

[ijpatricio]

Hi @wahyusa Thanks, I just did per your suggestions!

Enjoy!