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',
    ],
}

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;

@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: {},
    },
}

export default {
    plugins: {
        'tailwindcss/nesting': 'postcss-nesting',
        tailwindcss: {},
        autoprefixer: {},
    },
}

7. After all this i run

npm run dev

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

λ 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

8. 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.

Installation - Tables - Filament

Installing Filament - Laravel Mix asset's wont compile

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',
    ],
}

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;

@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: {},
    },
}

export default {
    plugins: {
        'tailwindcss/nesting': 'postcss-nesting',
        tailwindcss: {},
        autoprefixer: {},
    },
}

7. After all this i run

npm run dev

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

λ 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

Installation - Tables - Filament

Installing Filament - Laravel Mix asset's wont compile

Installing Filament - Laravel Mix asset's wont compile

Similar Threads

Similar Threads

Similar Threads