Build Error for v3.0.9

[charan0017]

I just updated plyr-react package from 3.0.8 to 3.0.9 and tried to re-build my react project.
It just failed with the following error message!

Failed to compile.

./node_modules/plyr-react/dist/plyr.css
ParserError: Syntax Error at line: 1, column 51

error Command failed with exit code 1.

my node.js version is v14.17.5

[chintan9]

@charan0017 Can you create stackbltz.com for sample ?

It worked for me.

https://stackblitz.com/edit/react-vgfce6?file=src/App.js

[chintan9]

@charan0017 please use v3.0.8 for while you can update your db

npx browserslist@latest --update-db

[pabacham]

I experience the same issue with 3.1.0

[chintan9]

Can try with v3.2.0?

[charan0017]

Can try with v3.2.0?

I just installed v3.2.0. But, still getting the same error!

[realamirhe]

@charan0017, The issue appears to be caused by postcss-custom-properties processing an already minified plyr.css file.

By adding the following to your package, you can utilize yarn resolutions for react-scripts to use the same version.

"resolutions": {
    "postcss-custom-properties": "^11.0.0"
  },

for a more detailed explanation, you can see this answer and this csstools issue

[charan0017]

@charan0017, The issue appears to be caused by postcss-custom-properties processing an already minified plyr.css file.

By adding the following to your package, you can utilize yarn resolutions for react-scripts to use the same version.

"resolutions": {
    "postcss-custom-properties": "^11.0.0"
  },

for a more detailed explanation, you can see this answer and this csstools issue

Wow, It just worked like Charm! Thanks. 😃

[lukaszrzasa]

not working with pnpm

[lukaszrzasa]

pnpm steps:

• copy css code from ./node_modules/plyr-react/dist/plyr.css
• use css unminify tool ( https://unminify.com/ for example)
• create _plyr.scss file in any project location
• paste unminified code
• import your _plyr.scss file instead of original .css file
• done, all works!

// probably unminifier is not required - not tested :)