Next.js error about react-pdf-highlighter HOT 11 CLOSED

I forked the repo and worked in a branch to solve the issue.
https://github.com/teesis/react-pdf-highlighter/tree/next-compatibility

Goal is, to remove all import "xyz.css"; from the compiled javascript files in the build directory to make this library fit for the future.

It is easily possible to use css modules. To compile the css to make it be usable as a package, we can use the package https://github.com/michalkvasnicak/babel-plugin-css-modules-transform.

This results in every compiled JS file having code like this, so the module classes are still available.

var styles = {
  "root": "Highlight-module__root___1gzqY",
  "emoji": "Highlight-module__emoji___3JzKQ",
  "parts": "Highlight-module__parts___1vpYj",
  "part": "Highlight-module__part___1EGhE",
  "popup": "Highlight-module__popup___3StVT",
  "scrolledTo": "Highlight-module__scrolledTo___2FX5P"
};

Additionally I configured the plugin so that all css modules are compiled together in one single build/styles.css.
So far this works and we don't have css imports in the compiled files of the build directory.

To make the library work, instead of just importing the react components, we would have to import the styles too.
But afaik this is a common approach.

import {
  PdfLoader,
  PdfHighlighter,
  Tip,
  Highlight,
  Popup,
  AreaHighlight,
  setPdfWorker
} from "react-pdf-highlighter";

import "react-pdf-highlighter/build/styles.css";

But I still have two pain points I need to solve:

Global CSS
PdfHighlighter.js is importing css files from pdfjs-dist and a custom css file pdf_viewer.css which overwrites some of the classes.

import "pdfjs-dist/web/pdf_viewer.css";
import "../style/pdf_viewer.css";

What I would like to do is just take these two files, merge them together to a new css file and merge that together with the combined css file compiled by css-module-transform.
But we don't have Webpack and I don't know if this is possible with babel itself.
If we go this approach, the end developer should only have to import one CSS file, so we need to put it all together.

Flow Tests
The flow tests doesn't seem to work anymore, since it doesn't want to import the css from the build directory.
I'm sure this can be fixed with the .flowconfig somehow, but I never worked with flow before.

@agentcooper Do you think it is possible for you to support on this pain points? At all, would it be a concept you would support and merge or do you have better ideas to achieve this?

from react-pdf-highlighter.

I am getting this error while using it in next.js

from react-pdf-highlighter.

I am getting a similar error while using it in next.js:
./node_modules/react-pdf-highlighter/node_modules/pdfjs-dist/web/pdf_viewer.css
ModuleParseError: Module parse failed: Unexpected character '�' (1:6)
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
(Source code omitted for this binary file)

A further problem seems to be:
Server Error

SyntaxError: Cannot use import statement outside a module
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack

file:/home/benutzer/BADW/KBL-GIT/hon-nextjs-datenerfassung/node_modules/react-pdf-highlighter/build/index.js (1)
wrapSafe
internal/modules/cjs/loader.js (1054:16)
Module._compile
internal/modules/cjs/loader.js (1102:27)
Object.Module._extensions..js
internal/modules/cjs/loader.js (1158:10)
Module.load
internal/modules/cjs/loader.js (986:32)
Function.Module._load
internal/modules/cjs/loader.js (879:14)
Module.require
internal/modules/cjs/loader.js (1026:19)
require
internal/modules/cjs/helpers.js (72:18)
eval
external%20%22react-pdf-highlighter%22 (1:0)
Object.react-pdf-highlighter
file:/home/benutzer/BADW/KBL-GIT/hon-nextjs-datenerfassung/.next/server/static/development/pages/pdfhv.js (186:1)
webpack_require
file:/home/benutzer/BADW/KBL-GIT/hon-nextjs-datenerfassung/.next/server/static/development/pages/pdfhv.js (23:31)
eval
webpack-internal:///./components/PDFHervorheber/Anzeige.jsx (5:79)
Module../components/PDFHervorheber/Anzeige.jsx
file:/home/benutzer/BADW/KBL-GIT/hon-nextjs-datenerfassung/.next/server/static/development/pages/pdfhv.js (104:1)
webpack_require
file:/home/benutzer/BADW/KBL-GIT/hon-nextjs-datenerfassung/.next/server/static/development/pages/pdfhv.js (23:31)
eval
webpack-internal:///./pages/pdfhv.tsx (5:92)
Module../pages/pdfhv.tsx
file:/home/benutzer/BADW/KBL-GIT/hon-nextjs-datenerfassung/.next/server/static/development/pages/pdfhv.js (152:1)
webpack_require
file:/home/benutzer/BADW/KBL-GIT/hon-nextjs-datenerfassung/.next/server/static/development/pages/pdfhv.js (23:31)

from react-pdf-highlighter.

I had the same issue - it's where next.js expects all css to be imported inside the top level component.

It looks like next.js has been updated (9.5.4) to support css inside node_modules, but it appears to require a change in the import statements - since the problem still exists with that version of next.js. You can see their documentation on it here:

https://nextjs.org/docs/basic-features/built-in-css-support#adding-component-level-css

I've spent some time now trying to luck into a workaround with very little success so if anyone did manage to get it working I'd really like to see how they did it. If it could be fixed, that would be even better.

from react-pdf-highlighter.

The library as its current state does not work with Next.js, since it references css modules inside the component code which is not and will not be supported by Next.js.
At the end it should be the developer who is importing needed css into _App.tsx.

I took a look around in the many forks and found https://github.com/chaser92/react-pdf-highlighter from @chaser92 in which he seems to take care of that problem. I don't know, if this is really best practice, since he merges all CSS together to an All.css and I think he intend to import that All.css inside _App.tsx.

I will try out this Fork since I think it's the most evolved approach to use this library in Next.js.
Maybe there is still something to do, but it would be a nice goal to merge these changes back to this repository so the library is ready to use for the future.

from react-pdf-highlighter.

@Fensterbank Would using *.module.css help? https://nextjs.org/docs/basic-features/built-in-css-support#adding-component-level-css

from react-pdf-highlighter.

actually I don't know. I think I'll test it…

from react-pdf-highlighter.

@agentcooper So I just edited the Tip component to use css modules, but we just end in another error:

Description: https://github.com/vercel/next.js/blob/master/errors/css-modules-npm.md

I think the correct way would be to change the build chain so that no css imports are in the build result.
The necessary css would have needed to be imported by the next developer in _App.tsx.

Using a css-in-js solution like styled-components would be another way.

Edit: I'm working on it… stay tuned.

from react-pdf-highlighter.

To be continued in #156.

from react-pdf-highlighter.

Hey @Fensterbank,

Thanks for taking the time to describe your solution -- am currently trying to make use of the lib in next.js. Wondering if you eventually managed to find a workaround for the issue with global css styles. Let me know!

from react-pdf-highlighter.

Hey @agentcooper,

Thanks again for putting this lib together. Wanted to check in and see if PRs are still welcome for the fixes mentioned by @Fensterbank

Let us know!

from react-pdf-highlighter.