search

redxtech / vue-plyr

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

Unclosed bracket error? #32

Closed nonlinearcom closed 5 years ago

nonlinearcom commented 6 years ago

Hi, I'm getting this error when using vue-plyr on nuxt 2.2 Does anyone know how to fix it? Thanks!

ERROR in ./node_modules/plyr/dist/plyr.css (./node_modules/css-loader??ref--3-oneOf-1-1!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/plyr/dist/plyr.css)
Module build failed (from ./node_modules/css-loader/index.js):
Unclosed bracket (1:9591)
redxtech commented 6 years ago

When are you getting this error?

nonlinearcom commented 6 years ago

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

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.

standfv commented 6 years ago

Same error!

redxtech commented 6 years ago

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

iCrawl commented 6 years ago

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

akarelas commented 5 years ago

@iCrawl 's solution seems to work. See more here: https://github.com/sampotts/plyr/issues/1220#issuecomment-434097794

akarelas commented 5 years ago

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

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

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

Yes, this relates to #43

redxtech commented 5 years ago

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