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

  1. I ran "composer require filament/tables:"^3.3" -W"
  2. Since it is an existing project, I ran "php artisan filament:install --tables"
  3. Next, I installed tailwind and its plugins, "npm install tailwindcss@3 @tailwindcss/forms @tailwindcss/typography postcss postcss-nesting autoprefixer --save-dev"
  4. Added tailwind.config.js to root folder with contents:
    ```import preset from './vendor/filament/support/tailwind.config.preset'
export default {
presets: [preset],
content: [
'./app/Filament//*.php',
'./resources/views/filament/
/.blade.php',
'./vendor/filament/**/
.blade.php',
],
}
5. I added tailwind layers to resources/css/app.css here are the contents of that file:
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;
6. I created postcss.config.js in my root directory with the contents:
export default {
plugins: {
'tailwindcss/nesting': 'postcss-nesting',
tailwindcss: {},
autoprefixer: {},
},
}
7. After all this i run 
npm run dev
 and i get this compilation error from my postcss.config.js file. 
λ npm run development

development
mix


✖ 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```

  1. 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.
I'm probably missing something with my js configs but im just not sure what.
image.png
Was this page helpful?