Style not loaded in React+Webpack

[MatteoBuffo]

Hello everyone. My goal is to add a videojs player in an already existing React+Webpack project.

This is an excerpt from the existing webpack.config.js:

module.exports = {
    ...
    module: {
        rules: [
            ...
            {
                test: /\.(css)$/,
                exclude: /node_modules/,
                use: [
                    "to-string-loader",
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                            importLoaders: 1,
                            localIdentName: '[local]',
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: () => [require('autoprefixer')({})],
                        }
                    },
                ],
            }
            ...
        ]
    },
    ...
}

and I'm implementing videojs in VideojsManagement.js:

import React, {...} from 'react';
import videojs from 'video.js';
import "video.js/dist/video-js.css";

const VideojsManagement = (props) => {
    return (
        <div data-vjs-player>
            <video
                className="video-js"
                ...
            />
        </div>
    )
};

When I build, my code does not seem to work:

ERROR in ./node_modules/video.js/dist/video-js.css 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @charset "UTF-8";
| .vjs-modal-dialog .vjs-modal-dialog-content, .video-js .vjs-modal-dialog, .vjs-button > .vjs-icon-placeholder:before, .video-js .vjs-big-play-button .vjs-icon-placeholder:before {
|   position: absolute;
 @ ./src/player/Components/VideojsManagement.js 3:0-36

I read how to use Webpack with videojs, and had a look at this comment in another issue. So, in webpack.config.js I replaced

import "video.js/dist/video-js.css";

with

require('!style-loader!css-loader!video.js/dist/video-js.css');

It does build, but the stylesheet is not loaded, and the video player seems like broken:

Although I'm not familiar with Webpack, I've also made various changes in the code of webpack.config.js, like:

• changing the exclude clause, from this

  exclude: /node_modules/,
  

  to this

  exclude: /node_modules\/(?!video.js\/).*/,
  

  in order to exclude the video.js folder
• adding style-loader before to-string-loader
• keeping only style-loader and css-loader

I tried various combinations of the proposed changes, but still no luck. Any suggestions would be appreciated.

Thanks in advance!

[gkatsev]

Do you have a live example of this? I'd expect it to work. Make sure that the player div ends up with a video-js class on it.

[MatteoBuffo]

Hi @gkatsev!

Do you have a live example of this?

Nope, but the whole code is in the OP. What is missing is this small snippet in VideojsManagement parent component:

<VideojsManagement
    {...videoJsOptions}
/>

Make sure that the player div ends up with a video-js class on it.

Checked that, it's alright.

I'm pretty sure the issue concerns the loaders, since video-js.css never gets loaded when I open the page inspector.

I created a sample videojs React project (without Webpack), and the style is loaded correctly with import "video.js/dist/video-js.css";

I also checked the versions of the loaders:

Loader\v.	Project w/out Webpack (working)	Project w/ Webpack (NOT working)
style-loader	1.3.0	1.0.0
css-loader	4.3.0	1.0.1
postcss-loader	3.0.0	missing

Unfortunately, even after updating the ones in the project w/ Webpack, it doesn't work.

May we arrange a meeting on Jitsi or whatever? I would like to show my code to you in person, and I will make sure to report here the possibly discussed passages during the meeting.

[MatteoBuffo]

Hi @gkatsev. I forgot to mention that my React.js project involves WebComponents, so this stuff

<div data-vjs-player>
    <video
        className="video-js"
        ...
    />
</div>

is actually in the shadowDOM. I've read here that video.js ignores videos outside the DOM: in fact, I get this warning

video.es.js:142 VIDEOJS: WARN: The element supplied is not included in the DOM

After some searching for "video.js webcomponents support" and similar, I found this library by @mister-ben and @eXon, but it seems a bit outdated and relying on bower and polymer (which I don't have in my project, and I use npm). Since I can't open an issue on their repo, could you (@mister-ben and @eXon) give me any suggestions, please?

[mister-ben]

My repo was a fork of eXon's since deleted repo. I've not looked much into WebComponents since, sorry.

[MatteoBuffo]

No problem. Thank you anyway! I'll be glad to hear from @eXon :)

[gkatsev]

The way we check to see whether the video element passed to Video.js, unfortunately, doesn't currently take shadow DOM into account. All our CSS also assumes light DOM. Supposedly, there's a way to include css inside the shadow DOM https://stackoverflow.com/a/23286832, which should potentially resolve your issue.

[MatteoBuffo]

Thanks. As suggested in the link you shared, I added
<link rel="stylesheet" href="https://vjs.zencdn.net/7.11.4/video-js.css"/>
and now it works... almost.

Only that small part of the controlBar is visible, and I want a fluid player (I added fluid: true in the player options). I compared the style of this player (brokenStyle from now on) with the style of a working player (workingStyle) from a lightDOM-project, and I found out that the padding-top attribute is absent in brokenStyle.

brokenStyle

workingStyle

After some digging, I found out that this attribute is set in video.es.js, precisely in setTextContent() function:

var setTextContent = function setTextContent(el, content) {
  if (el.styleSheet) {
    el.styleSheet.cssText = content;
  } else {
    el.textContent = content;
  }
};

I put a breakpoint at el.textContent = content; in the browser inspector of both projects, and in both projects it stops there 5 times.

Any clue about this issue?

[gkatsev]

That code is looking for the HEAD element (https://github.com/videojs/video.js/blob/main/src/js/player.js#L750-L756) which probably doesn't exist in the shadow dom.
I guess that feature is incompatible with the shadow dom without some tweaks. In the meanwhile, you should be able to set it up manually.

[MatteoBuffo]

You're right: HEAD is the head of the lightDOM (i.e. document.head).

In the meanwhile, you should be able to set it up manually.

I added this two lines in video.es.js (right after the inserting of the style in document.head):

var shadowRoot = /*shadowRoot of this page*/;
shadowRoot.appendChild(defaultsStyleEl ? defaultsStyleEl.nextSibling : head.firstChild);

and now it works like a charm! Thank you so much for your help :-)