Next js CSS import error

[gloribus]

Global CSS cannot be imported from within node_modules. Read more: https://nextjs.org/docs/messages/css-npm Location: node_modules/@cyntler/react-doc-viewer/dist/esm/renderers/pdf/index.js

[dattm97]

I have same issue. @cyntler Can you check it?

[cyntler]

@dattm97 Yes, I try to provide css styles as a another bundled css file to optional import in project, instead of directly js file importing.

[durra-developer]

you can use "1.12.0" version

[dvdokkum]

Just trying out this library and immediately ran into this issue. Is there a common workaround besides dropping the version number?

[umakantp]

@cyntler Can you please elaborate, on what you mean? How to fix this? I get the following error:

  ⨯ /Users/user/company/project/node_modules/@cyntler/react-doc-viewer/node_modules/react-pdf/dist/esm/Page/AnnotationLayer.css:16
:root {
^

SyntaxError: Unexpected token ':'
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1178:20)
    at Module._compile (node:internal/modules/cjs/loader:1220:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
    at Module.load (node:internal/modules/cjs/loader:1119:32)
    at Module._load (node:internal/modules/cjs/loader:960:12)
    at Module.require (node:internal/modules/cjs/loader:1143:19)
    at mod.require (/Users/user/company/project/node_modules/next/dist/server/require-hook.js:64:28)
    at require (node:internal/modules/cjs/helpers:119:18)
    at Object.<anonymous> (/Users/user/company/project/node_modules/@cyntler/react-doc-viewer/dist/cjs/renderers/pdf/index.js:16:1)
    at Module._compile (node:internal/modules/cjs/loader:1256:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
    at Module.load (node:internal/modules/cjs/loader:1119:32)
    at Module._load (node:internal/modules/cjs/loader:960:12)
    at Module.require (node:internal/modules/cjs/loader:1143:19) {
  page: '/organizations/N2ZQ4yv0pa7N/workflows/vendorSetup2/tasks/TPvT8p9GzaK4'
}

Using latest version of the Next js and I have simply imported the component:-

import DocViewer, { DocViewerRenderers, PDFRenderer } from '@cyntler/react-doc-viewer'

[EDWernars]

@cyntler Can you please elaborate, on what you mean? How to fix this? I get the following error:

  ⨯ /Users/user/company/project/node_modules/@cyntler/react-doc-viewer/node_modules/react-pdf/dist/esm/Page/AnnotationLayer.css:16
:root {
^

SyntaxError: Unexpected token ':'
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1178:20)
    at Module._compile (node:internal/modules/cjs/loader:1220:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
    at Module.load (node:internal/modules/cjs/loader:1119:32)
    at Module._load (node:internal/modules/cjs/loader:960:12)
    at Module.require (node:internal/modules/cjs/loader:1143:19)
    at mod.require (/Users/user/company/project/node_modules/next/dist/server/require-hook.js:64:28)
    at require (node:internal/modules/cjs/helpers:119:18)
    at Object.<anonymous> (/Users/user/company/project/node_modules/@cyntler/react-doc-viewer/dist/cjs/renderers/pdf/index.js:16:1)
    at Module._compile (node:internal/modules/cjs/loader:1256:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
    at Module.load (node:internal/modules/cjs/loader:1119:32)
    at Module._load (node:internal/modules/cjs/loader:960:12)
    at Module.require (node:internal/modules/cjs/loader:1143:19) {
  page: '/organizations/N2ZQ4yv0pa7N/workflows/vendorSetup2/tasks/TPvT8p9GzaK4'
}

Using latest version of the Next js and I have simply imported the component:-

import DocViewer, { DocViewerRenderers, PDFRenderer } from '@cyntler/react-doc-viewer'

as @durra-developer said, using version 1.12.0 would fix this issue.

Hope it would also fix in newer version of react-doc-viewer.

[metal450]

Same here - installed per the instructions & it immediately failed to build, had to find this issue & rollback to 1.12.0. Should probably be mentioned in the instructions until it's fixed.

[cyntler]

Try to use the latest version (1.16.2) and use it line in your projects: https://github.com/cyntler/react-doc-viewer?tab=readme-ov-file#required-styles