Custom Block - Single File Component -> ERROR

Hello,
I would like to create a custom block or custom block view for a table block.

I would like to create a single file component and have downloaded the pluginkit, installed and configured according to instructions.

But when I call kirbyup with npx, I get the following error:

kirbyup v0.23.0                                                                                                                                                      12:35:44
start Building src/index.js                                                                                                                                          12:35:44
i Running in watch mode                                                                                                                                              12:35:44  
[vite:css] Cannot read properties of undefined (reading 'config')
file: C:/laragon/www/mypath/site/plugins/clientstable/src/components/clientstable.vue?vue&type=style&index=0&lang.css
ERROR  Build failed  

The content of clientstable.vue I got from
here as a test
.

What could be the reason for this? Does anyone have a similar problem? Do I need to install anything else besides the plugin kit?

I would be very happy about your help.

Best Regards,
Robert

Hello, I have now found the error myself.
I use tailwind.css and have put a postcss.config.js in the root directory of my project with the following entries:

const cssnano = require('cssnano');

module.exports = {
  plugins: [
    require("postcss-import"),
    require("tailwindcss"), // !!!! this entry causes the error !!!!!
    require("autoprefixer"),
    ...process.env.NODE_ENV === 'production' ? [cssnano] : []
  ]
}

As soon as I comment this out:

// require("tailwindcss")

the bundle process in the plugin folder works as expected!

Maybe this will help someone. Maybe someone also has an idea why this is so. I have not started tailwind, but the vite server that is started by kirbyup seems to have a problem with it.

1 Like

I just had the same exact problem. Also commenting out the tailwindcss: {}, line “solved” the issue for me.

I don’t feel like kirbyup should be influenced by config files in parent directories.
Anyway, there’s an issue here: [vite:css] Cannot read properties of undefined (reading 'config') · Issue #14 · johannschopplich/kirbyup · GitHub


Another work around is to give the plugin its own postcss.config.js, so you don’t have to change the website root one

Hi,
thanks for the info with the postcss.config.js and the issue report at github.

Now I know that I am not alone with this problem and can stop looking for other sources causing this error.

Best regards,
Robert

Hi guys, sorry for the late reply.

Indeed, kirbyup should stick to the executing directory to read the PostCSS config file. Just a quick question: From which directory did you run kirbyup? From the pluginkit’s root or did you cd into the plugin?

Hello johannschopplich,

I can’t remember exactly, but I think it was the plugin folder…