Panel plugin development: Parcel error, requires PostCSS 8

I’m having trouble with Parcel lately. When I try to run npm run build in the plugin directory, the following error occurs:

🚨 Kontext.vue:undefined:undefined: PostCSS plugin postcss-purgecss requires PostCSS 8.

Along with the error comes a link to the “Migration guide” that suggest updating to Parcel 2 nightly pre-release. But I don’t think that’s an option.

There’s no error using npm run dev.

When I remove the <style> parts from the single file component, build runs smoothly without errors.

It’s strange because the setup did work before on my machine without errors. I recently updated MacOS Big Sur to Version 11.3.1 but not sure if that’s connected to the error.

I’m really no expert on Parcel. For the plugin-setup I followed the instructions from the Cookbook. What I tried so far is removing the folders node_modules and .cache as well as the file package-lock.json. I also re-installed Node, npm and Parcel globally without effect.

Here’s the package.json file:

{
  "scripts": {
    "dev": "parcel watch src/index.js --no-source-maps -d ./",
    "build": "parcel build src/index.js --no-source-maps --experimental-scope-hoisting -d ./"
  },
  "posthtml": {
    "recognizeSelfClosing": true
  },
  "devDependencies": {
    "@vue/component-compiler-utils": "^3.2.0",
    "vue-template-compiler": "^2.6.13"
  },
  "dependencies": {
    "vue": "^2.6.13",
    "vue-hot-reload-api": "^2.3.4"
  }
}

(The dependencies are actually being added by npm run dev)

Test fresh pluginkit

I also downloaded a fresh pluginkit ZIP-File from Plugin setup for Panel plugins | Kirby CMS and made a dry run with npm run build.

Parcel fetches the dependencies and changes the package.json to this:

{
  "scripts": {
    "dev": "parcel watch src/index.js --no-source-maps -d ./",
    "build": "parcel build src/index.js --no-source-maps --experimental-scope-hoisting -d ./"
  },
  "posthtml": {
    "recognizeSelfClosing": true
  },
  "devDependencies": {
    "@vue/component-compiler-utils": "^3.2.0",
    "cssnano": "^5.0.5",
    "postcss": "^8.3.0",
    "sass": "^1.34.1",
    "vue-template-compiler": "^2.6.13"
  }
}

Now there’s a slightly different but closely related error:

🚨 PostCSS plugin postcss-discard-comments requires PostCSS 8.

Again, when I remove the (still empty) <style> part from the single file component, there’s no error on build. And of course npm run dev just works anyhow.

1 Like

What works for me (but I don’t know where the error comes from or how to fix it):

{
  "scripts": {
    "dev": "parcel watch src/index.js --no-source-maps -d ./",
    "build": "parcel build src/index.js --no-source-maps --experimental-scope-hoisting -d ./"
  },
  "posthtml": {
    "recognizeSelfClosing": true
  },
  "devDependencies": {
    "@vue/component-compiler-utils": "^3.2.0",
    "cssnano": "^4.1.11",
    "sass": "^1.34.1",
    "vue-template-compiler": "^2.6.12"
  },
  "dependencies": {
    "vue": "^2.6.12",
    "vue-hot-reload-api": "^2.3.4"
  }
}

As you can see, this uses older versions of the dependencies:

Before you run npm run build:

  • remove the node-modules folder
  • remove package-lock.json
  • clear cache folder if present

Thank you. So you can reproduce the error?

Your package.json does the trick. But without it – starting from scratch and let Parcel fetch the dependencies – the error occurs again. So maybe the build script needs to be fixed?

By the way, when I first used your package.json, it only worked with the pluginkit, not with my actual setup. I tried all possible combinations for debugging until I found out that there was a conflict with another node_moduels and .cache folder at root level (the build process of the website). Somehow they got in each other’s way. Only after I also removed and re-built those with the older versions of the dependencies, the other build process within the plugin folder finally worked.

Anyway, thank you for the workaround.