Why adding ta-gallery into Laravel 8 app I got errors in tailwind.config.js?
Closed this issue · 4 comments
i try to add markusantonwolf/ta-gallery/
into Laravel 8 / livewire 2.5 / alpinejs 3 / tailwindcss: 2.2 app
amd modifying file tailwind.config.js as it is proposed in the docs , I got a lot of syntax errors in my PHPStorm 2021.1 : https://prnt.sc/1t3z3er
also I got next errors in console npm command :
master@master-laptop:/mnt/_work_sdb8/wwwroot/lar/Hostels4J$ npm run watch-poll
> @ watch-poll /mnt/_work_sdb8/wwwroot/lar/Hostels4J
> mix watch -- --watch-options-poll=1000
✖ Mix
Compiled with some errors in 1.58s
ERROR in ./resources/css/app.css
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):
SyntaxError: Unexpected token (13:15)
at _class.pp$4.raise (/mnt/_work_sdb8/wwwroot/lar/Hostels4J/node_modules/acorn-node/node_modules/acorn/dist/acorn.js:2927:15)
at _class.pp.unexpected (/mnt/_work_sdb8/wwwroot/lar/Hostels4J/node_modules/acorn-node/node_modules/acorn/dist/acorn.js:698:10)
at _class.pp.expect (/mnt/_work_sdb8/wwwroot/lar/Hostels4J/node_modules/acorn-node/node_modules/acorn/dist/acorn.js:692:28)
at _class.pp$3.parseExprList (/mnt/_work_sdb8/wwwroot/lar/Hostels4J/node_modules/acorn-node/node_modules/acorn/dist/acorn.js:2818:14)
at _class.pp$3.parseExprAtom (/mnt/_work_sdb8/wwwroot/lar/Hostels4J/node_modules/acorn-node/node_modules/acorn/dist/acorn.js:2298:28)
at _class.parseExprAtom (/mnt/_work_sdb8/wwwroot/lar/Hostels4J/node_modules/acorn-node/lib/dynamic-import/index.js:77:117)
at _class.pp$3.parseExprSubscripts (/mnt/_work_sdb8/wwwroot/lar/Hostels4J/node_modules/acorn-node/node_modules/acorn/dist/acorn.js:2129:21)
at _class.pp$3.parseMaybeUnary (/mnt/_work_sdb8/wwwroot/lar/Hostels4J/node_modules/acorn-node/node_modules/acorn/dist/acorn.js:2106:19)
at _class.parseMaybeUnary (/mnt/_work_sdb8/wwwroot/lar/Hostels4J/node_modules/acorn-node/lib/private-class-elements/index.js:122:54)
at _class.pp$3.parseExprOps (/mnt/_work_sdb8/wwwroot/lar/Hostels4J/node_modules/acorn-node/node_modules/acorn/dist/acorn.js:2041:21)
at processResult (/mnt/_work_sdb8/wwwroot/lar/Hostels4J/node_modules/webpack/lib/NormalModule.js:721:19)
at /mnt/_work_sdb8/wwwroot/lar/Hostels4J/node_modules/webpack/lib/NormalModule.js:827:5
at /mnt/_work_sdb8/wwwroot/lar/Hostels4J/node_modules/loader-runner/lib/LoaderRunner.js:399:11
at /mnt/_work_sdb8/wwwroot/lar/Hostels4J/node_modules/loader-runner/lib/LoaderRunner.js:251:18
at context.callback (/mnt/_work_sdb8/wwwroot/lar/Hostels4J/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
at Object.loader (/mnt/_work_sdb8/wwwroot/lar/Hostels4J/node_modules/postcss-loader/dist/index.js:142:7)
1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack compiled with 2 errors
Content of my tailwind.config.js :
const defaultTheme = require('tailwindcss/defaultTheme');
const ta_gallery_safelist = require('./node_modules/@markusantonwolf/ta-gallery/src/plugin/safelist')
module.exports = {
mode: 'jit',
purge: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./vendor/laravel/jetstream/**/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
options: {
safelist: [...ta_gallery_safelist]
}
],
theme: {
extend: {
backgroundImage: theme => ({
'test-device-sm': "url('/img/test-device/sm.png')",
'test-device-md': "url('/img/test-device/md.png')",
'test-device-lg': "url('/img/test-device/lg.png')",
'test-device-xl': "url('/img/test-device/exlg.png')",
}),
fontFamily: {
sans: ['Nunito', ...defaultTheme.fontFamily.sans],
},
},
// ...
taGallery: {
animations: ['swing', 'swipe', 'slide', 'rotate', 'snake', 'window', 'scroll', 'fade', 'dynamic'],
animation_default: 'slide', // default value
aspect_ratios: [
// all aspect ratios
'square',
'movietone',
'large',
'tv',
'academy',
'imax',
'classic',
'still',
'modern',
'common',
'golden',
'super',
'hd',
'wide',
{
instagram: 3 / 5, // add your own aspect ratio
},
],
},
// ...
},
// ...
variants: {
// ...
taGallery: ['responsive'], // default value
extend: {
// ...
},
},
// ...
plugins: [
require('@markusantonwolf/ta-gallery')({
respectPrefix: true, // respect prefix option in config: true (default) | false
respectImportant: true, // respect important option in config: true (default) | false
}),
],
plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
};
Seems I did all in the same way as in plugin docs, but why I have these errors ? Some misconfigure of my laravel app?
Thanks!
@sergeynilov sorry I don't have any experiences with Livewire. "mini-css-extract-plugin" isn't used in TA-Gallery. Do you still have this issue?
purge: {
content: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./vendor/laravel/jetstream/**/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
],
options: {
safelist: [...ta_gallery_safelist]
}
},
@sergeynilov Your tailwind.config.js has two plugin sections. Only the last one is used.
@Jako totally right - @sergeynilov this might be the solution to your issue. Thanks...