search

redxtech / vue-plyr

A Vue component for the plyr (https://github.com/sampotts/plyr) video & audio player.
Other
769 stars 136 forks source link

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

Open ateliershen opened 3 years ago

ateliershen commented 3 years ago

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 commented 3 years ago

Same here

dargmuesli commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

elihorne commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

Same issue here

lustremedia commented 3 years ago

I also would love to see this issue fixed!

lustremedia commented 2 years ago

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

unremarkablegarden commented 2 years ago

Still broken on my end.

riderx commented 2 years ago

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

dargmuesli commented 2 years ago

Now that postcss-preset-env v7 is out, monitor https://github.com/nuxt/nuxt.js/pull/10060 and https://github.com/nuxt/nuxt.js/pull/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!