Installing Filament - Laravel Mix asset's wont compile
Sorry in advance if I'm missing something straight forward...
I'm on an existing laravel project and just wanted to test out FIlament Tables, I followed the documentation at: https://filamentphp.com/docs/3.x/tables/installation
presets: [preset],
content: [
'./app/Filament//*.php',
'./resources/views/filament//.blade.php',
'./vendor/filament/**/.blade.php',
],
}@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;export default {
plugins: {
'tailwindcss/nesting': 'postcss-nesting',
tailwindcss: {},
autoprefixer: {},
},
}npm run devλ npm run development
Mix
Compiled with some errors in 4.90s
ERROR in ./resources/sass/app.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
C:\laragon\www\hsh\postcss.config.js:1
export default {
^^^^^^
SyntaxError: Unexpected token 'export'
at Object.compileFunction (node:vm:360:18)
at wrapSafe (node:internal/modules/cjs/loader:1048:15)
at Module._compile (node:internal/modules/cjs/loader:1083:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1173:10)
at Module.load (node:internal/modules/cjs/loader:997:32)
at Module._load (node:internal/modules/cjs/loader:838:12)
at Module.require (node:internal/modules/cjs/loader:1021:19)
at module.exports (C:\laragon\www\hsh\node_modules\import-fresh\index.js:32:59)
at loadJs (C:\laragon\www\hsh\node_modules\cosmiconfig\dist\loaders.js:16:18)
at Explorer.loadFileContent (C:\laragon\www\hsh\node_modules\cosmiconfig\dist\Explorer.js:84:32)
at processResult (C:\laragon\www\hsh\node_modules\webpack\lib\NormalModule.js:758:19)
at C:\laragon\www\hsh\node_modules\webpack\lib\NormalModule.js:860:5
at C:\laragon\www\hsh\node_modules\loader-runner\lib\LoaderRunner.js:400:11
at C:\laragon\www\hsh\node_modules\loader-runner\lib\LoaderRunner.js:252:18
at context.callback (C:\laragon\www\hsh\node_modules\loader-runner\lib\LoaderRunner.js:124:13)
at Object.loader (C:\laragon\www\hsh\node_modules\postcss-loader\dist\index.js:56:7)
1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack compiled with 2 errors```
I'm on an existing laravel project and just wanted to test out FIlament Tables, I followed the documentation at: https://filamentphp.com/docs/3.x/tables/installation
- I ran "composer require filament/tables:"^3.3" -W"
- Since it is an existing project, I ran "php artisan filament:install --tables"
- Next, I installed tailwind and its plugins, "npm install tailwindcss@3 @tailwindcss/forms @tailwindcss/typography postcss postcss-nesting autoprefixer --save-dev"
- Added tailwind.config.js to root folder with contents:
```import preset from './vendor/filament/support/tailwind.config.preset'
presets: [preset],
content: [
'./app/Filament//*.php',
'./resources/views/filament//.blade.php',
'./vendor/filament/**/.blade.php',
],
}@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;export default {
plugins: {
'tailwindcss/nesting': 'postcss-nesting',
tailwindcss: {},
autoprefixer: {},
},
}npm run devλ npm run development
development
mix
Compiled with some errors in 4.90s
ERROR in ./resources/sass/app.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
C:\laragon\www\hsh\postcss.config.js:1
export default {
^^^^^^
SyntaxError: Unexpected token 'export'
at Object.compileFunction (node:vm:360:18)
at wrapSafe (node:internal/modules/cjs/loader:1048:15)
at Module._compile (node:internal/modules/cjs/loader:1083:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1173:10)
at Module.load (node:internal/modules/cjs/loader:997:32)
at Module._load (node:internal/modules/cjs/loader:838:12)
at Module.require (node:internal/modules/cjs/loader:1021:19)
at module.exports (C:\laragon\www\hsh\node_modules\import-fresh\index.js:32:59)
at loadJs (C:\laragon\www\hsh\node_modules\cosmiconfig\dist\loaders.js:16:18)
at Explorer.loadFileContent (C:\laragon\www\hsh\node_modules\cosmiconfig\dist\Explorer.js:84:32)
at processResult (C:\laragon\www\hsh\node_modules\webpack\lib\NormalModule.js:758:19)
at C:\laragon\www\hsh\node_modules\webpack\lib\NormalModule.js:860:5
at C:\laragon\www\hsh\node_modules\loader-runner\lib\LoaderRunner.js:400:11
at C:\laragon\www\hsh\node_modules\loader-runner\lib\LoaderRunner.js:252:18
at context.callback (C:\laragon\www\hsh\node_modules\loader-runner\lib\LoaderRunner.js:124:13)
at Object.loader (C:\laragon\www\hsh\node_modules\postcss-loader\dist\index.js:56:7)
1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack compiled with 2 errors```
- I did publish the assets as well, and ran "php artisan filament:upgrade" to check that, and cleared all my caches and reloaded my laragon environment. I was able to get a filament table to appear but the styles aren't compiled so there are no styles to it.
