Build error in vue-plyr.css when using @nuxt/postcss8

[ateliershen]

Hi,

I am using Nuxt.js v2.15.4 and vue-plyr 7. It throws the following error when running the build command:

08:32:12.800	ERROR in ./node_modules/vue-plyr/dist/vue-plyr.css (./node_modules/@nuxt/postcss8/node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js??ref--3-oneOf-1-2!./node_modules/vue-plyr/dist/vue-plyr.css)
08:32:12.800	Module build failed (from ./node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js):
08:32:12.800	ParserError: Syntax Error at line: 1, column 50
08:32:12.800	at node_modules/vue-plyr/dist/vue-plyr.css:1:2235

I am following the SSR instructions from the readme, using the exact same settings.
Is anyone else encountering the same issue? Thanks.

[riderx]

Same here

[dargmuesli]

With postcss v8.2.12 I receive the error

#22 33.41 ParserError: Syntax Error at line: 1, column 51
#22 33.41     at /srv/app/node_modules/plyr/dist/plyr.css:1:2198

See this build log

[frederic117]

I got the same error
Module build failed (from ./node_modules/postcss-loader/src/index.js): friendly-errors 16:17:14
ParserError: Syntax Error at line: 1, column 51
at .....\node_modules\plyr\dist\plyr.css:1:2198
Nuxt 2.15.4 and last version.
It works with plyr: 3.6.4

thks for the help

[elihorne]

I'm experiencing the same problem. I tried rolling postcss back from 8.2.12 to 8.2.10, but the error remains.

[elihorne]

As an interim workaround, I've removed Plyr's css from my plugin file, and instead am pulling it from the unpkg CDN. It now successfully generates the build.

export default {
  head() {
    return {
      link: [
        {
          rel: 'stylesheet',
          href: 'https://unpkg.com/vue-plyr/dist/vue-plyr.css',
        },
      ],
    }
  },
}

[riderx]

Same in my side, in plus vue-jlyr is really big so use cdn for the only page I use was a better solution

[saschaeggi]

Same issue here

[lustremedia]

I also would love to see this issue fixed!

[lustremedia]

I also get the error with postcss7 and vue-plyr, so I am wondering if postcss is really the culprit here...

[unremarkablegarden]

Still broken on my end.

[riderx]

@unremarkablegarden the solution of @elihorne is working if you need a workaround

[dargmuesli]

Now that postcss-preset-env v7 is out, monitor nuxt/nuxt#10060 and nuxt/nuxt#9671.
In the meantime you can add the following to your package.json:

  "resolutions": {
    "postcss-preset-env": "7.0.1"
  }

Please tell if that workaround works for you!