Unclosed bracket error?

[redxtech]

Unclosed bracket error?

[nonlinearcom]

Hi Redxtech,

this is my setup, the error is fired also with the option SSR set to true.

// plugins/vue-plyr.js:

import 'vue-plyr'
import 'vue-plyr/dist/vue-plyr.css'

// nuxt.config.js:

  plugins: [
        { src: '~/plugins/vue-plyr', ssr: false }
  ],

I'm not sure if the error comes from vue-plyr or plyr but as soon as I clear the plugin call, the error goes away.

Thanks in advance!

[redxtech]

This appears to be an issue with plyr/dist/plyr.css. That means that it's the css from plyr the is the issue. I would recommend opening an issue with them and seeing what they can do to help.

[iCrawl]

I can't seem to reproduce this with nuxt ^2.2.0 and as of writing this vue-plyr: ^5.0.1

// ~/plugins/vue-plyr.js
import Vue from 'vue';
import VuePlyr from 'vue-plyr';
import 'vue-plyr/dist/vue-plyr.css';

Vue.use(VuePlyr);

// nuxt.config.js

  ...
  plugins: [
    '~/plugins/vue-plyr'
  ]
  ...

<plyr>
	<div data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY"></div>
</plyr>

In any case, I thought I might encounter it, did you try the post-css plugin for css-variables?
https://github.com/MadLittleMods/postcss-css-variables

[redxtech]

When are you getting this error?

[standfv]

Same error!

[redxtech]

Just for reference this issue has been opened at the upstream source sampotts/plyr#1220

[akarelas]

@iCrawl 's solution seems to work. See more here: sampotts/plyr#1220 (comment)

[akarelas]

After using @iCrawl 's solution, I now get a warning for vue-plyr's css file.

variable --value is undefined and used without a fallback

Indeed, the dist css appears to mention --value twice, maybe (?) without defining it?

[akarelas]

This bug has been solved. If you create a new nuxt project (this time you will get postcss-custom-properties 8.0.9 instead of 8.0.8) you will see that this paticular has been solved. npm run dev doesn't bring an error message immediately this time.

We do have another error, now, thogh (although we had that one as well, even before)

[g0shed]

getting this error now

/node_modules/plyr/dist/plyr.css:1
  (function (exports, require, module, __filename, __dirname) { @keyframes plyr-progress{to{background-position:25px 0}}@keyframes plyr-popup{0%{opacity:.5;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes plyr-fade-in{from{opacity:0}to{opacity:1}}.plyr{-moz-osx-font-smoothing:auto;-webkit-font-smoothing:subpixel-antialiased;direction:ltr;font-family:Avenir,"Avenir Next","Helvetica Neue","Segoe UI",Helvetica,Arial,sans-serif;font-variant-numeric:tabular-nums;font-weight:500;line-height:1.7;max-width:100%;min-width:200px;position:relative;text-shadow:none;transition:box-shadow .3s ease}.plyr audio,.plyr video{border-radius:inherit;height:auto;vertical-align:middle;width:100%}.plyr button{font:inherit;line-height:inherit;width:auto}.plyr:focus{outline:0}.plyr--full-ui{box-sizing:border-box}.plyr--full-ui *,.plyr--full-ui ::after,.plyr--full-ui ::before{box-sizing:inherit}.plyr--full-ui a,.plyr--full-ui but

  SyntaxError: Invalid or unexpected token
  at new Script (vm.js:74:7)
  at createScript (vm.js:246:10)
  at Object.runInThisContext (vm.js:298:10)
  at Module._compile (internal/modules/cjs/loader.js:657:28)
  at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
  at Module.load (internal/modules/cjs/loader.js:599:32)
  at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
  at Function.Module._load (internal/modules/cjs/loader.js:530:3)
  at Module.require (internal/modules/cjs/loader.js:637:17)
  at require (internal/modules/cjs/helpers.js:20:18)
  at Object.<anonymous> (/mnt/c/Users/dsantos/Documents/projects/wat-fe/node_modules/vue-plyr/dist/vue-plyr.cjs.js:8:1)
  at Module._compile (internal/modules/cjs/loader.js:689:30)
  at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
  at Module.load (internal/modules/cjs/loader.js:599:32)
  at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
  at Function.Module._load (internal/modules/cjs/loader.js:530:3)

[iCrawl]

Yes, this relates to #43

[redxtech]

I'll be closing this since the issue has been opened on the upstream repo for a while now (sampotts/plyr#1220)