Unclosed bracket error?

[nonlinearcom]

Hi, I'm getting this error when using vue-plyr on nuxt 2.2.
There seems to be an issue with plyr/dist/plyr.css... does anyone know how to fix it?

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/vue-plyr#32 (comment)

Thanks in advance!

[sampotts]

You want:
https://github.com/redxtech/vue-plyr/issues/

[redxtech]

I sent him here because it looked like the error was coming directly from the plyr.css, and not anything from vue-plyr. I actually do nothing to the css other than import it.

[dappiu]

I have the same error now that I've updated Nuxt to v2 and webpack to v4.

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

But I also tried getting rid of vue-plyr and importing plyr.css directly: the error is still there, so it seems the problem is on plyr and not vue-plyr.

I also noticed another weird behaviour with plyr (and vue-plyr) that I don't have with other packages: thanks to vue-loader I can usually write import '~plyr/dist/plyr.css' and the resource gets loaded from node_modules if what follows ~ is a package installed on node_modules. This is not true with both plyr and vue-plyr because when I try this syntax I got this error

This dependency was not found:
* ~plyr/dist/plyr.css in ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./components/common/buefy-form-generator.vue?vue&type=script&lang=js&
To install it, you can run: npm install --save ~plyr/dist/plyr.css

So for vue-plyr and plyr I have to use the full path to make the loader find the files I want to import: import '~/node_modules/plyr/dist/plyr.css'

Perhaps all this is related to a packaging error and not an error in the code itself?

[walter0331]

I have the same error as @dappiu,
Nuxt v2 & webpack v4.

Edit:

After I changed var(--value, 0%) to var(--value), it fixed the error.

ref: https://github.com/sampotts/plyr/blob/master/src/sass/components/sliders.scss#L24-L25

[nonlinearcom]

Thanks @walter0331, your solution fixed the issue!

[dappiu]

To add the last bits to this issue:

I tried the solution proposed by @walter0331 and it solves the problem when using Nuxt 2 with webpack 4.

But trying to apply this fix to Nuxt 1.4.2 (which uses webpack 3), an error arises telling that the use of --value without a fallback value is not permitted.

I'm not skilled enough to propose a fix that works for both versions of webpack so I hope that someone else can :)

Thanks in advance!

[dylanmcgowan]

I am also experiencing this error

[sampotts]

Which change should I make then? Remove the fallback (I'd say no if we can avoid it) or is there an option you guys can use to avoid the error perhaps?

[redxtech]

Is supporting v1 essential? I don't use nuxt enough to know how prevalent v1 is but if it's not a significant amount and backward compatibility isn't a main focus dropping next v1 support might be an option.

If I had a bit more time I'd play around a bit with nuxt and see what you could do for a similar effect that works in both browsers but I'm preoccupied at the moment. If this isn't solved within the next couple of days I might have some time to work on it.

[dappiu]

@redxtech If I understand correctly the matter here is not Nuxt version but rather the webpack version (3 vs 4) and probably the issue is not webpack itself but one of the loaders used by webpack (I think postcss-loader because is the first on the chain)
Unfortunately I spent some time investigating the issue but I'm new to the JS world and I can't figure out who is the problem here and so where to open an issue.
Another idea that came to me is that I cannot found the variable --value defined anywhere on the stylesheet so maybe we can get rid of the default value to var() if we initialize --value to 0, but, again, I'm not skilled enough to make significant tests in these directions.

[redxtech]

@dappiu Yeah that probably sounds about right - webpack and not nuxt. When I get some time I can probably do some testing to see if this works better by settings the css variable --value to 0%.

[akarelas]

Could this be a solution to your problem with webpack 4? redxtech/vue-plyr#32 (comment)

I followed the advice (installed the postcss-css-variables modules and set it up as a plugin for postcss on webpack 4) and it worked. I didn't see the webpage itself, but the site compiles.

Only thing is that I now get a warning for vue-plyr ("variable --value is undefined and used without a fallback") but I believe that could be irrelevant to the plyr+webpack issue.

[redxtech]

I just installed nuxt (both v2.2.0 & v1.4.4) and I didn't get any errors. I used the latest version of vue-plyr (which automatically includes the latest version of plyr). Is there something I'm missing? I used the boilerplate project for nuxt v2 (with vue-plyr added) and just changed the version number of nuxt to use v1.4.4. I got zero errors, and everything worked fine. It may be related to the recent update in vue-plyr v5.0.2, but that still doesn't explain the error when using vanilla plyr.

[akarelas]

Isn't it strange that webpack 4 does not understand fallbacks? Shouldn't it?