Closed nonlinearcom closed 5 years ago
When are you getting this error?
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!
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.
Same error!
Just for reference this issue has been opened at the upstream source sampotts/plyr#1220
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
@iCrawl 's solution seems to work. See more here: https://github.com/sampotts/plyr/issues/1220#issuecomment-434097794
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?
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)
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)
Yes, this relates to #43
I'll be closing this since the issue has been opened on the upstream repo for a while now (sampotts/plyr#1220)
Hi, I'm getting this error when using vue-plyr on nuxt 2.2 Does anyone know how to fix it? Thanks!