CSS import compile error in NextJS app

arunmenon1975 commented 3 years ago

I get the following compile error when i tried a to use the package in a NextJS project :

Failed to compile
./node_modules/react-web-media-player/es/components/Container.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/react-web-media-player/es/components/Container.js
This error occurred during the build process and can only be dismissed by fixing the error.

NextJS has this limitation and actually requires that global CSS imports are done in a special file (_app.tsx) or via directives in a special <Head> component that can have a <link rel="stylesheet" ...>(like rect-helmet) in normal files.

jrebecchi commented 3 years ago

Hi,

I think this is a NextJS related issue. I found this solution on stackoverflow: https://stackoverflow.com/questions/45192088/import-css-files-from-node-modules-in-next-js.

Is it working for you ?

arunmenon1975 commented 3 years ago

Thanks for the pointer. I will check and get back. Since i thought that this may be an 'insurmountable' issue and since i could not get past the compile, i did not continue with evaluating the library. I will re-install and try again.

Just as a note: next-css, one of the proposed solutions(and which was commonly used as the default fix for similar CSS issues), is now deprecated. I am not too keen on making many core nextjs config changes - also part of proposed solutions - unless absolutely required so will be trying out other options, if any, first.

Btw, I found this module to be perfect for my needs: supports common audio/video files through clean/simple options, has the poster/thumbnail option and importantly allows for some interesting level of UI configurability and enhancement through straightforward props. The only issue - and i just noticed it now - is that I may not be able to play YouTube URLs. At the moment support for YouTube is not planned but i think the need may arise sometime in the future.

arunmenon1975 commented 3 years ago

I re-installed and tried the following options:

Use Next's dynamic module with {ssr: false}. This solutions worked whenever i encountered SSR-specific issues (mostly related to calling DOM-related methods and properties without checks)
call import 'react-web-media-player/es/components/Container.css' inside _app.tsx. This is the recommended approach for several popular packages like react-modal, react-toastify and a bunch of others.

It didn't work. I guess now i have 2 options available:

modify next.config.js for webpack-specific fixes. Im not too keen since modifying the core slightly increases the chances of bugs or issues. Modifying and extending the config is quite a common activity but i am just weighing the risk-benefit ratio vis-a-vis future updates, upgrading, passing on the codebase etc
install @webdeb/next-styles and add it to next.config.js. I am again hesitant because it would be over-riding the fixes nextjs already has for similar issues. This RFC goes into detail and the consensus fix has shipped since v9.2

i am ok with closing the issue since there are work-arounds/fixes and probably i just might opt for one of them.

arunmenon1975 commented 3 years ago

Closing the issue since there are workarounds

jrebecchi commented 3 years ago

Hi again,

Indeed next.js allows styles imports from node_modules : https://nextjs.org/docs/basic-features/built-in-css-support#import-styles-from-node_modules

Using the UMD version would it work ?

import 'react-web-media-player/umd/react-web-media-player.js'
import 'react-web-media-player/umd/main.011bfcd5.css'

Btw, thanks a lot for this positive feedback! A little start is welcome if you can finally use it :). About YouTube, for now if you find a way to get the YouTube URL of the video file you can pass it to React-Web-Media-Player.

arunmenon1975 commented 3 years ago

I tried and looks like it doesn't work. There were no compile errors though so the import goes through fine. I did get one error but that was regarding window being undefined which i fixed with:

const MediaPlayer = dynamic(() => import('./MediaPlayer'), {
  ssr: false
});

Main page where the video is called:

...
<MediaPlayer />
...

In MediaPlayer file:

import React, { useEffect, useRef } from 'react';
import 'react-web-media-player/umd/react-web-media-player.js'
import 'react-web-media-player/umd/main.011bfcd5.css'

const MediaPlayer = () => {
 let ReactWebMediaPlayer;
  useEffect(()=>{
    if((window as any).ReactWebMediaPlayer){
      ReactWebMediaPlayer = (window as any).ReactWebMediaPlayer
    }
  },[(window as any).ReactWebMediaPlayer])

  if(!ReactWebMediaPlayer){
    return null
  }

  return (
    <ReactWebMediaPlayer
        title="My own video player"
        video="vide-file-path" 
        thumbnail="thumbnail-path"
    />
  )
}

export default MediaPlayer;

I expected to see ReactWebMediaPlayer attached to the window object but it doesn't seem to get populated.

arunmenon1975 commented 3 years ago

UPDATE

Importing via import ReactWebMediaPlayer from 'react-web-media-player/umd/react-web-media-player.js' seems to work

So this works:

import React, { useEffect, useRef } from 'react';
import ReactWebMediaPlayer from  'react-web-media-player/umd/react-web-media-player.js'
import 'react-web-media-player/umd/main.011bfcd5.css'

const MediaPlayer = () => {

  return (
    <ReactWebMediaPlayer
        title="My own video player"
        video="vide-file-path" 
        thumbnail="thumbnail-path"
    />
  )
}

export default MediaPlayer;

jrebecchi commented 3 years ago

Great ! If someone else encounters the problem he will have the recipe 👨‍🍳 .

jrebecchi / React-Web-Media-Player

CSS import compile error in NextJS app #10